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

Flutter #5 – Column Widget

2 min read

Flutter 4 Column Widget

Ilmucoding.com – Pada kesempatan kali ini kami akan sharing terkait penerapan Column Widget di Flutter. Buat Anda yang ingin tahu lebih detail tentang Column Widget, silahkan baca artikel ini sampai selesai.

Apa itu Column Widget?

Column Widget digunakan untuk menampilkan direction secara vertical atau mulai dari atas sampai ke bawah. Children widget-widget yang memiliki parent Column secara default akan ditampilkan secara vertical.

Constructor Column Widget

Ada beberapa constructor di dalam Column Widget, yaitu:

1. mainAxixAlignment, berfungsi untuk mengontrol children widget yang ada di dalamnya dalam bentuk vertical. Di dalam mainAxixAlignment Anda bisa menggunakan start, end, center, spaceBetween, spaceEvenly, dan spaceArround.

Konsep mainAxixAlignment bisa Anda lihat melalui gambar ini:

Tutorial-Flutter-4-Column-Widget-MainAxixAlignment-2

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:

Tutorial-Flutter-4-Column-Widget-MainAxixAlignment.

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.

#3. crossAxixAlignment, digunakan untuk mengontrol children yang ada di dalamnya dalam bentuk horizontal. Sama halnya dengan mainAxixAlignment, crossAxixAlignment juga memiliki value start, end, center, spaceBetween, spaceEvenly, dan spaceArround.

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:

Cross Axix ALignment - Column Widget Flutter

#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: Column(
         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,
           ),
         ],
       ),
       ),
     );
   }
 }

Kesimpulan

Column merupakan salah satu widget di Flutter yang sering kali digunakan. Penggunaan Column Widget cukup mudah karena dokumentasi penggunaannya sangat lengkap. Namun Anda perlu mencobanya secara langsung agar kemampuan Anda semakin terasah.

Semoga artikel ini dapat membantu Anda memahami Flutter dengan baik. 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.