Kujenga UI ndani Scaffold na AppBar ndani Flutter

Katika Flutter, unaweza kuunda kiolesura rahisi lakini chenye nguvu cha mtumiaji kwa kutumia Scaffold na AppBar wijeti. Scaffold hutoa muundo msingi wa programu yenye vipengele vya kawaida kama vile upau wa programu, mwili wa programu na vitufe vya kusogeza. AppBar ni sehemu ya Scaffold na ina kichwa cha programu na chaguo za urambazaji.

Ifuatayo ni mwongozo wa jinsi ya kuunda kiolesura rahisi cha mtumiaji kwa kutumia Scaffold na AppBar:

Unda Flutter Programu Mpya

Kwanza, unda programu mpya Flutter kwa kutekeleza amri ifuatayo katika terminal:

flutter create app_name

(Badilisha app_name na jina unalotaka la programu yako).

Hariri main.dart Faili

Katika faili kuu ya dart(ndani ya folda ya lib), badilisha yaliyomo na yafuatayo:

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

Katika mfano hapo juu, tunaunda programu na Scaffold na AppBar. Ina Scaffold mwili AppBar wa kiolesura na kiolesura kilichopitishwa kwenye body mali.

Endesha Programu

Mwishowe, ili kuendesha programu, endesha amri ifuatayo katika terminal:

flutter run

Programu yako itaonyesha skrini yenye kichwa " Flutter Programu na Scaffold " AppBar kwenye upau wa programu na maandishi Hello, world!  katikati ya skrini.

 

Hitimisho: Scaffold na AppBar ni wijeti mbili muhimu Flutter ambazo hukusaidia kujenga kiolesura rahisi na cha kufanya kazi cha mtumiaji. Kwa kuzitumia, unaweza kuunda programu zinazovutia zenye vipengele vya msingi vya UI kama vile upau wa programu na mwili wa programu.