Sobes.tech
Middle

Flutter'da qaysi vidjetlar moslashuvchan tuzilmani ta'minlaydi?

sobes.tech AI

AIdan javob

  • MediaQuery - ekran hajmi va yo'nalishi haqida ma'lumot olish uchun.
  • LayoutBuilder - ota elementning cheklovlariga asoslangan holda vidjetlar yaratish uchun.
  • OrientationBuilder - ekran yo'nalishiga qarab vidjetlar yaratish uchun.
  • FractionallySizedBox - mavjud bo'shliqga nisbatan o'lchamli elementlar yaratish uchun.
  • AspectRatio - elementning belgilangan kenglik-balandlik nisbatini saqlash uchun.
  • Expanded va Flexible - Row yoki Column ichida elementlar orasida bo'shliqni moslashuvchan taqsimlash uchun.
  • SingleChildScrollView - mazmuni mavjud bo'shliqdan oshsa, skroll qilish uchun.
  • ListView va GridView - moslashuvchan ro'yxatlar va tarmoqlarni ko'rsatish uchun.
  • ResponsiveBuilder (paket responsive_framework dan) - breakpoints asosida vidjetlar yaratish uchun.
  • FittedBox - bolalar vidjetini ota elementning o'lchamiga moslashtirish uchun.
// MediaQuery dan foydalanish misoli
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Moslashuvchan dizayn'),
      ),
      body: Center(
        child: Text('Ekran o'lchami: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
      ),
    );
  }
}
// LayoutBuilder dan foydalanish misoli
class AdaptiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          // Keng ekran
          return Container(
            color: Colors.blue,
            width: 300,
            height: 100,
            child: Center(child: Text('Keng')),
          );
        } else {
          // Tor ekran
          return Container(
            color: Colors.red,
            width: 100,
            height: 50,
            child: Center(child: Text('Tor')),
          );
        }
      },
    );
  }
}
// Expanded dan foydalanish misoli
class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          width: 50,
          height: 50,
        ),
        Expanded( // qolgan bo'shliqni egallaydi
          child: Container(
            color: Colors.green,
            height: 50,
          ),
        ),
      ],
    );
  }
}