Bygga UI med Scaffold och AppBar i Flutter

I Flutter kan du bygga ett enkelt men kraftfullt användargränssnitt med hjälp av Scaffold och AppBar widgets. Scaffold ger en grundläggande struktur för en app med vanliga element som appfältet, appkroppen och navigeringsknappar. AppBar är en del av Scaffold och innehåller appens titel och navigeringsalternativ.

Nedan finns en guide om hur man bygger ett enkelt användargränssnitt med Scaffold och AppBar:

Skapa en ny Flutter app

Skapa först en ny Flutter app genom att köra följande kommando i terminal:

flutter create app_name

(Ersätt app_name med önskat namn på din app).

Redigera filen main.dart

I main.dart-filen(inuti mappen lib), ersätt innehållet med följande:

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

I exemplet ovan skapar vi en app med Scaffold och AppBar. Den Scaffold innehåller AppBar kroppen och användargränssnittet som skickas till body egenskapen.

Kör appen

Slutligen, för att köra appen, kör följande kommando i terminal:

flutter run

Din app kommer att visa en skärm med titeln " Flutter App med Scaffold och AppBar " på appfältet och texten Hello, world!  i mitten av skärmen.

Slutsats: Scaffold och AppBar är två viktiga widgets Flutter som hjälper dig att bygga ett enkelt och funktionellt användargränssnitt. Genom att använda dem kan du skapa attraktiva appar med grundläggande UI-komponenter som appfältet och appkroppen.