Sobes.tech
Middle

Kokie widget'ai Flutter užtikrina prisitaikantį išdėstymą?

sobes.tech AI

Atsakymas iš AI

  • MediaQuery - norint gauti informacijos apie ekrano dydį ir orientaciją.
  • LayoutBuilder - kuriant widget'us priklausomai nuo tėvo elemento apribojimų.
  • OrientationBuilder - kuriant widget'us priklausomai nuo ekrano orientacijos.
  • FractionallySizedBox - kuriant elementus, kurių dydis proporcingas prieinamai erdvei.
  • AspectRatio - palaikant nustatytą pločio ir aukščio santykį.
  • Expanded ir Flexible - lankstus erdvės paskirstymas tarp elementų Row ar Column viduje.
  • SingleChildScrollView - turinio nuskaitymas, jei jis viršija prieinamą plotą.
  • ListView ir GridView - sąrašų ir tinklų rodymas su prisitaikymo galimybėmis.
  • ResponsiveBuilder (iš responsive_framework paketo) - widget'ų kūrimas priklausomai nuo breakpoints.
  • FittedBox - vaikų widget'o mastelio keitimas pagal tėvo dydį.
// MediaQuery naudojimo pavyzdys
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptuojamas dizainas'),
      ),
      body: Center(
        child: Text('Ekrano dydis: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
      ),
    );
  }
}
// LayoutBuilder naudojimo pavyzdys
class AdaptiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          // Platus ekranas
          return Container(
            color: Colors.blue,
            width: 300,
            height: 100,
            child: Center(child: Text('Platus')),
          );
        } else {
          // Siauras ekranas
          return Container(
            color: Colors.red,
            width: 100,
            height: 50,
            child: Center(child: Text('Siauras')),
          );
        }
      },
    );
  }
}
// Expanded naudojimo pavyzdys
class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          width: 50,
          height: 50,
        ),
        Expanded( // užims likusią erdvę
          child: Container(
            color: Colors.green,
            height: 50,
          ),
        ),
      ],
    );
  }
}