Bygge brukergrensesnitt med Scaffold og AppBar inn Flutter

I Flutter kan du bygge et enkelt, men kraftig brukergrensesnitt ved å bruke Scaffold og AppBar widgets. Scaffold gir en grunnleggende struktur for en app med vanlige elementer som applinjen, appkroppen og navigasjonsknapper. AppBar er en del av Scaffold og inneholder apptittel og navigasjonsalternativer.

Nedenfor er en guide for hvordan du bygger et enkelt brukergrensesnitt ved å bruke Scaffold og AppBar:

Opprett en ny Flutter app

Først oppretter du en ny Flutter app ved å kjøre følgende kommando i terminal:

flutter create app_name

(Erstatt app_name med ønsket navn på appen din).

Rediger main.dart-filen

I main.dart-filen(inne i lib-mappen), erstatt innholdet 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 lager vi en app med Scaffold og AppBar. Den Scaffold inneholder kroppen AppBar og brukergrensesnittet som er sendt til body egenskapen.

Kjør appen

Til slutt, for å kjøre appen, kjør følgende kommando i terminal:

flutter run

Appen din vil vise en skjerm med tittelen " Flutter App med Scaffold og AppBar " på applinjen og teksten Hello, world!  i midten av skjermen.

Konklusjon: Scaffold og AppBar er to viktige widgets Flutter som hjelper deg med å bygge et enkelt og funksjonelt brukergrensesnitt. Ved å bruke dem kan du lage attraktive apper med grunnleggende brukergrensesnittkomponenter som applinjen og appkroppen.