Bangunan UI karo Scaffold lan AppBar ing Flutter

Ing Flutter, sampeyan bisa mbangun antarmuka panganggo prasaja nanging kuat nggunakake Scaffold lan AppBar widget. Scaffold nyedhiyakake struktur dhasar kanggo aplikasi kanthi unsur umum kaya bar app, awak app, lan tombol navigasi. AppBar minangka bagean saka Scaffold lan ngemot judhul app lan opsi pandhu arah.

Ing ngisor iki minangka pandhuan babagan carane nggawe antarmuka pangguna sing gampang nggunakake Scaffold lan AppBar:

Nggawe Flutter Aplikasi Anyar

Pisanan, gawe aplikasi anyar Flutter kanthi nglakokake perintah ing ngisor iki ing terminal:

flutter create app_name

(Ganti app_name nganggo jeneng app sing dikarepake).

Sunting file main.dart

Ing file main.dart(ing folder lib), ganti konten kasebut ing ngisor iki:

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

Ing conto ing ndhuwur, kita nggawe app karo Scaffold lan AppBar. Isine Scaffold lan AppBar awak antarmuka pangguna sing diterusake menyang body properti kasebut.

Mbukak App

Pungkasan, kanggo mbukak app, jalanake printah ing ngisor iki ing terminal:

flutter run

Aplikasi sampeyan bakal nampilake layar kanthi judhul " Flutter Aplikasi karo Scaffold lan AppBar " ing garis app lan teks Hello, world!  ing tengah layar.

 

Kesimpulan: Scaffold lan AppBar rong widget penting Flutter sing mbantu sampeyan mbangun antarmuka pangguna sing gampang lan fungsional. Kanthi nggunakake, sampeyan bisa nggawe app atraktif karo komponen UI dhasar kaya bar app lan awak app.