Tutorial Flutter Belajar Flexible Widget Mudah dan Penjelasannya

Flutter Flexible Widget Tutorial

Codingtive.com - Flexible merupakan widget yang digunakan untuk membuat tampilan yang mudah diatur dan bersifat fleksibel. Untuk membuat suatu widget dengan ukuran perbandingan tertentu menggunakan flexible widget akan sangat membantu. Untuk menggunakan flexible widget harus berada didalam Row, Column, atau Flex.

Pada tutorial ini, selain kamu belajar menggunakan flexible widget,  kamu  juga belajar menggunakan widget row dan column.

Untuk memudahkan kamu supaya lebih mengerti cara menggunakan flexible widget pada flutter, mari kita coba membuat aplikasi dengan tampilan yang mengimplementasikan penggunaan flexible widget. Berikut gambaran tampilan sederhana yang akan kita buat :

Flutter flexible widget example

Untuk perbanginnya seperti pada gambar diatas, ikuti langkah-langkah berikut untuk mulai membuatnya :

1. Buat project flutter

Pertama, buat project baru dengan nama misalnya "learn_flexible_widget". Ketika membuat project baru pastikan terkoneksi dengan internet dan tunggu sampai proses sinkronisasi project selesai.

2. Buat layout 

Buka file main.dart pada folder lib, hapus semua kodenya dan pertama tambahkan kode untuk import library material :

import 'package:flutter/material.dart';

Buat fungsi main() untuk menjalankan class yang ditampilkan pertama kali, tambahkan kode berikut dibawah import :

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flexible Widget',
    home: MyApp(),
  ));
}

Selanjutnya kita akan membuat class MyApp sebagai StatelessWidget, tambahkan kode berikut setelah fungsi main() : 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: <Widget>[
            // flexible widget disini
          ],
        ),
    );
  }
  // fungsi _buildFlexible() akan ditambah disini
}

Supaya penggunaan kode untuk membuat flexible layout tidak berulang-ulang, buat fungsi baru untuk menampilkan flexible widget. Tambahkan kode berikut pada bagian yang saya komentar untuk fungsi _buildFlexible() :

Widget _buildFlexible(int flex, Color backgroundColor, String text) {
  return Flexible(
    flex: flex,
    child: Container(
      color: backgroundColor,
      child: Center(
        child: Text(
          text,
          style: TextStyle(
            color: Colors.white,
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  );
}

Kita telah membuat fungsi untuk menampilkan flexible widget yang membutuhkan parameter jumlah flex, warna background, dan text.

Sekarang menerapkan flexible widget untuk membuat tampilan menjadi 3 baris utama. Tambahkan kode berikut didalam children dari Column, sehingga kodenya menjadi seperti berikut :

body: Column(
  children: <Widget>[
    // baris 1
    Flexible(
      flex: 1,
      child: Row(
        children: <Widget>[
          _buildFlexible(1, Colors.blue, "1"),
          _buildFlexible(1, Colors.blueGrey, "1"),
          _buildFlexible(1, Colors.cyan, "1"),
          _buildFlexible(1, Colors.green, "1"),
        ],
      ),
    ),
    // baris 2
    _buildFlexible(4, Colors.lightGreen, "4"),
    // baris 3
    Flexible(
      flex: 2,
      child: Row(
        children: <Widget>[
          _buildFlexible(1, Colors.orangeAccent, "2"),
          Flexible(
            flex: 1,
            child: Column(
              children: <Widget>[
                _buildFlexible(1, Colors.redAccent, "1"),
                _buildFlexible(1, Colors.deepPurpleAccent, "1"),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
),

3. Kode lengkap

Sehingga seluruh kodenya menjadi seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flexible Widget',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: <Widget>[
            // baris 1
            Flexible(
              flex: 1,
              child: Row(
                children: <Widget>[
                  _buildFlexible(1, Colors.blue, "1"),
                  _buildFlexible(1, Colors.blueGrey, "1"),
                  _buildFlexible(1, Colors.cyan, "1"),
                  _buildFlexible(1, Colors.green, "1"),
                ],
              ),
            ),
            // baris 2
            _buildFlexible(4, Colors.lightGreen, "4"),
            // baris 3
            Flexible(
              flex: 2,
              child: Row(
                children: <Widget>[
                  _buildFlexible(1, Colors.orangeAccent, "2"),
                  Flexible(
                    flex: 1,
                    child: Column(
                      children: <Widget>[
                        _buildFlexible(1, Colors.redAccent, "1"),
                        _buildFlexible(1, Colors.deepPurpleAccent, "1"),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildFlexible(int flex, Color backgroundColor, String text) {
    return Flexible(
      flex: flex,
      child: Container(
        color: backgroundColor,
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

Sekarang coba jalankan dengan emulator atau hp, hasilnya seperti berikut :

Tutorial flutter flexible widget mudah dan penjelasannya

Demikian tutorial flutter mengenai cara menggunakan flexible widget dengan mudah, tutorial ini sangat cocok untuk pemula. Selain itu, ingin tahu cara membuat warna background memiliki efek gradient ? Ikuti tutorial flutter cara membuat background efek gradient lengkap dan mudah.

Jangan lupa subscribe website codingtive untuk mendapatkan artikel dan tutorial menarik lainnya, terima kasih ya sudah berkunjung.

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: