Inspirational journeys

Follow the stories of academics and their research expeditions

Invisible Widget

HASBI ALMISKY

Wed, 03 Jun 2026

Invisible Widget Contoh Box Shadow
Halo sobatIna????, gimana kabarnya hari ini? Masih semangatkan belajarnya hari ini ????.
Kali ini kita akan membahas tentang widget invisible. Nahh apaan tuhh widget invisible? Jadi kemarin kan kita membahas widget text nah widget text itu masuk ke dalam widget visible, widget yang bisa kita lihat. Penasaran kan kalau begitu Gaskennnn!!

1. Column
    Yang pertama kita bahas yaitu widget column. Apa itu widget column? Widget Column digunakan untuk menyusun anak-anaknya dalam satu kolom tunggal, sehingga anak-anak tersebut akan diatur secara vertikal, satu di bawah yang lain. Bingungkah kalian? Contohnya seperti ini 


          
            Column(
              children: [
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.amber,
                ),
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.black,
                ),
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.blue,
                ),
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.brown,
                ),
              ],
            ),

Dan ini hasilnya
Jadi simplenya widget column akan menyusun widget lainnya dari atas ke bawah(Vertikal). Seperti yang kita lihat widget container berwarna amber berada di posisi atas, container hitam berada dibawahnya dan seterusnya. Minn aku tanya bisa gak kita ubah tata letaknya selain di pinggir? Jawabanya bisa tapi kita bahas yang dasarnya aja dulu ????. Lanjut ke widget Row











2. Row
    Selanjutnya adalah widget, nah kalau widget Column mengatur widget anak anak [Children] dari atas ke bawah, maka widget Row akan mengatur Children dari samping kiri ke samping kanan. Pahamkan? Contohnya seperti ini 

          
            Row(
              children: [
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.amber,
                ),
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.black,
                ),
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.blue,
                ),
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.brown,
                ),
              ],
            ),

Hasilnya seperti ini

Nahh beda kan hasilnya, kalau widget Column bentuknya Vertikal, maka widget Row bentuknya Horizontal. Minn aku nanya bisa gk kita costum tata letaknya?!!. Ya udahh sini mimin jelasin gimana cara custom tata letaknya. Skuyyy ????










MainAxisAlignment dan CrossAxisAlignment

Okk mari kita kenalan dulu sama mereka berdua, Apa sih fungsi mereka Minn?. 
Tentu, mari kita bahas kegunaan mainAxisAlignment dan crossAxisAlignment untuk Column dan Row dalam Flutter:

MainAxisAlignment:
Column:
  • mainAxisAlignment pada Column mengontrol posisi vertikal anak-anak di dalam kolom.
  • Misalnya, jika diatur ke MainAxisAlignment.start, anak-anak akan diatur di bagian atas kolom.
  • Jika diatur ke MainAxisAlignment.center, anak-anak akan diatur di tengah kolom.
  • Jika diatur ke MainAxisAlignment.end, anak-anak akan diatur di bagian bawah kolom.
  • MainAxisAlignment.spaceAround, MainAxisAlignment.spaceEvenly, dan MainAxisAlignment.spaceBetween memberikan kontrol tambahan terhadap ruang di antara anak-anak dalam kolom.
Row:
  • mainAxisAlignment pada Row mengontrol posisi horizontal anak-anak di dalam baris.
  • Misalnya, jika diatur ke MainAxisAlignment.start, anak-anak akan diatur di sisi kiri baris.
  • Jika diatur ke MainAxisAlignment.center, anak-anak akan diatur di tengah baris.
  • Jika diatur ke MainAxisAlignment.end, anak-anak akan diatur di sisi kanan baris.
  • Sama seperti pada Column, MainAxisAlignment.spaceAround, MainAxisAlignment.spaceEvenly, dan MainAxisAlignment.spaceBetween memberikan kontrol tambahan terhadap ruang di antara anak-anak dalam baris.
CrossAxisAlignment:
Column:
  • crossAxisAlignment pada Column mengontrol posisi horizontal anak-anak di dalam kolom.
  • Jika diatur ke CrossAxisAlignment.start, anak-anak akan diatur di sisi kiri kolom.
  • Jika diatur ke CrossAxisAlignment.center, anak-anak akan diatur di tengah kolom.
  • Jika diatur ke CrossAxisAlignment.end, anak-anak akan diatur di sisi kanan kolom.
  • CrossAxisAlignment.stretch akan membuat anak-anak memanjang untuk mengisi lebar maksimum kolom.
Row:
  • crossAxisAlignment pada Row mengontrol posisi vertikal anak-anak di dalam baris.
  • Jika diatur ke CrossAxisAlignment.start, anak-anak akan diatur di bagian atas baris.
  • Jika diatur ke CrossAxisAlignment.center, anak-anak akan diatur di tengah baris.
  • Jika diatur ke CrossAxisAlignment.end, anak-anak akan diatur di bagian bawah baris.
  • CrossAxisAlignment.stretch akan membuat anak-anak memanjang untuk mengisi tinggi maksimum baris.

Wahh banyak juga yaa aturan penggunaan MainAxisAlignment dan CrossAxisAlignment untuk Column dan Row, ini gk rumit kok. Tanpa basa basi aku kita Praktek!!!

MainAxisAlignment untuk Column
1. mainAxisAlignment: MainAxisAlignment.start

Column(
        mainAxisAlignment: MainAxisAlignment.start, 
              
                Row(
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Pertama-tama, kita punya empat buah Container (wadah) di dalam Column, masing-masing dengan tinggi yang tetap (100) dan lebar yang bervariasi. Warna setiap Container juga berbeda untuk membedakan visualnya. Kita bisa melihat efek dari pengaturan MainAxisAlignment.start pada posisi vertikal dari setiap Container.

Jadi, saat dijalankan, Container berwarna amber akan ditempatkan di bagian atas, diikuti oleh Container berwarna hitam, biru, dan coklat secara berurutan ke bawah. Inilah hasil dari MainAxisAlignment.start yang memposisikan anak-anak di bagian atas Column.






2.mainAxisAlignment: MainAxisAlignment.center

            
              Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.center adalah menempatkan anak-anaknya di bagian tengah kolom, menciptakan tata letak vertikal yang terpusat.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di tengah kolom secara vertikal, satu di bawah yang lain. Ini menciptakan tata letak yang terpusat pada bagian tengah antarmuka pengguna.






3. mainAxisAlignment: MainAxisAlignment.end

            
              Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.end adalah menempatkan anak-anaknya di bagian bawah kolom, menciptakan tata letak vertikal yang berpusat pada bagian bawah antarmuka pengguna.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di bagian bawah kolom secara vertikal, satu di bawah yang lain. Ini menciptakan tata letak yang berpusat pada bagian bawah antarmuka pengguna.






4.mainAxisAlignment: MainAxisAlignment.spaceAround

            
              Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya 
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.spaceAround adalah menempatkan anak-anaknya secara merata di sekitar ruang di sepanjang garis vertikal kolom.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan dengan ruang yang merata di antara mereka di sepanjang kolom. Ini menciptakan tata letak vertikal dengan jarak yang merata di antara setiap Container.







5. mainAxisAlignment: MainAxisAlignment.spaceBetween 

            
              Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.spaceBetween adalah menempatkan anak-anaknya secara merata di sepanjang garis vertikal kolom, dengan ruang di antara mereka diisi secara maksimal.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan dengan ruang yang merata di antara mereka di sepanjang kolom. Namun, perlu dicatat bahwa ruang di bagian atas dan bawah kolom tidak diisi. Ini menciptakan tata letak vertikal dengan jarak yang merata di antara setiap Container, serta memastikan bahwa ruang di atas dan di bawah terisi secara maksimal.



6. mainAxisAlignment: MainAxisAlignment.spaceEvenly 

            
              Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.spaceEvenly adalah menempatkan anak-anaknya secara merata di sepanjang garis vertikal kolom, dengan ruang yang merata di antara mereka.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan dengan ruang yang merata di antara mereka di sepanjang kolom. Pengaturan ini memastikan bahwa ruang di antara setiap Container memiliki jarak yang sama, menciptakan tata letak vertikal dengan penyebaran yang merata.






CrossAxisAlignment untuk Column
1. crossAxisAlignment: CrossAxisAlignment.start

              
                Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.start adalah menempatkan anak-anaknya di sisi kiri kolom, menciptakan tata letak horizontal yang dimulai dari sisi kiri.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di sisi kiri kolom secara horizontal, dengan bagian kanan kolom menjadi referensi penempatan. Ini menciptakan tata letak horizontal yang dimulai dari sisi kiri dengan setiap Container diletakkan di sepanjang sisi kiri kolom.






2.  crossAxisAlignment: CrossAxisAlignment.center 

              
                Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.center adalah menempatkan anak-anaknya di tengah kolom, menciptakan tata letak horizontal yang terpusat.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan di tengah kolom secara horizontal, dengan setiap Container diletakkan pada posisi horizontal yang sama. Ini menciptakan tata letak horizontal yang terpusat di tengah kolom.






3. crossAxisAlignment: CrossAxisAlignment.end

 
              
                Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.end adalah menempatkan anak-anaknya di sisi kanan kolom, menciptakan tata letak horizontal yang dimulai dari sisi kanan.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di sisi kanan kolom secara horizontal, dengan bagian kiri kolom menjadi referensi penempatan. Ini menciptakan tata letak horizontal yang dimulai dari sisi kanan dengan setiap Container diletakkan di sepanjang sisi kanan kolom.






4. crossAxisAlignment: CrossAxisAlignment.stretch 

              
                Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.stretch adalah membuat setiap anak di dalam Column memanjang untuk mengisi lebar maksimum kolom.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan memiliki tinggi tetap (100) tetapi lebar yang mengisi seluruh lebar kolom. Ini menciptakan tata letak horizontal di mana setiap Container memanjang untuk mengisi lebar maksimum kolom.






























Contoh Box Shadow
Halo sobatIna????, gimana kabarnya hari ini? Masih semangatkan belajarnya hari ini ????.
Kali ini kita akan membahas tentang widget invisible. Nahh apaan tuhh widget invisible? Jadi kemarin kan kita membahas widget text nah widget text itu masuk ke dalam widget visible, widget yang bisa kita lihat. Penasaran kan kalau begitu Gaskennnn!!

1. Column
    Yang pertama kita bahas yaitu widget column. Apa itu widget column? Widget Column digunakan untuk menyusun anak-anaknya dalam satu kolom tunggal, sehingga anak-anak tersebut akan diatur secara vertikal, satu di bawah yang lain. Bingungkah kalian? Contohnya seperti ini 


          
            Column(
              children: [
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.amber,
                ),
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.black,
                ),
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.blue,
                ),
                Container(
                  height: 100,
                  width: 200,
                  color: Colors.brown,
                ),
              ],
            ),

Dan ini hasilnya
Jadi simplenya widget column akan menyusun widget lainnya dari atas ke bawah(Vertikal). Seperti yang kita lihat widget container berwarna amber berada di posisi atas, container hitam berada dibawahnya dan seterusnya. Minn aku tanya bisa gak kita ubah tata letaknya selain di pinggir? Jawabanya bisa tapi kita bahas yang dasarnya aja dulu ????. Lanjut ke widget Row











2. Row
    Selanjutnya adalah widget, nah kalau widget Column mengatur widget anak anak [Children] dari atas ke bawah, maka widget Row akan mengatur Children dari samping kiri ke samping kanan. Pahamkan? Contohnya seperti ini 

          
            Row(
              children: [
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.amber,
                ),
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.black,
                ),
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.blue,
                ),
                Container(
                  height: 200,
                  width: 100,
                  color: Colors.brown,
                ),
              ],
            ),

Hasilnya seperti ini

Nahh beda kan hasilnya, kalau widget Column bentuknya Vertikal, maka widget Row bentuknya Horizontal. Minn aku nanya bisa gk kita costum tata letaknya?!!. Ya udahh sini mimin jelasin gimana cara custom tata letaknya. Skuyyy ????










MainAxisAlignment dan CrossAxisAlignment

Okk mari kita kenalan dulu sama mereka berdua, Apa sih fungsi mereka Minn?. 
Tentu, mari kita bahas kegunaan mainAxisAlignment dan crossAxisAlignment untuk Column dan Row dalam Flutter:

MainAxisAlignment:
Column:
  • mainAxisAlignment pada Column mengontrol posisi vertikal anak-anak di dalam kolom.
  • Misalnya, jika diatur ke MainAxisAlignment.start, anak-anak akan diatur di bagian atas kolom.
  • Jika diatur ke MainAxisAlignment.center, anak-anak akan diatur di tengah kolom.
  • Jika diatur ke MainAxisAlignment.end, anak-anak akan diatur di bagian bawah kolom.
  • MainAxisAlignment.spaceAround, MainAxisAlignment.spaceEvenly, dan MainAxisAlignment.spaceBetween memberikan kontrol tambahan terhadap ruang di antara anak-anak dalam kolom.
Row:
  • mainAxisAlignment pada Row mengontrol posisi horizontal anak-anak di dalam baris.
  • Misalnya, jika diatur ke MainAxisAlignment.start, anak-anak akan diatur di sisi kiri baris.
  • Jika diatur ke MainAxisAlignment.center, anak-anak akan diatur di tengah baris.
  • Jika diatur ke MainAxisAlignment.end, anak-anak akan diatur di sisi kanan baris.
  • Sama seperti pada Column, MainAxisAlignment.spaceAround, MainAxisAlignment.spaceEvenly, dan MainAxisAlignment.spaceBetween memberikan kontrol tambahan terhadap ruang di antara anak-anak dalam baris.
CrossAxisAlignment:
Column:
  • crossAxisAlignment pada Column mengontrol posisi horizontal anak-anak di dalam kolom.
  • Jika diatur ke CrossAxisAlignment.start, anak-anak akan diatur di sisi kiri kolom.
  • Jika diatur ke CrossAxisAlignment.center, anak-anak akan diatur di tengah kolom.
  • Jika diatur ke CrossAxisAlignment.end, anak-anak akan diatur di sisi kanan kolom.
  • CrossAxisAlignment.stretch akan membuat anak-anak memanjang untuk mengisi lebar maksimum kolom.
Row:
  • crossAxisAlignment pada Row mengontrol posisi vertikal anak-anak di dalam baris.
  • Jika diatur ke CrossAxisAlignment.start, anak-anak akan diatur di bagian atas baris.
  • Jika diatur ke CrossAxisAlignment.center, anak-anak akan diatur di tengah baris.
  • Jika diatur ke CrossAxisAlignment.end, anak-anak akan diatur di bagian bawah baris.
  • CrossAxisAlignment.stretch akan membuat anak-anak memanjang untuk mengisi tinggi maksimum baris.

Wahh banyak juga yaa aturan penggunaan MainAxisAlignment dan CrossAxisAlignment untuk Column dan Row, ini gk rumit kok. Tanpa basa basi aku kita Praktek!!!

MainAxisAlignment untuk Column
1. mainAxisAlignment: MainAxisAlignment.start

Column(
        mainAxisAlignment: MainAxisAlignment.start, 
              
                Row(
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Pertama-tama, kita punya empat buah Container (wadah) di dalam Column, masing-masing dengan tinggi yang tetap (100) dan lebar yang bervariasi. Warna setiap Container juga berbeda untuk membedakan visualnya. Kita bisa melihat efek dari pengaturan MainAxisAlignment.start pada posisi vertikal dari setiap Container.

Jadi, saat dijalankan, Container berwarna amber akan ditempatkan di bagian atas, diikuti oleh Container berwarna hitam, biru, dan coklat secara berurutan ke bawah. Inilah hasil dari MainAxisAlignment.start yang memposisikan anak-anak di bagian atas Column.






2.mainAxisAlignment: MainAxisAlignment.center

            
              Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.center adalah menempatkan anak-anaknya di bagian tengah kolom, menciptakan tata letak vertikal yang terpusat.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di tengah kolom secara vertikal, satu di bawah yang lain. Ini menciptakan tata letak yang terpusat pada bagian tengah antarmuka pengguna.






3. mainAxisAlignment: MainAxisAlignment.end

            
              Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.end adalah menempatkan anak-anaknya di bagian bawah kolom, menciptakan tata letak vertikal yang berpusat pada bagian bawah antarmuka pengguna.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di bagian bawah kolom secara vertikal, satu di bawah yang lain. Ini menciptakan tata letak yang berpusat pada bagian bawah antarmuka pengguna.






4.mainAxisAlignment: MainAxisAlignment.spaceAround

            
              Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya 
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.spaceAround adalah menempatkan anak-anaknya secara merata di sekitar ruang di sepanjang garis vertikal kolom.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan dengan ruang yang merata di antara mereka di sepanjang kolom. Ini menciptakan tata letak vertikal dengan jarak yang merata di antara setiap Container.







5. mainAxisAlignment: MainAxisAlignment.spaceBetween 

            
              Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.spaceBetween adalah menempatkan anak-anaknya secara merata di sepanjang garis vertikal kolom, dengan ruang di antara mereka diisi secara maksimal.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan dengan ruang yang merata di antara mereka di sepanjang kolom. Namun, perlu dicatat bahwa ruang di bagian atas dan bawah kolom tidak diisi. Ini menciptakan tata letak vertikal dengan jarak yang merata di antara setiap Container, serta memastikan bahwa ruang di atas dan di bawah terisi secara maksimal.



6. mainAxisAlignment: MainAxisAlignment.spaceEvenly 

            
              Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan MainAxisAlignment.spaceEvenly adalah menempatkan anak-anaknya secara merata di sepanjang garis vertikal kolom, dengan ruang yang merata di antara mereka.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan dengan ruang yang merata di antara mereka di sepanjang kolom. Pengaturan ini memastikan bahwa ruang di antara setiap Container memiliki jarak yang sama, menciptakan tata letak vertikal dengan penyebaran yang merata.






CrossAxisAlignment untuk Column
1. crossAxisAlignment: CrossAxisAlignment.start

              
                Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.start adalah menempatkan anak-anaknya di sisi kiri kolom, menciptakan tata letak horizontal yang dimulai dari sisi kiri.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di sisi kiri kolom secara horizontal, dengan bagian kanan kolom menjadi referensi penempatan. Ini menciptakan tata letak horizontal yang dimulai dari sisi kiri dengan setiap Container diletakkan di sepanjang sisi kiri kolom.






2.  crossAxisAlignment: CrossAxisAlignment.center 

              
                Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.center adalah menempatkan anak-anaknya di tengah kolom, menciptakan tata letak horizontal yang terpusat.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan ditempatkan di tengah kolom secara horizontal, dengan setiap Container diletakkan pada posisi horizontal yang sama. Ini menciptakan tata letak horizontal yang terpusat di tengah kolom.






3. crossAxisAlignment: CrossAxisAlignment.end

 
              
                Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.end adalah menempatkan anak-anaknya di sisi kanan kolom, menciptakan tata letak horizontal yang dimulai dari sisi kanan.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan berada di sisi kanan kolom secara horizontal, dengan bagian kiri kolom menjadi referensi penempatan. Ini menciptakan tata letak horizontal yang dimulai dari sisi kanan dengan setiap Container diletakkan di sepanjang sisi kanan kolom.






4. crossAxisAlignment: CrossAxisAlignment.stretch 

              
                Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.amber,
    ),
    Container(
      height: 100,
      width: 150,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 250,
      color: Colors.brown,
    ),
  ],
),

Dan ini hasilnya
Empat buah Container dengan tinggi tetap (100) dan lebar yang bervariasi, serta warna yang berbeda, ditempatkan di dalam Column. Efek dari pengaturan CrossAxisAlignment.stretch adalah membuat setiap anak di dalam Column memanjang untuk mengisi lebar maksimum kolom.

Jadi, ketika dijalankan, Container berwarna amber, hitam, biru, dan coklat akan memiliki tinggi tetap (100) tetapi lebar yang mengisi seluruh lebar kolom. Ini menciptakan tata letak horizontal di mana setiap Container memanjang untuk mengisi lebar maksimum kolom.






























0 Comments

Leave a comment

Kategori

Semua kategori

Recent posts

​3 Tahap Penting dalam Alur Pembuatan Prototype

Mon, 19 Jan 2026

​3 Tahap Penting dalam Alur Pembuatan Prototype
Design Thinking sebagai pendekatan Kreatif dalam Menyelesaikan Masalah

Mon, 19 Jan 2026

Design Thinking sebagai pendekatan Kreatif dalam Menyelesaikan Masalah
Design Thinking: Metode Pemecahan Masalah Berbasis Empati dan Inovasi

Mon, 19 Jan 2026

Design Thinking: Metode Pemecahan Masalah Berbasis Empati dan Inovasi
inatechno

AI & Technology Education Ecosystem

Inatechno membantu individu, profesional, sekolah, kampus, dan institusi membangun kapabilitas AI, data, software, cloud, dan teknologi digital melalui LMS, training, bootcamp, sertifikasi, dan program khusus organisasi.

AI & Technology Insight

Ecosystem

Focus Areas

Company

Support & Legal

© 2026 PT. Inatechno Berkah Khalifa. AI & Technology Education Ecosystem.