Middle
Flutter'da qaysi vidjetlar moslashuvchan tuzilmani ta'minlaydi?
sobes.tech AI
AIdan javob
MediaQuery- ekran hajmi va yo'nalishi haqida ma'lumot olish uchun.LayoutBuilder- ota elementning cheklovlariga asoslangan holda vidjetlar yaratish uchun.OrientationBuilder- ekran yo'nalishiga qarab vidjetlar yaratish uchun.FractionallySizedBox- mavjud bo'shliqga nisbatan o'lchamli elementlar yaratish uchun.AspectRatio- elementning belgilangan kenglik-balandlik nisbatini saqlash uchun.ExpandedvaFlexible-RowyokiColumnichida elementlar orasida bo'shliqni moslashuvchan taqsimlash uchun.SingleChildScrollView- mazmuni mavjud bo'shliqdan oshsa, skroll qilish uchun.ListViewvaGridView- moslashuvchan ro'yxatlar va tarmoqlarni ko'rsatish uchun.ResponsiveBuilder(paketresponsive_frameworkdan) - breakpoints asosida vidjetlar yaratish uchun.FittedBox- bolalar vidjetini ota elementning o'lchamiga moslashtirish uchun.
// MediaQuery dan foydalanish misoli
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Moslashuvchan dizayn'),
),
body: Center(
child: Text('Ekran o'lchami: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// LayoutBuilder dan foydalanish misoli
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Keng ekran
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Keng')),
);
} else {
// Tor ekran
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Tor')),
);
}
},
);
}
}
// Expanded dan foydalanish misoli
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // qolgan bo'shliqni egallaydi
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}