Membina UI dengan Scaffold dan AppBar dalam Flutter

Dalam Flutter, anda boleh membina antara muka pengguna yang ringkas tetapi berkuasa menggunakan Scaffold dan AppBar widget. Scaffold menyediakan struktur asas untuk apl dengan elemen biasa seperti bar apl, badan apl dan butang navigasi. AppBar adalah sebahagian daripada Scaffold dan mengandungi tajuk apl dan pilihan navigasi.

Di bawah ialah panduan tentang cara membina antara muka pengguna yang mudah menggunakan Scaffold dan AppBar:

Cipta Flutter Apl Baharu

Mula-mula, buat aplikasi baharu Flutter dengan menjalankan arahan berikut dalam terminal:

flutter create app_name

(Ganti app_name dengan nama apl anda yang diingini).

Edit fail main.dart

Dalam fail main.dart(di dalam folder lib), gantikan kandungan dengan yang berikut:

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

Dalam contoh di atas, kami mencipta apl dengan Scaffold dan AppBar. The Scaffold mengandungi AppBar dan badan antara muka pengguna yang dihantar ke body harta itu.

Jalankan Apl

Akhir sekali, untuk menjalankan aplikasi, jalankan arahan berikut dalam terminal:

flutter run

Apl anda akan memaparkan skrin dengan tajuk " Flutter Apl dengan Scaffold dan AppBar " pada bar apl dan teks Hello, world!  di tengah skrin.

Kesimpulan: Scaffold dan AppBar merupakan dua widget penting yang Flutter membantu anda membina antara muka pengguna yang mudah dan berfungsi. Dengan menggunakannya, anda boleh membuat apl menarik dengan komponen UI asas seperti bar apl dan badan apl.