Middle
Flutter-də hansı vidjetlər uyğunlaşa bilən düzən təmin edir?
sobes.tech Süni İntellekt
AI-dan cavab
MediaQuery- ekranın ölçüsü və istiqaməti haqqında məlumat almaq üçün.LayoutBuilder- valideyn elementin məhdudiyyətlərinə əsasən vidjetlər yaratmaq üçün.OrientationBuilder- ekranın istiqamətinə əsasən vidjetlər yaratmaq üçün.FractionallySizedBox- mövcud boşluğa nisbətən ölçüsü olan elementlər yaratmaq üçün.AspectRatio- elementin müəyyən edilmiş en-boy nisbətini saxlamaq üçün.ExpandedvəFlexible-Rowvə yaColumniçində elementlər arasında sərbəst şəkildə sahə bölüşdürmək üçün.SingleChildScrollView- məzmunu sürüşdürmək üçün, əgər o mövcud sahəni aşırsa.ListViewvəGridView- uyğunlaşma qabiliyyətli siyahılar və şəbəkələr göstərmək üçün.ResponsiveBuilder(paketresponsive_framework-dən) - kəsik nöqtələrinə əsasən vidjetlər yaratmaq üçün.FittedBox- uşağın vidjetini valideynin ölçüsünə uyğun olaraq miqyaslandırmaq üçün.
// MediaQuery istifadə nümunəsi
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Uyğunlaşan dizayn'),
),
body: Center(
child: Text('Ekran ölçüsü: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// LayoutBuilder istifadə nümunəsi
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Geniş ekran
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Geniş')),
);
} else {
// Dar ekran
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Dar')),
);
}
},
);
}
}
// Expanded istifadə nümunəsi
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // qalan sahəni dolduracaq
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}