Flutter Widget: Mengenal Aspect Ratio
Apa itu Aspect Ratio
Aspect Ratio adalah rasio antara panjang dan lebar dari sebuah widget atau gambar. Dalam Flutter, Aspect Ratio dapat digunakan untuk mengatur ukuran sebuah widget sesuai dengan rasio yang ditentukan. Hal ini sangat berguna ketika Anda ingin mengatur ukuran sebuah widget sesuai dengan ukuran gambar atau video yang ditampilkan di dalamnya.
Untuk mengatur Aspect Ratio di Flutter, Anda dapat menggunakan widget AspectRatio
yang disediakan oleh Flutter. Widget ini memiliki dua parameter yaitu aspectRatio
dan child
. aspectRatio
adalah rasio yang ingin diterapkan pada widget, sedangkan child
adalah widget yang akan diterapkan rasio tersebut.
Contoh
Sebagai contoh, jika Anda ingin menampilkan sebuah gambar dengan rasio 4:3, Anda dapat menambahkan widget AspectRatio
seperti ini:
AspectRatio(
aspectRatio: 4 / 3,
child: Image.asset('path/to/image.jpg'),
)
Aspect Ratio juga dapat digunakan bersama dengan widget lainnya seperti Container
atau Card
untuk mengatur ukuran widget secara lebih fleksibel. Sebagai contoh, jika Anda ingin menampilkan sebuah gambar dengan rasio 4:3 dalam sebuah kontainer dengan margin dan padding, Anda dapat menambahkan widget AspectRatio
seperti ini:
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
child: AspectRatio(
aspectRatio: 4 / 3,
child: Image.asset('path/to/image.jpg'),
),
)
Selain itu, Aspect Ratio juga dapat digunakan dengan widget FittedBox
untuk mengatur ukuran gambar sesuai dengan ukuran widget. Widget FittedBox
memiliki parameter fit
yang dapat digunakan untuk menentukan cara gambar diukur dan disesuaikan dengan ukuran widget. Sebagai contoh, jika Anda ingin menampilkan gambar dengan rasio 4:3 dan mengukur gambar sesuai dengan ukuran widget, Anda dapat menambahkan widget FittedBox
seperti ini:
AspectRatio(
aspectRatio: 4 / 3,
child: FittedBox(
fit: BoxFit.contain,
child: Image.asset('path/to/image.jpg'),
),
)
Dalam keseluruhan, widget Aspect Ratio dapat digunakan untuk mengatur rasio dari widget yang akan ditampilkan. Dengan menggunakan Aspect Ratio, Anda dapat memastikan bahwa widget ditampilkan dalam bentuk yang diing
Kode Lengkap penggunaan Aspect Ratio
Berikut ini adalah contoh penggunaan widget AspectRatio dalam Flutter :
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example Aspect Ratio"),
),
body: Center(
child: AspectRatio(
aspectRatio: 4/3,
child: Container(
color: Colors.blue,
child: Image.network('https://example.com/image.jpg'),
),
),
),
);
}
}
Pada kode diatas, AspectRatio digunakan untuk mengatur rasio dari widget Container yang berisi gambar yang di ambil dari internet dengan rasio 4/3. Widget AspectRatio akan membuat container yang berisi gambar tersebut memiliki rasio 4/3 dan widget container akan membuat gambar tersebut ditampilkan dalam warna biru Anda juga dapat mengubah rasio yang diinginkan sesuai dengan kebutuhan aplikasi Anda.
Anda juga dapat menggabungkan AspectRatio dengan widget lain seperti Column, Row, Expanded ataupun Stack untuk menciptakan layout yang lebih kompleks. Sebagai catatan, Anda perlu memastikan bahwa image yang digunakan sebagai child dari AspectRatio sudah di load sebelum di tampilkan agar tidak terjadi error.