Widgets

Everything is a widget

Di Flutter semuanya adalah widget. Saat kita membuat sebuah aplikasi menggunakan Flutter, kita akan menggunakan berbagai macam widget yang telah tersedia yang memiliki berbagai macam fungsi. Dalam sebuah aplikasi Flutter, widget-widget akan berada di dalam widget lainnya (nested).

Sebagai contoh gambar dibawah terdiri dari widget utama yang berwarna kuning. Didalam widget tersebut terdapat widget App Bar, Header Image, dan List. Di dalam widget List terdapat widget List Item 1 - 3.

Tree structure

Setiap aplikasi Flutter akan terdiri dari berbagai macam widget dan membentuk suatu struktur seperti pohon. Sebagai contoh aplikasi dibawah ini terdiri dari beberapa widget seperti AppBar, Text, Page (Scaffold) dan Floating Action Button. Widget-widget tersebut membentuk sebuah struktur pohon.

Widget types

Terdapat 2 tipe widget di Flutter:

• Visible Widgets (Input and Output)
• Invisible Widgets (Layout and Control)

Visible widget merupakan widget yang dapat dilihat secara langsung. Widget ini digunakan untuk menampilkan informasi maupun menerima input. Cotohnya adalah Text, Button, Image, Icon, dll.

Invisible widget merupakan widget yang tidak dapat dilihat yang berfungsi untuk mengatur ukuran, format dan tata letak visible widget. Contohnya adalah Scaffold, Row, Column, Padding, dll.

Scaffold

Scaffold adalah widget dasar untuk membuat sebuah halaman pada Flutter. Scaffold digunakan untuk mengimplementasikan struktur dasar tata letak aplikasi seperti AppBar, Drawer, FloatingActionButton, dan widget-widget lainnya. Dengan Scaffold, kita dapat dengan mudah mengimplementasikan komponen-komponen dasar untuk membuat sebuah aplikasi dengan hanya menggunakan kode yang minimal. Selain itu Scaffold juga membuat tampilan aplikasi kita lebih indah karena Scaffold menerapkan Material desain.

Properti dari konstruktor Scaffold digunakan untuk mengatur tampilan utama suatu halaman. Berikut ini adalah konstruktor dari kelas Scaffold.

Beberapa properti yang umum digunakan adalah:

appBar

AppBar adalah sebuah balok yang melintang secara horisontal di bagian atas layar. AppBar merupakan salah satu komponen penting di aplikasi, tanpanya aplikasi akan terasa ada yang kurang.

Scaffold(
  appBar: AppBar( 
      title:Text("AppBar"), //title aof appbar
      backgroundColor: Colors.redAccent, //background color of appbar
  ),
)

backgroundColor

Digunakan untuk mengganti warna latar belakang dari Scaffold.

Scaffold(
    backgroundColor: Colors.blue, //set background color of scaffold to blue
)

body

Merupakan properti utama untuk antar muka. Kita dapat menambahkan widget-widget ke dalam body agar tampil di layar.

Scaffold(
  body: Center( //content body on scaffold
       child: Text("Text Widget")
  )
)

floatingActionButton

Sebuah tombol mengambang yang digunakan untuk aksi cepat.

Scaffold(
    floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
        onPressed: (){
            //code to execute on button press
        },
        child: Icon(Icons.send), //icon inside button
    )
)

floatingActionButtonLocation

Properti ini digunakan untuk mengatur letak Floating Button

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)

drawer

Merupakan panel navigasi tempat kita meletakkan berbagai menu untuk bernavigasi. Saat kita menambahkan drawer ke Scaffold, maka akan muncul sebuah ikon di AppBar.

Scaffold(
  drawer: Drawer( //drawer navigation on scaffold
    child: SafeArea(
     child:Column( //column widget
      children: [
          ListTile(
            leading: Icon(Icons.home),
            title: Text("Home Page"),
            subtitle: Text("Subtitle menu 1"),
          ),
          ListTile(
            leading: Icon(Icons.search),
            title: Text("Search Page"),
            subtitle: Text("Subtitle menu 1"),
          ),

          //put more menu items here
      ],
    ),
   ),
  ),
)

bottomNavigationBar

Komponen ini seperti AppBar hanya saja posisinya di bagian bawah layar.

Scaffold(
  bottomNavigationBar: BottomNavigationBar( //bottom navigation bar on scaffold
    items: [ //items inside navigation bar
        BottomNavigationBarItem(
          icon: Icon(Icons.add),
          label: "Button 1",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: "Button 2",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.camera),
          label: "Button 3",
        ),

        //put more items here
    ],
  ),
)

Full Code

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("AppBar"), //title aof appbar
        backgroundColor: Colors.blue, //background color of appbar
      ),
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Text('Text Widget'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.send),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      drawer: Drawer(
        child: SafeArea(
          child: Column(
            children: [
              ListTile(
                leading: Icon(Icons.home),
                title: Text("Home Page"),
                subtitle: Text("Subtitle menu 1"),
              ),
              ListTile(
                leading: Icon(Icons.search),
                title: Text("Search Page"),
                subtitle: Text("Subtitle menu 1"),
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: "Button 1",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Button 2",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: "Button 3",
          ),
        ],
      ),
    );
  }
}

Practice

Buat aplikasi Flutter dengan antar muka seperti dibawah ini. Ubah teks di AppBar dengan NIM anda dan teks di body dengan nama anda.