Izdelava uporabniškega vmesnika z Scaffold in AppBar v Flutter

V Flutter, lahko zgradite preprost, a zmogljiv uporabniški vmesnik z uporabo gradnikov Scaffold in AppBar. Scaffold zagotavlja osnovno strukturo za aplikacijo s skupnimi elementi, kot so vrstica aplikacije, telo aplikacije in gumbi za krmarjenje. AppBar je del Scaffold in vsebuje naslov aplikacije in možnosti navigacije.

Spodaj je vodnik o tem, kako zgraditi preprost uporabniški vmesnik z uporabo Scaffold in AppBar:

Ustvari novo Flutter aplikacijo

Najprej ustvarite novo Flutter aplikacijo tako, da zaženete naslednji ukaz v terminal:

flutter create app_name

(Zamenjajte app_name z želenim imenom vaše aplikacije).

Uredite datoteko main.dart

V datoteki main.dart(znotraj mape lib) zamenjajte vsebino z naslednjim:

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

V zgornjem primeru ustvarimo aplikacijo z Scaffold in AppBar. Vsebuje Scaffold in AppBar telo uporabniškega vmesnika, posredovano lastnosti body.

Zaženite aplikacijo

Za zagon aplikacije zaženite naslednji ukaz v terminal:

flutter run

Vaša aplikacija bo prikazala zaslon z naslovom » Flutter Aplikacija z Scaffold in AppBar « v vrstici aplikacij in besedilo Hello, world!  na sredini zaslona.

Zaključek: Scaffold in AppBar sta dva bistvena gradnika Flutter, ki vam pomagata zgraditi preprost in funkcionalen uporabniški vmesnik. Z njihovo uporabo lahko ustvarite privlačne aplikacije z osnovnimi komponentami uporabniškega vmesnika, kot sta vrstica aplikacij in telo aplikacije.