Halo sahabat selamat datang di website tentangsocialengineertoolkit.xyz, pada kesempatan hari ini kita akan membahas seputar Tutorial Flutter #7 â€" Memahami dan Mengenal Expanded Widget oleh - tentangsocialengineertoolkit.xyz, kami sudah mempersiapkan artikel tersebut dengan informatif dan akurat, silahkan membaca

Memahami dan mengenal Fitur Expanded Widget di Flutter. Expanded Widget merupakan sebuah widget yang memperluas anak dari Row, Column atau flex sehingga mengisi ruang yang tersedia.

Dengan menggunakan expanded widget, membuat children dari Row, Column dan flex meluas untuk mengisi ruang yang tersedia di sepanjang sumbu utama semisal horizontal maupun vertical.

Jika beberapa anak diperluas, ruang yang tersedia dibagi antara factor flex.

Expanded widget merupakan turunan dari Row, Column atau Flex dan hanya mendukung pada StatelessWidget dan StatefulWidget.

Agar lebih memahami tutorial kali ini saya akan memberikan dua contoh, yaitu:

  1. Expanded Column Widget
  2. Expanded Row Widget

Let’s go!

Expanded Column Widget

Kali ini kita akan mencoba membuat Expanded Widget dengan Column Widget. Jika membahas Column, artinya akan membuat Expanded secara vertical. Berikut kodenya:

import 'package:flutter/material.dart';    class ExpandedColumnExample extends StatelessWidget {    @override    Widget build(BuildContext context) {      return Scaffold(        appBar: AppBar(          title: Text('Expanded Column Sample'),        ),        body: Center(          child: Column(            children: [              Container(                color: Colors.blue,                height: 100,                width: 100,              ),              Expanded(                child: Container(                  color: Colors.amber,                  width: 100,                ),              ),              Container(                color: Colors.blue,                height: 100,                width: 100,              ),            ],          ),        ),      );    }  }

Hasilnya:

Memahami dan Mengenal Expanded Widget

Expanded Row Widget

Kebalikan dari Column, Row akan memperluas secara horizontal. Berikut contoh kode dan hasilnya:

Kode:

import 'package:flutter/material.dart';    class ExpandedRowExample extends StatelessWidget {    @override    Widget build(BuildContext context) {      return Scaffold(        appBar: AppBar(          title: Text('Expanded Row Sample'),        ),        body: Center(          child: Row(            children: [              Container(                color: Colors.blue,                height: 100,                width: 100,              ),              Expanded(                child: Container(                  color: Colors.amber,                  height: 100,                ),              ),              Container(                color: Colors.blue,                height: 100,                width: 100,              ),            ],          ),        ),      );    }  } 

Hasil:

Memahami dan Mengenal Expanded Widget

Kapan Harus Menggunakan Expanded Column Widget?

Expanded Column sebaiknya digunakan apabila kita ingin memperluas wilayah widget secara vertical.

Kapan Harus Menggunakan Expanded Row Widget?

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

Penutup Mengenal dan Memahami Expanded Widget

Demikianlah tutorial salah satu fitur terbaik Flutter yaitu tentang expanded widget kali ini.

Semoga artikel ini bermanfaat.

Aamiin.

Itulah tadi informasi dari agen poker mengenai Tutorial Flutter #7 â€" Memahami dan Mengenal Expanded Widget oleh - tentangsocialengineertoolkit.xyz dan sekianlah artikel dari kami tentangsocialengineertoolkit.xyz, sampai jumpa di postingan berikutnya. selamat membaca.

Post a Comment

 
Top