Sobes.tech
Middle

Кадом widget дар Flutter таъмин мекунад, ки тарҳсозии мутобиқшаванда бошад?

sobes.tech AI

Ҷавоб аз AI

  • MediaQuery - барои гирифтани маълумот дар бораи андоза ва самтгирии экран.
  • LayoutBuilder - барои сохтани виджетҳо вобаста ба маҳдудиятҳои унсури падар.
  • OrientationBuilder - барои сохтани виджетҳо вобаста ба самтгирии экран.
  • FractionallySizedBox - барои эҷоди унсурҳо бо андозае, ки нисбат ба фазои дастрас аст.
  • AspectRatio - барои нигоҳ доштани нисбати муайяншудаи унсури.
  • Expanded ва Flexible - барои тақсимоти гувороии фазо байни унсурҳо дар Row ё Column.
  • SingleChildScrollView - барои ҳаракати мундариҷа агар он аз минтақаи дастрас зиёд бошад.
  • ListView ва GridView - барои намоиши рӯйхатҳо ва шабакаҳо бо имконияти мутобиқсозӣ.
  • ResponsiveBuilder (аз баста responsive_framework) - барои сохтани виджетҳо вобаста ба брейкпоинтҳо.
  • FittedBox - барои андозагирии фарзанди виджета мувофиқи андозаи падар.
// Намунаи истифодаи MediaQuery
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Тарҳи мутобиқ'),
      ),
      body: Center(
        child: Text('Андозаи экран: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
      ),
    );
  }
}
// Намунаи истифодаи LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          // Экран васеъ
          return Container(
            color: Colors.blue,
            width: 300,
            height: 100,
            child: Center(child: Text('Васеъ')),
          );
        } else {
          // Экран танг
          return Container(
            color: Colors.red,
            width: 100,
            height: 50,
            child: Center(child: Text('Танг')),
          );
        }
      },
    );
  }
}
// Намунаи истифодаи Expanded
class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          width: 50,
          height: 50,
        ),
        Expanded( // барои ишғол кардани фосилаи боқимондаи
          child: Container(
            color: Colors.green,
            height: 50,
          ),
        ),
      ],
    );
  }
}