Flutter Expanded

Ketika membuat tampilan dalam baris atau kolom, penting untuk memperhatikan ukuran widget agar sesuai dengan ukuran layar. Namun, terkadang kita memberikan ukuran yang terlalu besar sehingga muncul peringatan dan widget keluar dari layar. Untuk mengatasi masalah ini, kita bisa menggunakan widget expanded untuk menempatkan widget di dalamnya agar hanya memanfaatkan ruang yang tersedia pada sumbu utama. Ketika kita memiliki beberapa widget, ruang yang tersedia akan dibagi secara proporsional. Perlu diingat bahwa widget yang diperluas hanya bisa mengandung stateful atau stateless widget, dan tidak bisa menggunakan jenis widget lain seperti RenderObjectWidgets.

Constructor dari Expanded

Expanded(
         {
          Key key, 
          int flex: 1,
          @required Widget child,
         }
)

Properti dari Class Expanded

child: Ini adalah widget yang ada di bawah class expanded.
Flex factor: Faktor fleksibilitas adalah rasio pembagian ruang yang tersedia antara widget untuk menempati sumbu utama. Jika faktor fleksibilitas bernilai nol atau NULL, child akan menentukan ukurannya sendiri.
Key: Kunci ini mengontrol cara satu widget digantikan oleh widget lain.
FlexFit: FlexFit menentukan seberapa fleksibel sebuah widget untuk mendapatkan ruang yang tersedia.

Contoh:

1. Pertama buat folder assets pada folder root project

2. Lalu tambahkan folder assets ke dalam assets di pubspec.yaml

3. Berikut ini adalah contoh ketika tidak menggunakan widget Expanded dan tidak memberikan size yang tepat pada suatu widget, kita menggunakan widget image di contoh ini

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'Nextgen Tutorial',
            style: TextStyle(
              color: Colors.blue,
            ),
          ),
          backgroundColor: Colors.white,
        ),
        body: const DicePage(),
      ),
    ),
  );
}

class DicePage extends StatefulWidget {
  const DicePage({Key? key}) : super(key: key);

  @override
  State createState() => _DicePageState();
}

class _DicePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            color: Colors.blue,
            padding: const EdgeInsets.all(14),
            child: Image.asset('assets/dadu1.png'),
          ),
        ], //
      ), //Row
    ); //center
  }
}

Output:

Kode di atas akan menghasilkan tampilan gambar yang memiliki error overflow, karena widget image tidak diberi size sehingga image tersebut memenuhi seluruh layar menyesuaikan dengan size bawaannya.

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,

        // App Bar digunakan untuk membuat bilah untuk memberikan judul untuk aplikasi kita.
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'Nextgen Tutorial',

            // TextStyle adalah class di mana kita dapat memodifikasi teks kita.
            style: TextStyle(
              //Untuk menetapkan warna pada teks kita.
              color: Colors.blue,
            ),
          ),

          // backgroundColor digunakan untuk mengubah warna latar belakang bilah aplikasi kita.
          backgroundColor: Colors.white,
        ),

        // Memanggil fungsi DicePage()
        body: const DicePage(),
      ),
    ),
  );
}

class DicePage extends StatefulWidget {
  const DicePage({Key? key}) : super(key: key);

  @override
  State createState() => _DicePageState();
}

class _DicePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      // Di sini kita menggunakan baris.
      // Sebagai gantinya kita juga bisa menggunakan kolom
      // hanya penyejajaran ikon yang akan berubah dan fungsi lainnya tetap sama
      child: Row(
        children: [
          Expanded(
            child: TextButton(
              child: Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(14),
                child: Image.asset('assets/dadu1.png'),
              ),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }
}

Setelah menambahkan widget Expanded output dari kode di atas akan menjadi seperti berikut.

Dengan menggunakan class Expanded, gambar kita telah sesuai dengan ruang yang tersedia.

Contoh:

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,

        // App Bar digunakan untuk membuat bilah untuk memberikan judul untuk aplikasi kita.
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'Nextgen Tutorial',

            // TextStyle adalah class di mana kita dapat memodifikasi teks kita.
            style: TextStyle(
              //Untuk menetapkan warna pada teks kita.
              color: Colors.blue,
            ),
          ),

          // backgroundColor digunakan untuk mengubah warna latar belakang bilah aplikasi kita.
          backgroundColor: Colors.white,
        ),

        // Memanggil fungsi DicePage()
        body: const DicePage(),
      ),
    ),
  );
}

class DicePage extends StatefulWidget {
  const DicePage({Key? key}) : super(key: key);

  @override
  State createState() => _DicePageState();
}

class _DicePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      // Di sini kita menggunakan baris.
      // Sebagai gantinya kita juga bisa menggunakan kolom
      // hanya penyejajaran ikon yang akan berubah dan fungsi lainnya tetap sama
      child: Row(
        children: [
          //Gambar 1
          Expanded(
            // Flex digunakan untuk mengalokasikan
            // ruang yang tersedia dalam rasio
            // antara satu elemen anak dengan elemen anak lainnya
            // Nilainya dapat berupa aangka berapa saja.
            flex: 2,

            child: TextButton(
              child: Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(14),
                child: Image.asset('assets/dadu1.png'),
              ),
              onPressed: () {},
            ),
          ),

          //Gambar 2
          Expanded(
            child: TextButton(
              child: Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(14),
                child: Image.asset('assets/dadu2.png'),
              ),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Class Icon Di Flutter
Tutorial setelahnya : Flutter Dialog
Semua Tutorial Flutter : Tutorial Flutter

Constructor dari Expanded

Properti dari Class Expanded

Tinggalkan Balasan