Tutorial Flutter untuk Pemula: Belajar Widget pada Flutter

Pada tutorial sebelumnya, kita sudah mengenal struktur direktori dan struktur kode program Flutter.

Berikutnya, kita akan belajar menggunakan Widget.

Aplikasi Flutter sebenarnya terbuat dari kumpulan widget. Konsep widget ini terinspirasi dari React.

Pada kesempatan ini kita akan belajar menggunakan beberapa widget dasar, seperti:

  • Text() untuk membuat teks;
  • Image() untuk menampilkan gambar;
  • Widget Layout seperti Center(), Column(), dan Row().

Mari kita mulai…

1. Membuat Project Baru

Buatlah project baru dengan nama first_app. Saya akan membuatnya dengan Android Studio.

Jika kamu menggunakan VS Code, silahkan cek caranya di: Cara menggunakan VS Code untuk coding Flutter.

Kelik menu File->New Flutter Project…

File New Project

Kemudian tentukan jenis project yang akan dibuat. Kita akan membuat project Flutter Application.

Pilih jenis project

Berikutnya tentukan nama aplikasi dan lokasi flutter SDK-nya.

Nama aplikasi dan lokasi Flutter SDK

Berikutnya tentukan nama package untuk aplikasinya.

Nama package untuk aplikasi

Selesai…

2. Membuat StateLessWidget

StatelessWidget adalah class widget yang propertinya immutable, artinya nilainya tidak bisa diubah.

Cara membuat StatelessWidget adalah dengan membuat class turunan (extends) dari class StatelessWidget.

Contoh:

class MyApp extends StatelessWidget { }

Mari kita coba di dalam aplikasi.

Silahkan buka file lib/main.dart kemudian hapus semua isinya dan ganti dengan kode ini:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Setelah itu, coba jalankan aplikasi di emulator.

Maka hasilnya:

Aplikasi hello world Flutter

Penjelasan kode program di atas:

Kode aplikasi Widget

Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget MaterialApp(). Kemudian di dalam MateralApp() berisi widget lagi: Scaffold, AppBar, Center, dan Text.

Sehingga strukturnya akan terlihat seperti ini:

Struktur widget

Ini adalah widget dasar…

Penjelasan:

  • MyApp adalah StatelessWidget, merupakan widget induk;
  • MaterialApp adalah widget yang membungkus beberapa widget yang menggunakan tema material design 1;
  • Scaffold adalah widget untuk struktur dasar material design;
  • AppBar adalah widget untuk membuat AppBar;
  • Center adalah Widget layout untuk membuat widget ke tengah;
  • Text adalah wdiget untuk membuat teks.

3. Mengubah Warna dan Teks

Oke, karena kita sudah tahu fungsi masing-masing widget…

…sekarang mari kita coba mengubah warna dan teksnya.

Sehingga kode aplikasnya menjadi seperti ini:

Kode warna dan teks

Hasilnya:

Aplikasi Flutter di Emulator

3. Menggunakan Widget Layout

Pada contoh sebelumnya, kita menggunakan widget layout Center() untuk membuat widget di dalamnya berada di posisi tengah-tengah.

Sekarang kita coba menggunakan widgetColumn() untuk membuat layout.

Ubahlah kode lib/main.dart menjadi seperti ini:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Aplikasi Flutter Petanikode'),
            backgroundColor: Colors.deepOrange,
          ),
          body:  Column(
              children: <Widget>[
                Image.network('https://www.petanikode.com/img/flutter/flutter.png'),
                Text(
                  'Belajar Flutter untuk Pemula',
                  style: TextStyle(fontSize: 24, fontFamily: "Serif", height: 2.0),
                ),
                Text('oleh Petani Kode')
            ]
          )

      ),
    );
  }
}

Widget Column() merupakan widget layout yang dapat berisi beberapa layout.

Widget yang berada di dalam widget Column() akan ditata dalam satu kolom. Sehingga akan berjejer ke bawah.

Hasilnya akan seperti ini:

Layout Colum di Flutter

Widget Image() dan Text() ditata dalam satu kolom.

Selain widget Column() ada juga widget Row() yang fungsinya menata widget di dalamnya dalam satu baris ke samping.

Contoh:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Aplikasi Flutter Petanikode'),
            backgroundColor: Colors.deepOrange,
          ),
          body:  Column(
              children: <Widget>[
                Image.network('https://www.petanikode.com/img/flutter/flutter.png'),
                Text(
                  'Belajar Flutter untuk Pemula',
                  style: TextStyle(fontSize: 24, fontFamily: "Serif", height: 2.0),
                ),
                Text('oleh Petani Kode'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Image.network('https://www.petanikode.com/img/flutter/flutter-sqr.png'),
                    Image.network('https://www.petanikode.com/img/flutter/flutter-sqr.png')
                  ],
                )
            ]
          )
      ),
    );
  }
}

Hasilnya:

Layout Row

Widget Column() dan Row() adalah widget Layout yang fungsinya untuk menanta widget lainnya.

Ini adalah perbedaan widget Column() dengan Row().

Perbedaan widget Column dan Row

Apa Selanjutnya?

Kita sudah belajar menggunakan beberapa widget dasar. Tentu saja ini belum cukup.

Masih banyak widget yang belum kita coba. Daftar widget Flutter dapat kamu lihat di Widget Catalog.