Sobes.tech
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 și Flexible - pentru distribuirea flexibilă a spațiului între elemente în Row sau Column.
  • SingleChildScrollView - pentru derularea conținutului dacă depășește zona disponibilă.
  • ListView și GridView - pentru afișarea listelor și grilelor cu capacitate de adaptare.
  • ResponsiveBuilder (din pachetul responsive_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,
          ),
        ),
      ],
    );
  }
}