Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Flutter #7 – Mengenal Expanded Widget

4 min read

Tutorial Flutter

Halo penggemar Flutter, kali ini saya akan sharing tentang mengenal apa itu expanded widget di Flutter.

Mungkin kita sering menggunakan widget ini, tapi belum tentu memahami sepenuhnya, kan? Ibarat kata pepatah, tak kenal maka “kenalan”.

Jika membutuhkan pemahaman tentang apa itu expanded widget, maka artikel ini cocok untuk Anda baca.

Apa Itu Expanded Widget?

Expanded Widget merupakan salah satu widget di Flutter yang berfungsi untuk memperluas children dari Row, Column atau Flex. Setiap ketiganya disisipi dengan Expanded, maka ukurannya akan mengisi ruang yang tersedia.

Contohnya Anda memiliki ukuran lebar width widget container 100, lalu setelahnya menggunakan expanded, maka widget expanded ini akan mengisi ruang kosong yang tersedia setelah dikurangi oleh width 100 tersebut.

Biar lebih jelasnya Anda bisa melihat contoh-contoh yang sudah saya siapkan, yaitu:

  • Expanded Column Widget
  • Expanded Row Widget

Penerapan Expanded Widget Pada Column

Mari kita praktik membuat contoh penerapan Expanded Widget pada Column. Dengan contoh Column Widget, artinya akan membuat Expanded secara vertical.

Perhatikan gambar berikut:

Tutorial Flutter #7 - Mengenal Expanded Widget

Dari gambar di atas, menandakan bahkan Column bersifat membentang ke bawah. Sedangkan background yellow merupakan contoh penerapan expanded widget pada Column.

Pada contoh kode di bawah ini, saya tidak memberikan height pada Container Widget. Saya menggunakan Expanded Widget. Jadi, ukuran heightnya menyesuaikan ukuran layar.

Berikut kodenya:

import 'package:flutter/material.dart';

class ExpandedColumnExample extends StatelessWidget {

  @override
  Widget build(BuildContext context){

    return Scaffold(
      // header
      appBar: AppBar(
        title: Text("Expanded Column Example"),
      ),
      //body
      body:Column(
          children: <Widget>[
            Container( 
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Expanded( 
              child: Container(
                color: Colors.yellow,
                width: 100,
              ),
            ),
            Container( 
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],

        ),
    );

  }

} 

Coba perhatikan kode pada bagian:

Expanded( 
   child: Container(
    color: Colors.yellow,
    width: 100,
   ),
), 

Saya tidak menggunakan height, namun ukurannya (warna kuning) menyesuaikan layar. Itu artinya dengan menggunakan expanded pada Column Widget Anda bisa memanjangkan ukuran heightnya.

Right?

Penerapan Expanded Widget Pada Row

Sekarang kita akan coba praktik membuat contoh penerapan Expanded Widget pada Row. Dengan contoh Row Widget, artinya akan membuat Expanded secara horizontal.

Perhatikan gambar berikut:

Tutorial Flutter #7 - Mengenal Expanded Widget

Setelah meresapi gambar di atas, menandakan bahwa Row membentang ke samping. Sedangkan background yellow merupakan contoh penerapan expanded widget pada Row.

Pada contoh kode di bawah ini, saya tidak memberikan width pada Container Widget. Saya menggunakan Expanded Widget. Jadi, ukuran widthnya menyesuaikan ukuran layar.

Simak kode berikut ini:

import 'package:flutter/material.dart';

class ExpandedRowExample extends StatelessWidget {

  @override
  Widget build(BuildContext context){

    return Scaffold(
      // header
      appBar: AppBar(
        title: Text("Expanded Row Example"),
      ),
      //body
      body:Row(
          children: <Widget>[
            Container( 
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Expanded( 
              child: Container(
                color: Colors.yellow,
                height: 100,
              ),
            ),
            Container( 
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],

        ),
    );

  }

} 

Coba perhatikan pada bagian kode:

Expanded( 
   child: Container(
    color: Colors.yellow,
    height: 100,
   ),
),  

Expanded Widget pada Row tidak memerlukan width. Ukuran width dapat menyesuaikan ukuran layar tanpa harus ditetapkan ukurannya. Dengan begitu seolah-olah Widget ini responsive dengan berbagai macam ukuran layar.

Saya merasa ini cocok saat membuat slide, banner dan lain-lain.

Kapan Harus Menggunakan Expanded Column Widget?

Expanded Column Widget sebaiknya digunakan apabila kita ingin memperluas wilayah widget secara vertical atau membentang ke bawah.

Kapan Harus Menggunakan Expanded Row Widget?

Expanded Row Widget sebaiknya digunakan apabila kita ingin memperluas wilayah secara horizontal atau ke samping.

Penutup

Demikianlah tutorial salah satu fitur terbaik Flutter yaitu tentang mengenal dan memahami expanded widget. Semoga artikel ini bermanfaat. Aamiin.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.