Gina UI tare Scaffold da AppBar ciki Flutter

A cikin Flutter, zaku iya gina sauƙi mai sauƙi amma mai ƙarfi ta amfani Scaffold da AppBar widgets. Scaffold yana ba da tsari na asali don ƙa'idar tare da abubuwa gama gari kamar mashaya app, jikin app, da maɓallin kewayawa. AppBar wani bangare ne na Scaffold kuma ya ƙunshi taken app da zaɓuɓɓukan kewayawa.

A ƙasa akwai jagora kan yadda ake gina ƙa'idar mai amfani mai sauƙi ta amfani Scaffold da AppBar:

Ƙirƙiri Sabon Flutter App

Da farko, ƙirƙiri sabon Flutter ƙa'ida ta hanyar gudanar da umarni mai zuwa a cikin terminal:

flutter create app_name

(Maye gurbin app_name da sunan da ake so na app ɗin ku).

Shirya main.dart fayil

A cikin babban fayil ɗin main.dart(a cikin babban fayil ɗin lib), maye gurbin abun ciki tare da mai zuwa:

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

A cikin misalin da ke sama, mun ƙirƙiri app tare Scaffold da AppBar. The Scaffold ƙunshi AppBar da kuma mai amfani dubawa jiki wuce zuwa body dukiya.

Gudanar da App

A ƙarshe, don gudanar da app, gudanar da umarni mai zuwa a cikin terminal:

flutter run

App ɗin ku zai nuna allo mai taken " Flutter App tare Scaffold da AppBar " akan mashaya app da rubutu Hello, world!  a tsakiyar allon.

Kammalawa: Scaffold kuma AppBar sune mahimman widgets guda biyu a cikin Flutter waɗanda ke taimaka muku gina ƙa'idar mai amfani mai sauƙi da aiki. Ta amfani da su, zaku iya ƙirƙirar ƙa'idodi masu ban sha'awa tare da ainihin abubuwan UI kamar mashaya app da jikin app.