Erstellen einer Benutzeroberfläche mit Scaffold und AppBar in Flutter

In können Sie mithilfe von und Widgets Flutter eine einfache, aber leistungsstarke Benutzeroberfläche erstellen. Bietet eine Grundstruktur für eine App mit gemeinsamen Elementen wie der App-Leiste, dem App-Hauptteil und Navigationsschaltflächen. ist ein Teil von und enthält den App-Titel und die Navigationsoptionen. Scaffold AppBar Scaffold AppBar Scaffold

Nachfolgend finden Sie eine Anleitung zum Erstellen einer einfachen Benutzeroberfläche mit Scaffold und AppBar:

Erstellen Sie eine neue Flutter App

Erstellen Sie zunächst eine neue Flutter App, indem Sie den folgenden Befehl ausführen terminal:

flutter create app_name

( app_name Durch den gewünschten Namen Ihrer App ersetzen).

Bearbeiten Sie die Datei main.dart

Ersetzen Sie in der Datei main.dart(im Ordner lib) den Inhalt durch Folgendes:

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

Im obigen Beispiel erstellen wir eine App mit Scaffold und AppBar. Das Scaffold enthält den AppBar und den an die Eigenschaft übergebenen Benutzeroberflächentext body.

Führen Sie die App aus

Um die App schließlich auszuführen, führen Sie den folgenden Befehl aus terminal:

flutter run

Ihre App zeigt einen Bildschirm mit dem Titel „ Flutter App mit Scaffold und AppBar “ in der App-Leiste und dem Text Hello, world!  in der Mitte des Bildschirms an.

Fazit: Scaffold und AppBar sind zwei wesentliche Widgets, Flutter die Ihnen beim Aufbau einer einfachen und funktionalen Benutzeroberfläche helfen. Durch deren Verwendung können Sie attraktive Apps mit grundlegenden UI-Komponenten wie der App-Leiste und dem App-Hauptteil erstellen.