Middle
Jakie widżety w Flutter zapewniają responsywny układ?
sobes.tech AI
Odpowiedź od AI
MediaQuery- do pobierania informacji o rozmiarze i orientacji ekranu.LayoutBuilder- do tworzenia widżetów w zależności od ograniczeń elementu nadrzędnego.OrientationBuilder- do tworzenia widżetów w zależności od orientacji ekranu.FractionallySizedBox- do tworzenia elementów o rozmiarze proporcjonalnym do dostępnej przestrzeni.AspectRatio- do utrzymania określonego stosunku szerokości do wysokości elementu.ExpandediFlexible- do elastycznego rozdzielania przestrzeni między elementami wRowlubColumn.SingleChildScrollView- do przewijania zawartości, jeśli przekracza ona dostępną przestrzeń.ListViewiGridView- do wyświetlania list i siatek z możliwością dostosowania.ResponsiveBuilder(z pakieturesponsive_framework) - do tworzenia widżetów w zależności od punktów przerwania.FittedBox- do skalowania widżetu potomnego zgodnie z rozmiarem rodzica.
// Przykład użycia MediaQuery
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Responsywny design'),
),
body: Center(
child: Text('Rozmiar ekranu: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// Przykład użycia LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Szeroki ekran
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Szeroki')),
);
} else {
// Wąski ekran
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Wąski')),
);
}
},
);
}
}
// Przykład użycia Expanded
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // zajmie pozostałą przestrzeń
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}