Setelah sebelumnya kita belajar tentang stateless dan stateful widget, kini kita akan coba membahas mengenai struktur widget pada aplikasi Flutter. Berikut adalah struktur widget minimal untuk aplikasi flutter
Dapat kita lihat pada gambar diatas bahwa untuk Struktur Widget pada Aplikasi Flutter, umumnya membutuhkan widget MaterialApp.
Di dalam MaterialApp widget umumnya memiliki home properti yang dapat diisi oleh widget Scaffold dan widget lainnya sebagai child. Yang paling penting untuk diingat tentang flutter adalah semuanya adalah widget dan setiap widget memiliki kegunaannya masing-masing.
Daftar Isi
MaterialApp( )
MaterialApp adalah widget paling utama yang akan diakses pertama kali oleh fungsi main(). MaterialApp memiliki properti home yang dimana akan menjadi default route aplikasi.
void main() => MaterialApp(
home: Scaffold(),
);Scaffold()
Scaffold adalah widget utama yang ditampilkan di aplikasi Anda. Ini pada dasarnya adalah wadah untuk semua widget lainnya. Jika Anda hanya memiliki satu widget di aplikasi pada awalnya, itu adalah Scaffold. Scaffold juga menampung beberapa fitur dasar aplikasi seperti AppBar, Body, BottomNavigationBar, FloatingActionButton, dll.
Untuk widget-widget dibawah dari scaffold, kita juga dapat mengklasifikasikannya menjadi tiga (3) kelompok, yaitu :
- Standalone widget
- Single child widget
- Multiple children widget
Standalone widget
Standalone widget adalah jenis widget yang tidak mengandung widget lain. Mereka memiliki fungsi tertentu dan biasanya digunakan oleh jenis widget lainnya untuk mengisi konten, atau untuk sekedar menjadi styling properties. Contoh dari Standalone widget adalah :
- AppBar
- ImageAsset
- Icon
- Text
- TextStyle
Text("Belajar Flutter");Single child widget
Sesuai namanya, singe child widget adalah widget yang hanya dapat memiliki SATU widget di dalamnya. Tipe widget ini memiliki properti yang bernama “child” digunakan untuk memasukan widget lain kedalam single child widget. Contoh dari single child widget yaitu :
- Center
- Container
- Expanded
- CircleAvatar
- RaisedButton
- dll
Container(
child: Text("Belajar Flutter"),
);Multiple children widget
Widget ini dapat memiliki lebih dari satu widget di dalamnya. Tentu dalam setiap aplikasi pasti kita membutuhkan seperti kolom atau baris baik untuj layout ataupun konten. Untuk membuat hal seperti itu maka widget multiple children ini yang kamu butuhkan. Ciri dari widget ini yaitu memiliki properties yang bernama “children“. Contoh untuk multiple children widget yaitu :
- Row
- Column
- GridView
- Stack
- dll
Column(
children: <Widget>[
Text('Ayo Belajar Flutter'),
Text('di BelajarFlutter.com'),
],
)