Izrada korisničkog sučelja s Scaffold i AppBar unutra Flutter

U Flutter, možete izgraditi jednostavno, ali snažno korisničko sučelje koristeći Scaffold i AppBar widgete. Scaffold pruža osnovnu strukturu za aplikaciju s uobičajenim elementima kao što su traka aplikacije, tijelo aplikacije i gumbi za navigaciju. AppBar dio je Scaffold i sadrži naslov aplikacije i mogućnosti navigacije.

Dolje je vodič o tome kako izgraditi jednostavno korisničko sučelje koristeći Scaffold i AppBar:

Napravi novu Flutter aplikaciju

Najprije izradite novu Flutter aplikaciju pokretanjem sljedeće naredbe u terminal:

flutter create app_name

(Zamijenite app_name željenim nazivom svoje aplikacije).

Uredite datoteku main.dart

U datoteci main.dart(unutar mape lib) zamijenite sadržaj sljedećim:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

U gornjem primjeru stvaramo aplikaciju s Scaffold i AppBar. Sadrži i Scaffold tijelo AppBar korisničkog sučelja proslijeđeno svojstvu body.

Pokrenite aplikaciju

Konačno, da biste pokrenuli aplikaciju, pokrenite sljedeću naredbu u terminal:

flutter run

Vaša će aplikacija prikazati zaslon s naslovom " Flutter Aplikacija s Scaffold i AppBar " na traci aplikacije i tekstom Hello, world!  u sredini zaslona.

Zaključak: Scaffold i AppBar dva su bitna widgeta Flutter koji vam pomažu izgraditi jednostavno i funkcionalno korisničko sučelje. Njihovom upotrebom možete izraditi atraktivne aplikacije s osnovnim komponentama korisničkog sučelja kao što su traka aplikacije i tijelo aplikacije.