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,
          ),
        ),
      ],
    );
  }
}