Otomatisasi Pengiriman Pesan WhatsApp Massal dengan Python
Tue, 29 Apr 2025
Inspirational journeys
Follow the stories of academics and their research expeditions
Invisible Widget
Halo sobatIna????, gimana kabarnya hari ini? Masih semangatkan belajarnya
hari ini ????.
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
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 ????
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
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
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.
Halo sobatIna????, gimana kabarnya hari ini? Masih semangatkan belajarnya
hari ini ????.
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
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 ????
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
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
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.
Leave a comment