Flutter dasar - Container Widget

     Dalam sebuah widget pada flutter, ada yang namanya container widget yang digunakan untuk mengatur tata letak pada tumpukan objek dalam sebuah container. Properti container memiliki 3 properti pembungkus flutter yang digunakan untuk container, yaitu Column, Row dan Stack. selain itu, Untuk properti Column dan Row mempunyai tiga value masing-masing yaitu start, center, dan end yang digunakan untuk mengatur posisi perataan objek container pada mainAxistAlignment dan crossAxistAlignment.

    Jika kita menggunakan properti Row, maka akan secara default setiap objek yang kita tambahkan akan semakin ke bawah, hal ini dikarenakan properti row memliki mainAxistAlignment dengan posisi vertikal, sementara itu untuk crossAxistAlignment memiliki posisi horizontal. perhatikan gambar dibawah ini.

Column default

    Sebagai contoh, kita membuat objek container sebanyak 4 susun dengan menggunakan properti Column. jika diperhatikan, container tersebut tersusun secara vertikal (dari atas ke bawah) mulai dari merah, kuning, hijau, dan biru. Jika kita menggunakan value start dari property start pada mainAxistAlignment di column maka hasilnya akan sama saja seperti pada gambar di atas, hal ini dikarenakan nilai atau value dari mainAxistAlignment secara default bernilai start, walaupun kita tidak memberikan value start. Untuk penulisannya yaitu sebagai berikut :

Column (mainAxistAlignment.start)

Arti dari sebuah program "mainAxistAlignment: mainAxistAlignment.start" yaitu :

"di dalam kolom, buatlah container berada di posisi awal secara vertikal"

Sehingga container pertama dimulai dari posisi awal secara vertikal

    Selanjutnya jika kita menggunakan value center pada mainAxistAlignment di property Column, maka hasilnya akan seperti berikut ini :

Column (mainAxistAlignment.center)

Arti dari sebuah program "mainAxistAlignment: mainAxistAlignment.center" yaitu :

"di dalam kolom, buatlah container berada di posisi tengah secara vertikal"

    Niai atau value berikutnya adalah "mainAxistAlignment.end", dimana value ini adalah value end. Jika kita menggunakannya pada coumn, maka hasilnya akan seperti berikut ini :

Column (mainAxistAlignment.end)

Arti dari program "mainAxistAlignment: mainAxistAlignment.end" yaitu :

"di dalam kolom, buatlah container berada di posisi akhir secara vertikal"

    Maka, posisi akan berada di bawah, karena yang seperti kita tau, end adalah akhir, dan akhir dari vertikal yaitu kebawah. Jadi setiap konten atau objek yang kita buat atau kita tambahkan pada kolom, akan semakin ke bawah.

    Selanjutnya crossAxistAlignment pada properti Column. Seperti pada mainAxistAlignment, crossAxistAlignment juga mempunyai value start, center dan end. jika kita mulai dengan menggunakan start, maka hasilnya akan sebagai berikut

Column (crossAxistAlignment.start)

Seperti yang sudah dijelaskan sebelumnya, crossAxistAlignment mempunyai posisi horizontal, sehingga jika kita menggunakan value start, maka akan mempunyai arti sebagai berikut :

"di dalam kolom, buatlah container berada di posisi awal secara horizontal"

    Berikutnya adalah value center, dimana jika kita menggunakan value tersebut, maka hasilnya akan seperti berikut ini 

Column (mainAxistAlignment.center)

Arti dari program "crossAxistAlignment: crossAxistAlignment.center" yaitu :

"di dalam kolom, buatlah container berada di posisi tengah secara horizontal"

    Value Selanjutnya yaitu value end, yang jika kita gunakan akan memberikan hasil sebagai berikut

Column (mainAxistAlignment.end)

arti dari program "crossAxistAlignment: crossAxistAlignment.end" yaitu :

"di dalam kolom, buatlah container berada di posisi akhir secara horizontal"

    Setelah membahas properti Column dari flutter, maka kita akan membahas sebuah properti yang namanya Row. seperti pada properti Column, properti row juga mempunyai nilai yang sama, akan tetapi, mainAxistAlignment pada properti Row akan mempunyai posisi secara horizontal, sedangkan untuk crossAxistAlignment akan mempunyai posisi secara vertikal.

    Untuk properti mainAxistAlignment  dan crossAxistAlignment dengan value start, akan memberikan hasil sebagai berikut

Row (mainAxistAlignment.start)

Arti dari program "mainAxistAlignment: mainAxistAlignment.start" yaitu :

"di dalam baris, buatlah container dengan posisi awal secara horizontal"

    Kemudian value center yang hasilnya yaitu sebagai berikut

Row (mainAxistAlignment.center)

"mainAxistAlignment: mainAxistAlignment.center" artinya :

"di dalam baris, buatlah container dengan posisi awal secara horizontal"

    Value berikutnya yaitu value end dengan hasil sebagai berikut

Row (mainAxistAlignment.end, crossAxistAlignment.end)

"mainAxistAlignment: mainAxistAlignment.end" artinya :

"di dalam baris, buatlah container berada di posisi akhir secara horizontal"

    Lalu mengapa posisi containernya menjadi terlihat rata bawah?, itu karena kita menggunaka value end dari "crossAxistAlignment: crossAxistAlignment.end", sehingga posisi vertikalnya berada di akhir.

    Properti berikutnya yaitu Stack, dimana properti stack ini tidak membutuhkan crossAxistAlignment dan mainAxistAlignment, karena dengan properti ini objek container hanyalah bersifat absolutif, yang artinya semakin bertumpuk. Jadi semisal kita membuat container sebanyak 4, maka container yang pertama akan berada di tumpukan paling bawah, sementara itu container yang kita buat paling akhir, akan berada di tumpukan paling atas. Seperti pada gambar berikut ini

Stack

    Gambar di atas merupakan tumpukan dari container yang sudah dibuat sebanyak 4 yang terdiri dri warna merah, amber, hijau dan biru dri atas ke bawah atau dari awal sampai akhir. Mengapa biru berada di tumpukan paling atas dan merah berada di tumpukan paling bawah?, karena container berwarna biru adalah container yang dibuat paling akhir, sementara itu, container merah adalah container yang dibuat paling awal, sehingga container biru berada di tumpukan teratas dan container merah berada di tumpukan paling bawah.

    Baik mungkin itu dulu untuk pembahasan container widget, semoga bermanfaat bagi pembaca, dan sampai jumpa di pembahasan selanjutnya