Rumahcoding.co.id – Pembahasan kali ini menyangkut salah satu Widget terbaik milik Flutter, yaitu Column Widget. Pengembangan aplikasi mobile dengan Flutter tidak terlepas dari widget-widget, maka dari itu penting buat siapa saja mempelajari Column Widget ini sebelum mengembangkan aplikasi Mobile dengan Flutter.
Apa itu Column Widget?
Column digunakan untuk menampilkan widget-widget secara vertical (dari atas ke bawah). Column merupakan salah satu widget yang sering digunakan programmer karena sebagian besar aplikasi membutuhkan direction vertical semisal untuk scroliing dan lain-lain
Constructor Column Widget
#1. mainAxixAlignment, berfungsi untuk mengontrol children widget yang ada di dalamnya dalam bentuk vertical.
Konsep mainAxixAlignment bisa Anda lihat melalui gambar ini:
Sedangkan cara untuk menggunakan mainAxixAlignment cukup mudah, contohnya:
Column(mainAxixAlignment: MainAxixAlignment.start), Column(mainAxixAlignment: MainAxixAlignment.center), Column(mainAxixAlignment: MainAxixAlignment.end), Column(mainAxixAlignment: MainAxixAlignment.spaceAround), Column(mainAxixAlignment: MainAxixAlignment.spaceBetween), Column(mainAxixAlignment: MainAxixAlignment.Evenly),
Penggunaan Column Widget
Perhatikan gabar di bawah ini:
Penjelasan:
- Start digunakan jika Anda ingin menempatkan widget berada di sebelah kiri (left)
- Center digunakan jika Anda ingin menempatkan widget berada di sebelah tengah (center)
- End digunakan jika Anda ingin menempatkan widget berada di sebelah kanan (right)
- spaceAround digunakan jika Anda ingin membuat ruang di antara children widget yang sama..
- spaceBetween digunakan untuk membuat space di antara children widget yang sama.
- spaceEvenly digunakan untuk membuat ruang yang sama dengan para children widget.
Baca Juga: Perbedaan Stateless dan Statefull Widget
#2. crossAxixAlignment, digunakan untuk mengontrol children yang ada di dalamnya dalam bentuk horizontal.
Contoh:
Column(crossAxixAlignment: CrossAxixAlignment.start), Column(crossAxixAlignment: CrossAxixAlignment.center), Column(crossAxixAlignment: CrossAxixAlignment.end), Column(crossAxixAlignment: CrossAxixAlignment.spaceAround), Column(crossAxixAlignment: CrossAxixAlignment.spaceBetween), Column(crossAxixAlignment: CrossAxixAlignment.Evenly),
Penggunaan CrossAxixAlignment
Perhatikan gambar di bawah ini:
#3. mainAxixSize, parameter ini dapat memberikan ruang pada Column, namun ruang yang digunakan merupakan ruang maksimal yang dapat Anda tentukan. Misalnya:
Column(mainAxixSize: MainAxixSize.max)
#4. textDirection. Parameter ini mirip dengan verticalDirection, tetapi sedikit berbeda di antara mereka. TextDirection digunakan dalam arah horizontal, tetapi verticalDirection digunakan dalam arah vertikal. Mereka berdua mengontrol arah awal gambar children widget.
Ada dua parament yang bisa digunakan, yaitu: ltr dan rtl. Lrt berarti mengalirkan text dari kiri ke kanan, sebaliknya.
Contoh:
Column(textDirection: TextDirection.ltr), Column(textDirection: TextDirection.rtl),
#5. textBaseline, ada dua parameter di textBaseline yaitu alphabetic, merupakan garis horizontal yang digunakan untuk menyelaraskan bagian bawah dalam bentuk alfhabet. Sedangkan yang kedua yaitu ideografik, yaitu garis horizontal yang digunakan untuk menyelaraskan bagian bawah widget dalam bentuk ideografik.
Contoh:
Column(textBaseline: TextBaseline.ideografik), Column(textBaseline: TextBaseline.alphabetic),
#6. Children, berfungsi untuk memberikan ruang kepada widget-widget yang digunakan di dalam suatu column. Misalnya di dalam column tersebut kita bisa panggil widget Text, Input dll.
Contoh:
children: <Widget>[ Container( height: 100, width: 100, color: Colors.blue, ), Container( height: 100, width: 100, color: Colors.yellow, ), Container( height: 100, width: 100, color: Colors.red, ), ], ),
Contoh Program Menggunakan Column Widget
import 'package:flutter/material.dart';
class ColumnExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Column Example'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
width: 100,
color: Colors.blue,
),
Container(
height: 100,
width: 100,
color: Colors.yellow,
),
Container(
height: 100,
width: 100,
color: Colors.red,
),
],
),
),
);
}
}
Hasilnya:
Demikianlah artikel mengenai Column WIdget ini. Semoga artikel ini dapat membantu Anda memahami Flutter dengan baik. Aamiin.
