Käyttöliittymän rakentaminen sisään Scaffold ja AppBar sisään Flutter

-sovelluksessa Flutter voit rakentaa yksinkertaisen mutta tehokkaan käyttöliittymän käyttämällä Scaffold ja AppBar widgetejä. Scaffold tarjoaa sovellukselle perusrakenteen, jossa on yleisiä elementtejä, kuten sovelluspalkki, sovelluksen runko ja navigointipainikkeet. AppBar on osa Scaffold ja sisältää sovelluksen otsikon ja navigointivaihtoehdot.

Alla on opas yksinkertaisen käyttöliittymän rakentamiseen käyttämällä Scaffold ja AppBar:

Luo uusi Flutter sovellus

Luo ensin uusi Flutter sovellus suorittamalla seuraava komento terminal:

flutter create app_name

(Korvaa app_name sovelluksesi halutulla nimellä).

Muokkaa main.dart-tiedostoa

Korvaa main.dart-tiedoston(lib-kansion sisällä) sisältö seuraavalla:

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

Yllä olevassa esimerkissä luomme sovelluksen Scaffold ja AppBar. Sisältää Scaffold ominaisuuden AppBar ja käyttöliittymän rungon body.

Suorita sovellus

Suorita lopuksi sovellus suorittamalla seuraava komento terminal:

flutter run

Sovelluksesi näyttää näytön, jonka otsikko on " Flutter App with Scaffold and AppBar " sovelluspalkissa ja teksti Hello, world!  näytön keskellä.

Johtopäätös: Scaffold ja AppBar ovat kaksi olennaista widgetiä, Flutter jotka auttavat sinua rakentamaan yksinkertaisen ja toimivan käyttöliittymän. Niiden avulla voit luoda houkuttelevia sovelluksia, joissa on peruskäyttöliittymäkomponentit, kuten sovelluspalkki ja sovelluksen runko.