Middle
Millised Flutteri vidinad pakuvad kohanduvat paigutust?
sobes.tech AI
Vastus AI-lt
MediaQuery- ekraani suuruse ja orientatsiooni teabe saamiseks.LayoutBuilder- vidinatega ehitamiseks sõltuvalt vanema elemendi piirangutest.OrientationBuilder- vidinatega ehitamiseks sõltuvalt ekraani orientatsioonist.FractionallySizedBox- elementide loomine, mille suurus on proportsionaalne saadaval oleva ruumiga.AspectRatio- säilitades määratud külgede suhe.ExpandedjaFlexible- paindlik ruumi jaotamineRowvõiColumnsees.SingleChildScrollView- sisu kerimiseks, kui see ületab saadaval oleva ala.ListViewjaGridView- loendite ja võrkude kuvamiseks koos kohandamise võimalustega.ResponsiveBuilder(paketistresponsive_framework) - vidinatega ehitamiseks sõltuvalt breakpoinstidest.FittedBox- lapse vidina skaleerimiseks vastavalt vanema suurusele.
// MediaQuery kasutamise näide
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Adapteeritav disain'),
),
body: Center(
child: Text('Ekraani suurus: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// LayoutBuilder kasutamise näide
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Lai ekraan
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Lai')),
);
} else {
// Kitsas ekraan
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Kitsas')),
);
}
},
);
}
}
// Expanded kasutamise näide
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // hõivab ülejäänud ruumi
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}