Bekerja dengan baris dan kolom di flutter

Bekerja dengan baris dan kolom di flutter

Bekerja dengan baris dan kolom di flutter

Tutorial Flutter kali ini menunjukkan bagaimana cara Bekerja dengan baris dan kolom di flutter, Sebagai bagian dariĀ seriĀ Pembelajaran flutterĀ , kita akan mempelajari baris dan kolom dengan contoh.Ā Dalam pengembangan flutter, baris dan kolom memainkan peran yang sangat penting dalam desain UI.Ā mari kita jelajahi

flutter-row-column-Pembelajaran

Perbandingan Baris & Kolom

Kolom Baris
Widget MultiChild Widget MultiChild
Sejajarkan semua Widget Anak dalamĀ arahĀ vertikal Sejajarkan semua Widget anak dalamĀ Ā arahĀ horizontal

Menjelajahi Widget Kolom

Seperti yang dikatakan sebelumnya, widget kolom menyelaraskan arah vertikal widget anak-anak.Ā Untuk mengubah UI, kita perlu bermain dengan CrossAxisAligment & MainAxisAlignment.Ā Di widget Column, MainAxisAligment akan berada di arah vertikal & CrossAxisAligment dalam arah horizontal.

Container(

color: Colors.grey[300],

width: double.infinity,

height: double.infinity,

child: Column(

mainAxisAlignment: MainAxisAlignment.start,

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Container(

height: 50,

width: 50,

color: Colors.red,

),

Container(

height: 50,

width: 50,

color: Colors.green,

),

Container(

height: 50,

width: 50,

color: Colors.blue,

),

],

),

),

Contoh Kolom 1

flutter-kolom-contoh-1 flutter-kolom-contoh-1

Dalam contoh di atas, Kita Memperbaiki MainAxisAligment di posisi awal dan mengubah CrossAxisAligment sebagai posisi awal, tengah, dan akhir.

Contoh Kolom Flutter 2

flutter-kolom-contoh-2 flutter-kolom-contoh-2

Dalam contoh di atas, Kita Memperbaiki MainAxisAligment di posisi tengah dan mengubah CrossAxisAligment sebagai posisi awal, tengah, dan akhir.

Contoh Kolom Flutter 3

flutter-kolom-contoh-3 flutter-kolom-contoh-3

Baca Juga  Templat Jadwal Rotasi

Dalam contoh di atas, Kita Memperbaiki MainAxisAligment di posisi akhir dan mengubah CrossAxisAligment sebagai posisi awal, tengah, dan akhir.

Contoh Kolom Flutter 4

flutter-kolom-contoh-4 flutter-kolom-contoh-4

Dalam contoh di atas, Kita Memperbaiki CrossAxisAligment di posisi tengah dan mengubah MainAxisAligment.

MainAxisAlignment.spaceBetween: WidgetĀ Pertama & Terakhir tanpa spasi & spasi di antara widget dalam

MainAxisAlignment.spaceAround:Ā Semua widget dibungkus dengan beberapa ruang di sekitarnya.

MainAxisAlignment.spaceEvenly:Ā Semua widget dibungkus dengan ruang yang sama

Contoh Kolom 5

kolom-contoh-5

Cara bekerja dengan baris di Flutter

Menjelajahi Widget Baris

Seperti yang dikatakan sebelumnya, widget baris meratakan arah horizontal widget anak.Ā Untuk mengubah UI, kita perlu bermain dengan CrossAxisAligment & MainAxisAlignment.Ā Di widget Row, MainAxisAligment akan berada di arah horizontal & CrossAxisAligment dalam arah vertikal.

Container(

color: Colors.grey[300],

width: double.infinity,

height: double.infinity,

child: Row(

mainAxisAlignment: MainAxisAlignment.start,

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Container(

height: 50,

width: 50,

color: Colors.red,

),

Container(

height: 50,

width: 50,

color: Colors.green,

),

Container(

height: 50,

width: 50,

color: Colors.blue,

),

],

),

),

Contoh Flutter Row 1

flutter-row-example-1

Dalam contoh di atas, Kita Memperbaiki CrossAxisAligment di posisi awal dan mengubah MainAxisAligment sebagai posisi awal, tengah, dan akhir.

Contoh Flutter Row 2

flutter-row-example-2

Dalam contoh di atas, Kita Memperbaiki CrossAxisAligment di posisi tengah dan mengubah MainAxisAligment sebagai posisi awal, tengah, dan akhir.

Contoh Flutter Row 3

flutter-row-example-3

Dalam contoh di atas, Kita Memperbaiki CrossAxisAligment di posisi akhir dan mengubah MainAxisAligment sebagai posisi awal, tengah, dan akhir.

Contoh Flutter Row 4

flutter-row-example-4

Dalam contoh di atas, Kita Memperbaiki CrossAxisAligment di posisi tengah dan mengubah MainAxisAligment.

MainAxisAlignment.spaceBetween: WidgetĀ Pertama & Terakhir tanpa spasi & spasi di antara widget dalam

Baca Juga  Belajar Microsoft Excel: Cara Menggunakan Format Painter Secara Berulang

MainAxisAlignment.spaceAround:Ā Semua widget dibungkus dengan beberapa ruang di sekitarnya.

MainAxisAlignment.spaceEvenly:Ā Semua widget dibungkus dengan ruang yang sama

flutter-row-example-5

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us