Opbygning af UI med Scaffold og AppBar i Flutter

I Flutter kan du bygge en enkel, men kraftfuld brugergrænseflade ved hjælp af Scaffold og AppBar widgets. Scaffold giver en grundlæggende struktur for en app med fælles elementer som app-bjælken, app-teksten og navigationsknapper. AppBar er en del af Scaffold og indeholder appens titel og navigationsmuligheder.

Nedenfor er en guide til, hvordan man opbygger en simpel brugergrænseflade ved hjælp af Scaffold og AppBar:

Opret en ny Flutter app

Først skal du oprette en ny Flutter app ved at køre følgende kommando i terminal:

flutter create app_name

(Erstat app_name med det ønskede navn på din app).

Rediger main.dart-filen

I main.dart-filen(inde i mappen lib) skal du erstatte indholdet med følgende:

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 eksemplet ovenfor opretter vi en app med Scaffold og AppBar. Den Scaffold indeholder AppBar og brugergrænsefladeteksten, der er videregivet til body ejendommen.

Kør appen

Til sidst, for at køre appen, skal du køre følgende kommando i terminal:

flutter run

Din app vil vise en skærm med titlen " Flutter App med Scaffold og AppBar " på applinjen og teksten Hello, world!  i midten af ​​skærmen.

Konklusion: Scaffold og AppBar er to væsentlige widgets, Flutter der hjælper dig med at opbygge en enkel og funktionel brugergrænseflade. Ved at bruge dem kan du oprette attraktive apps med grundlæggende UI-komponenter som app-bjælken og app-kroppen.