Middle
Koji widget-i u Flutter-u obezbeđuju prilagodljiv raspored?
sobes.tech АИ
Одговор од АИ
MediaQuery- za dobijanje informacija o veličini i orijentaciji ekrana.LayoutBuilder- za građenje vidžeta u zavisnosti od ograničenja roditeljskog elementa.OrientationBuilder- za građenje vidžeta u zavisnosti od orijentacije ekrana.FractionallySizedBox- za kreiranje elemenata sa veličinom proporcionalnom dostupnom prostoru.AspectRatio- za održavanje zadatog odnosa stranica elementa.ExpandediFlexible- za fleksibilno raspoređivanje prostora između elemenata uRowiliColumn.SingleChildScrollView- za skrolovanje sadržaja ako on premašuje dostupnu oblast.ListViewiGridView- za prikazivanje spiskova i mreža sa mogućnošću prilagođavanja.ResponsiveBuilder(iz paketaresponsive_framework) - za građenje vidžeta u zavisnosti od breakpoinata.FittedBox- za skaliranje podređenog vidžeta u skladu sa veličinom roditelja.
// Primer korišćenja MediaQuery
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Adaptivni dizajn'),
),
body: Center(
child: Text('Veličina ekrana: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// Primer korišćenja LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Širok ekran
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Širok')),
);
} else {
// Uzak ekran
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Uzak')),
);
}
},
);
}
}
// Primer korišćenja Expanded
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // će zauzeti preostali prostor
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}