Budowanie interfejsu użytkownika Scaffold zi AppBar w Flutter

W programie Flutter możesz zbudować prosty, ale wydajny interfejs użytkownika za pomocą widżetów Scaffold i AppBar. Scaffold zapewnia podstawową strukturę aplikacji z typowymi elementami, takimi jak pasek aplikacji, treść aplikacji i przyciski nawigacyjne. AppBar jest częścią Scaffold i zawiera tytuł aplikacji oraz opcje nawigacji.

Poniżej znajduje się przewodnik, jak zbudować prosty interfejs użytkownika za pomocą Scaffold i AppBar:

Utwórz nową Flutter aplikację

Najpierw utwórz nową Flutter aplikację, uruchamiając następujące polecenie w terminal:

flutter create app_name

(Zastąp app_name żądaną nazwą swojej aplikacji).

Edytuj plik main.dart

W pliku main.dart(wewnątrz folderu lib) zastąp zawartość następującą treścią:

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!'),  
     ),  
   );  
  }  
}  

W powyższym przykładzie tworzymy aplikację za pomocą Scaffold i AppBar. Zawiera i Scaffold treść AppBar interfejsu użytkownika przekazaną do body właściwości.

Uruchom aplikację

Na koniec, aby uruchomić aplikację, uruchom następujące polecenie w terminal:

flutter run

Twoja aplikacja wyświetli ekran z tytułem „ Flutter Aplikacja z Scaffold i AppBar ” na pasku aplikacji i tekstem Hello, world!  na środku ekranu.

Wniosek: Scaffold i AppBar są to dwa podstawowe widżety, Flutter które pomogą Ci zbudować prosty i funkcjonalny interfejs użytkownika. Korzystając z nich, możesz tworzyć atrakcyjne aplikacje z podstawowymi komponentami interfejsu użytkownika, takimi jak pasek aplikacji i treść aplikacji.