Widget AspectRatio mencoba menemukan ukuran terbaik untuk mempertahankan rasio aspek widget anak.
Widget AspectRatio mencoba mengukur turunan ke rasio aspek tertentu.
Misalkan kita memiliki widget Container dengan lebar 100, dan tinggi 100. Dalam hal ini rasio aspeknya adalah 100/100; yaitu 1.0.
Sekarang, setiap Widget memiliki batasannya sendiri . Akibatnya, Widget AspectRatio mencoba menemukan ukuran terbaik untuk mempertahankan rasio aspek. Namun, saat melakukannya, itu menghormati batasan tata letak.
Mari kita lihat tangkapan layar di mana kami telah menggunakan tiga jenis rasio aspek yang berbeda.
Widget Container memiliki widget AspectRatio, yang memiliki Container turunan dalam warna yang berbeda.
Akibatnya, kita melihat berbagai jenis kombinasi warna.
Mari kita lihat kode lengkapnya sekarang.
import 'package:flutter/material.dart';
class AspectRatioSample extends StatelessWidget {
const AspectRatioSample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'AspectRatio Sample',
debugShowCheckedModeBanner: false,
home: AspectRatioSampleHomme(),
);
}
}
class AspectRatioSampleHomme extends StatelessWidget {
const AspectRatioSampleHomme({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AspectRatio Sample'),
),
body: Center(
child: Column(
children: [
Container(
color: Colors.red,
alignment: Alignment.center,
padding: const EdgeInsets.all(10),
width: 100.0,
height: 100.0,
child: AspectRatio(
aspectRatio: 2.0,
child: Container(
width: 50.0,
height: 50.0,
color: Colors.yellow,
),
),
),
const SizedBox(
height: 10,
),
Container(
color: Colors.blue,
alignment: Alignment.center,
width: 100.0,
height: 100.0,
child: AspectRatio(
aspectRatio: 2.0,
child: Container(
width: 80.0,
height: 70.0,
color: Colors.white,
),
),
),
const SizedBox(
height: 10,
),
Container(
color: Colors.green,
alignment: Alignment.center,
width: 100.0,
height: 100.0,
child: AspectRatio(
aspectRatio: 0.5,
child: Container(
width: 100.0,
height: 50.0,
color: Colors.black26,
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add_a_photo),
),
);
}
}Ingat, dalam setiap kasus, widget AspectRatio mencoba menemukan ukuran terbaik dan menyesuaikan turunannya.
Itu datang untuk membantu kami, ketika kami mencoba mengubah ukuran gambar dengan cepat.
