UI bouwen met Scaffold en AppBar in Flutter

In Flutter kunt u een eenvoudige maar krachtige gebruikersinterface bouwen met behulp van Scaffold en AppBar widgets. Scaffold biedt een basisstructuur voor een app met gemeenschappelijke elementen zoals de app-balk, de hoofdtekst van de app en navigatieknoppen. AppBar is een onderdeel van Scaffold en bevat de app-titel en navigatie-opties.

Hieronder vindt u een handleiding voor het bouwen van een eenvoudige gebruikersinterface met behulp van Scaffold en AppBar:

Maak een nieuwe Flutter app

Maak eerst een nieuwe Flutter app door de volgende opdracht uit te voeren in de terminal:

flutter create app_name

(Vervang app_name door de gewenste naam van uw app).

Bewerk het bestand main.dart

Vervang in het bestand main.dart(in de map lib) de inhoud door het volgende:

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

In het bovenstaande voorbeeld maken we een app met Scaffold en AppBar. De Scaffold bevat de AppBar en de hoofdtekst van de gebruikersinterface die aan de body eigenschap is doorgegeven.

Voer de app uit

Om de app ten slotte uit te voeren, voert u de volgende opdracht uit in de terminal:

flutter run

Uw app geeft een scherm weer met de titel " Flutter App met Scaffold en AppBar " op de app-balk en de tekst Hello, world!  in het midden van het scherm.

Conclusie: Scaffold en AppBar zijn twee essentiële widgets Flutter waarmee u een eenvoudige en functionele gebruikersinterface kunt bouwen. Door ze te gebruiken, kunt u aantrekkelijke apps maken met basis UI-componenten zoals de app-balk en de app-body.