Middle
Ce widget-uri din Flutter asigură un aspect adaptiv?
sobes.tech AI
Răspuns de la AI
MediaQuery- pentru obținerea informațiilor despre dimensiunea și orientarea ecranului.LayoutBuilder- pentru construirea widget-urilor în funcție de restricțiile elementului părinte.OrientationBuilder- pentru construirea widget-urilor în funcție de orientarea ecranului.FractionallySizedBox- pentru crearea de elemente cu dimensiune proporțională cu spațiul disponibil.AspectRatio- pentru menținerea unei proporții de aspect specificate a elementului.ExpandedșiFlexible- pentru distribuirea flexibilă a spațiului între elemente înRowsauColumn.SingleChildScrollView- pentru derularea conținutului dacă depășește zona disponibilă.ListViewșiGridView- pentru afișarea listelor și grilelor cu capacitate de adaptare.ResponsiveBuilder(din pachetulresponsive_framework) - pentru construirea widget-urilor în funcție de punctele de întrerupere.FittedBox- pentru scalarea widget-ului copil în funcție de dimensiunea părintelui.
// Exemplu de utilizare MediaQuery
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Design adaptiv'),
),
body: Center(
child: Text('Dimensiunea ecranului: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// Exemplu de utilizare LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Ecran lat
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Lat')),
);
} else {
// Ecran îngust
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Îngust')),
);
}
},
);
}
}
// Exemplu de utilizare Expanded
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // va ocupa spațiul rămas
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}