Tutorial ini menunjukkan cara menggunakan Flexiblewidget di Flutter.
Jika Kita menggunakan Flexwidget seperti Row atau Column, bagaimana cara mengontrol ukuran child relatif ke child lain? Ini dapat dilakukan dengan mudah menggunakan Flexiblewidget. Cukup bungkus setiap widget child di dalam file Flexible. Dalam tutorial ini, saya akan menunjukkan beberapa contoh bagaimana menggunakan Flexiblewidget.
Menggunakan Flexible
Ini adalah constructor Flexible.
const Flexible({
Key key,
this.flex = 1,
this.fit = FlexFit.loose,
@required Widget child,
})
Di bawah ini adalah deskripsi argumen yang dapat Kita berikan pada constructor.
Key key: Tombol widget, digunakan untuk mengontrol apakah harus diganti.int flex: Faktor fleksibel untuk child.FlexFit fit: Bagaimana child itu ditorehkan ke dalam ruang yang tersedia. Default-nya adalah FlexFit.loose.Widget child *: Widget di bawah widget ini di pohon.
flexadalah properti penting di sini. Ini menentukan faktor fleksibel yang memengaruhi ukuran child.
Dalam contoh di bawah ini, child pertama memiliki flexnilai 3. Nilai kedua dan ketiga flexmasing-masing adalah 1 dan 2. Totalnya, 3 + 1 + 2 = 6. Jadi, pecahan tiap child secara berurutan adalah 3/6, 1/6, dan 2/6.
Column(
children: <Widget>[
Flexible(
flex: 3,
child: Container(
color: Colors.red,
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.green,
)
),
Flexible(
flex: 2,
child: Container(
color: Colors.blue,
)
),
],
)
Output:
Lev Yasin
Instruktur Web Programming Mataweb
Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.
05 May 2021
Lev Yasin
1402
Mobile App
