Tutorial Flutter Part 3 : Struktur Widget Pada Flutter

This post is also available in: English

Hallo apa kabar teman semuanya, semoga kalian sehat dan sukses selalu. Kali ini kita kan membahas struktur widget pada Flutter yang apling sering digunakan untuk membuat projek.

Ketika kita membuat aplikasi, kita menginginkan aplikasinya yang cantik dan terstruktur. Pilihan tepat jika kalian memilih flutter untuk membangun sebuah aplikasi. Karena secara default Flutter menggunakan Material Design.

Berikut ini daftar tutorial yang akan kita bahas:

• MaterialApp( )
• Scaffold
• Body
• Text

Sebelum kamu lanjutkan, pelajari terlebih dahulu tutorial sebelumnya:

Tutorial Flutter Part 1 : Apa itu Flutter?

Tutorial Flutter Part 2: Memahami Stateful dan Stateless Widget

Sebelumnya kita telah membahas tentang stateless dan state widget, kali ini kita akan membahas struktur widget pada Flutter. Berikut ini struktur aplikasi yang digunakan pada Flutter

Pada struktur widget di atas, bahwa setiap widget akan menggunakan MaterialApp di dalamnya meliputi home properti dapat diisi oleh widget Scaffold dan widget lainnya sebagai child. Kita akan bahas semuanya cara menggunakan widget Flutter.

MaterialApp( )

MaterialApp merupakan widget paling utama pada Flutter yang dapat kita akses menggunakan fungsi main(). MaterialApp memiliki properti bernama home yang akan menjadi defaukt route aplikasi.

void main() => MaterialApp(   
    home: Scaffold(),
);

Scaffold

Scaffold merupakan widget utama yang digunakan untuk membuat sebuah halaman pada flutter. Scaffold dapat disebut sebagai tempat semua widget lainnya seperti Appbar, Body, FloattingActionButton, dan lain lain.

Scaffold menyediakan kerangka kerja untuk implementasi dasar dari material design dari aplikasi Flutter. Di bawha ini merupakan constructor dan property yang dimiliki oleh scaffold.

//Constructor of Scaffold
const Scaffold({
  Key key,
  this.appBar,
  this.body,
  this.floatingActionButton,
  this.floatingActionButtonLocation,
  this.floatingActionButtonAnimator,
  this.persistentFooterButtons,
  this.drawer,
  this.endDrawer,
  this.bottomNavigationBar,
  this.bottomSheet,
  this.backgroundColor,
  this.resizeToAvoidBottomPadding = true,
  this.primary = true,
})

Pada struktur data di atas merupakan bagian dari scaffold yang dapat kita gunakan, kita juga dapat membagi menjadi tiga bagian utama.

1. Standalone widget
2. Single child widget
3. Multiple children widget

Standalone widget

Standalone widget adalah widget yang hanya digunakan oleh widget itu sendiri dan tidak mengandung wiget lainnya. Widget lainnya hanya digunakan untuk styling dan mengisi konten saja. Contoh Beberapa Standalone widget:

• AppBar
• ImageAsset
• Icon
• Text
• TextStyle

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter Scaffold'),
    ),

Single Child Widget

Single child widget adalah widget yang hanya memiliki satu widget saja. Widget ini memiliki properti bernama “child” digunakan untuk meemasukkan widget lainnya kedalam single child.

• Center
• Container
• Expanded
• CircleAvatar
• RaisedButton
• dll

Container(
  child: Text("Belajar Flutter"),
);

atau

...
    body: Center(
      child: Text("Text di tengah", 
                  style: TextStyle(
                            fontSize: 30.0, 
                            fontWeight: FontWeight.bold),
                            ),
        )
...

Multiple children widget

Sesuai dengan namanya, widget ini dapat memiliki lebih dari satu widget di dalamnya. Ketika kita membuat aplikasi kita akan membuat beberapa baris pada aplikasi yang kita buat, maka kita akan menggunakan Multiple children widget. Widget ini memiliki propertis yang sama yaitu childres widget.

• Row
• Column
• GridView
• Stack
• dll

  body: Column(
          children: <Widget>[
            Container(
              child: Text("Halo 1 !!!"),
              color: Colors.lime,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Halo 2 !!!"),
              color: Colors.purple,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Halo 3 !!!"),
              color: Colors.lightBlue,
              padding: EdgeInsets.all(16.0),
            ),
          ],
        )

Body

Body merupakan bagian utama dalam widget. dimana body merupakan struktur utama ketika kita menambhkan container atau row dalam aplikasi.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter Scaffold'),
    ),
    body: Center(
      child: Text("This is Homepage",
        style: TextStyle(
          color: Colors.black,
          fontSize: 40.0,
          fontStyle: FontStyle.italic,
        ),
      ),
    ),

Text

Text adalah sebuah teks yang di tampilkan dan dapat di rubah sesuai style yang diinginkan, hanya dengan menambahkan property style.

body: Center(
      child: Text("This is Homepage",
        style: TextStyle(
          color: Colors.black,
          fontSize: 40.0,
          fontStyle: FontStyle.italic,
        ),
      ),
    ),

Demikian tutorial yang dapat saya sampaikan, semoga bermanfaat.

Terimakasih.