Sobes.tech
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.
  • Expanded i Flexible - za fleksibilno raspoređivanje prostora između elemenata u Row ili Column.
  • SingleChildScrollView - za skrolovanje sadržaja ako on premašuje dostupnu oblast.
  • ListView i GridView - za prikazivanje spiskova i mreža sa mogućnošću prilagođavanja.
  • ResponsiveBuilder (iz paketa responsive_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,
          ),
        ),
      ],
    );
  }
}