GestureDetector haqida avvalgi postlarda qisqacha tanishib chiqdik, o‘rgangan narsalarimizga qo’shimcha yana bazi bir kerakli qulayliklardan foydalanishni ham ko’rib chiqaylik. Ekranga bitta yoki multitouch(ko’pgina) teginish jestlaridan foydalangan holda widgetlarni scale (masshtablashtirishni) ko’rib chiqamiz.

GestureDetector haqida avvalgi postlarda qisqacha tanishib chiqdik, o‘rgangan narsalarimizga qo’shimcha yana bazi bir kerakli qulayliklardan foydalanishni ham ko’rib chiqaylik. Ekranga bitta yoki multitouch(ko’pgina) teginish jestlaridan foydalangan holda widgetlarni scale (masshtablashtirishni) ko’rib chiqamiz. Bu qulaylikdan asosan rasmlarni va google map (xarita) yaqinlashtirsh kichraytirish uchun ishlatiladi, misol uchun rasmni ikki marta ursa rasm masshatablashib kattalashadi va yana ikki marta ursa eski holatiga qaytadi.

Buning uchun GestureDetectorni onScaleStart va onScaleUpdate qulayligidan foydalanamiz. Ko’rib chiqadigan misolimizda masshtabni oshirish uchun onDoubleTap-dan foydalanamiz va default holatiga qaytarish uchun onLongPress-dan foydalanamiz.Foydalanuvchi rasmni bosganida jestlar orqali, rasmni joyini o’zgartirish yoki kattalashtirish/kichraytirish mumkin.

Shu kabi qulaylikdan foydalanish uchun esa Transform widgetidan foydalanamiz. Rasm hajmini o’zgartirish uchun Transform.scale konstruktoridan foydalanamiz va rasmni joyni o’zgartirish uchun Transform.translate konstruktoridan foydalanamiz. Transform.rotate : childga berilgan widgetni 360 darajada aylantirish uchun ishlatilinadi. Default holatda soat yo’nalishi bo’yicha aylanadi. Soat miliga teskari aylantirish uchun manfiy radianni berish kerak. Transform.scale : X o’qi va y o’qi bo’yicha childga berilgan widgetini teng ravishda masshtablashtiradigan konstruktor. 1.0 widgetning asl o’lchami hisoblanadi, 1.0 dan yuqori har qanday qiymatlar widgetni kattalashtiradi va 1.0 dan past qiymatlar widgetni kichraytiradi. 0.0 qiymati vidjetni ko’rinmas qiladi.Transform.translate: Translate yordamida childdagi widgetni ko‘chirish/joylashtirish uchun konstruktor hisoblanadi. Offset argumenti widgetni x va y o’qlarida joylashtirish uchun foydalanamiz, Offset(double dx, double dy) klassi orqali ishlaydi.

Misolimizda qurilmaning toʻliq kengligini egalaydigan rasm koʻrsatadigan sahifani qilaylik. Rasmni bir teginish orqali siljitish va 2 multitouch yordamida kattalashtirish/kichraytirish mumkin bo’lsin. Ikki marta bosish rasmni kattalashtirish imkonini beradi va bir marta bosish ramsni joylashuvi va masshtablash darajasini default holatga qaytaradi.

_startLastOffset , _lastOffset va currentOffset o’zgaruvchilari Offset typeda bo’lib rasmni joyini kuzatish uchun ishlatamiz. _lastScale va _currentScale o’zgaruvchilari double typeda bo’lib rasmni masshtabini kuzatish uchun ishlatamiz. Transform widgeti ikki xil yo’l bilan rasmni joyidan koʻchirish va oʻlchamini oshirishi mumkin. Birinchi usuli Transform.scale va Transform.translate-ni orqali ishlatish, ikkinchi usuli Matrix4 dan foydalangan holda Transform default konstruktoridan foydalanib. Ikkala usul ham bir xil natijani beradi.

onScaleStart va onScaleUpdate siljitish va masshtablash jestlarini boshqarish uchun ishlatamiz. onDoubleTap masshtabni kattalashtirish uchun ikki marta bosishni boshqarish uchun ishlatamiz. onLongPress masshtabni default standart qiymatiga qaytarish uchun uzoq bosish jestini bajarish uchun foydalanamiz. onScaleStart(ScaleStartDetails details) metodi rasmni joyini ko‘chirish yoki o‘lchamini oshirishni boshlaganda ishga tushadi. _startLastOffset, _lastOffset va _lastScale o’zgaruvchilarini qiymatlarini o’zgartirib boradi.

Soddaroq qilib tushuntiradigan bo’lsak foydalanuvchi rasm masshatablashganini yoki joyi o’zgarganligini bilishni tekshirish uchun desak ham bo’ladi.

class GestureScale extends StatefulWidget {
  const GestureScale({Key? key}) : super(key: key);

@override
  _GestureScaleState createState() => _GestureScaleState();
}

class _GestureScaleState extends State<GestureScale> {
  Offset _startLastOffset = Offset.zero;
  Offset _lastOffset = Offset.zero;
  Offset _currentOffset = Offset.zero;
  double _lastScale = 1.0;
  double _currentScale = 1.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(context),
    );
  }
}

Ko’rib turganimizdek koddimizni sodaroq qilish uchun avval o’zgaruvchilarni kiritib olib so’ng asosiy widgetimizni alohida metodlarga bo’lib kodni soddalashtirishga harakat qilganmiz

_transformScaleAndTranslate() va _transformMatrix4(), haqida yuqorida nima vazifalar qilishini yozib o’tkan edik, keling endi koddni o’zini ko’raylik. Widgetni ham masshatablashtirish hamda joyidan o’zgarganligi uchun. Ikkala metod ham bir hil vazifani bajaradi.

Ekarnda ma’lumotlarni ko’rib turish uchun esa ushbu widgetdan foydalanamiz.

Rasmni ikki marta urganda yaqainlashtirish uchun

Rasmni bosib turganda eski holatiga default holatga qaytish uchun esa

To’liq kod esa quydagi ko’rinishda

class GestureScale extends StatefulWidget {
  const GestureScale({Key? key}) : super(key: key);

@override
  _GestureScaleState createState() => _GestureScaleState();
}

class _GestureScaleState extends State<GestureScale> {
  Offset _startLastOffset = Offset.zero;
  Offset _lastOffset = Offset.zero;
  Offset _currentOffset = Offset.zero;
  double _lastScale = 1.0;
  double _currentScale = 1.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(context),
    );
  }
  Widget _buildBody(BuildContext context) {
    return GestureDetector(
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          // _transformScaleAndTranslate(),
          _transformMatrix4(),
          _positionedStatusBar(context),
        ],
      ),
      onScaleStart: _onScaleStart,
      onScaleUpdate: _onScaleUpdate,
      onDoubleTap: _onDoubleTap,
      onLongPress: _onLongPress,
    );
  }

Transform _transformScaleAndTranslate() {
    return Transform.scale(
      scale: _currentScale,
      child: Transform.translate(
        offset: _currentOffset,
        child: const Image(
          image: AssetImage('images/elphant.jpg'),
        ),
      ),
    );
  }

Transform _transformMatrix4() {
    return Transform(
      transform: Matrix4.identity()
        ..scale(_currentScale, _currentScale)
        ..translate(
          _currentOffset.dx,
          _currentOffset.dy,
        ),
      alignment: FractionalOffset.center,
      child: const Image(
        image: AssetImage('images/elphant.jpg'),
      ),
    );
  }

Positioned _positionedStatusBar(BuildContext context) {
    return Positioned(
      top: 0.0,
      width: MediaQuery.of(context).size.width,
      child: Container(
        color: Colors.white54,
        height: 50.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Text('Scale: ${_currentScale.toStringAsFixed(4)}'),
            Text('Current: $_currentOffset'),
          ],
        ),
      ),
    );
  }

void _onScaleStart(ScaleStartDetails details) {
    print('ScaleStartDetails: $details');
    _startLastOffset = details.focalPoint;
    _lastOffset = _currentOffset;
    _lastScale = _currentScale;
  }

void _onScaleUpdate(ScaleUpdateDetails details) {
    print('ScaleUpdateDetails: $details - Scale: ${details.scale}');
    if (details.scale != 1.0) {
      double currentScale = _lastScale * details.scale;
      if (currentScale < 0.5) {
        currentScale = 0.5;
      }
      setState(() {
        _currentScale = currentScale;
      });
      print('_scale: $_currentScale - _lastScale: $_lastScale');
    } else if (details.scale == 1.0) {
      Offset offsetAdjustedForScale =
          (_startLastOffset - _lastOffset) / _lastScale;
      Offset currentOffset =
          details.focalPoint - (offsetAdjustedForScale * _currentScale);
      setState(() {
        _currentOffset = currentOffset;
      });
      print(
          'offsetAdjustedForScale: $offsetAdjustedForScale - _currentOffset: $_currentOffset');
    }
  }

void _onDoubleTap() {
    print('onDoubleTap');
    double currentScale = _lastScale * 2.0;
    if (currentScale > 16.0) {
      currentScale = 1.0;
      _resetToDefaultValues();
    }
    _lastScale = currentScale;
    setState(() {
      _currentScale = currentScale;
    });
  }

void _onLongPress() {
    print('onLongPress');
    setState(() {
      _resetToDefaultValues();
    });
  }

void _resetToDefaultValues() {
    _startLastOffset = Offset.zero;
    _lastOffset = Offset.zero;
    _currentOffset = Offset.zero;
    _lastScale = 1.0;
    _currentScale = 1.0;
  }

}

Flutterda obyektni bir joydan ikkinchi joyga olib o’tish uchun bir necha yo’llari bor, shulardan biri Draggable widgetini DragTarget widgetiga qo’yish. Har qanday maxsus maʼlumotlarni uzatish uchun data xususiyatidan foydalanamiz va ma’lumotimizni Icon widgeti kabi koʻrsatish uchun child xususiyatidan foydalanamiz. ChildWhenDragging xususiyatini dragg (surmoq) qilinayotgan paytda widgetni ko‘rsatish uchun ishlatiladi. Widget tortilayotgan joyda foydalanuvchiga qayerga qo’yish kerakligi haqidagi vizual ma’lumotni ko’rsatib turish uchun feedback xususiyatidan foydalanamiz.

Foydalanuvchi barmog’ini DragTarget tepasiga ko’targandan so’ng, target datalarni qabul qilishi mumkin. Ma’lumotni qabul qilishni rad etish uchun foydalanuvchi qo’lni uzmasdan DragTarget-dan uzoqlashsa yetarli. Harkat o’qini boshqarish uchun Draggable axis xususiyatini o’rnatish kifoya qiladi. Buning uchun Axis.vertical yoki Axis.horizontal ga o’zgartirsak yetarli.

DragTarget widgeti Draggable widgetini tinglaydi va agar to’g’ri qo’yilgan bo’lsa, ma’lumotlarni oladi. DragTarget builder xususiyati uchta parametrni qabul qiladi: BuildContext , List<dynamic> acceptedData va List<dynamic> rejectedData. Qabul qilingan ma’lumotlar bu Draggable widgetidan uzatiladigan ma’lumotlar bo’lib, u Listni valuesini kutadi. RejectedData qabul qilinmagan ma’lumotlar ro’yxatini o’z ichiga oladi.

Ushbu postmizni misolida avvalgi postda qilgan ilovaga qo’shimchalar qo’shib to’ldirib ketamiz. Bu safar yana ikkita widget yaratib uni misolimizga qo’shib qo’yamiz: dragg qilinadigan icon widgeti va ma’lumotlarni qabul qiladigan Text widgeti bo’lsin. Text widgeti ma’lumotlarni qabul qilganda, u rangini och kulrangdan, olov rangga o’zgartiradi, faqat drag qo’yilgan bo’lsa.

Draggable<int> _buildDraggable() {
    return Draggable(
      child: Column(
        children: const <Widget>[
          Icon(
            Icons.palette,
            color: Colors.deepOrange,
            size: 48.0,
          ),
          Text(
            'Drag Me below to change color',
          ),
        ],
      ),
      childWhenDragging: const Icon(
        Icons.palette,
        color: Colors.grey,
        size: 48.0,
      ),
      feedback: const Icon(
        Icons.brush,
        color: Colors.deepOrange,
        size: 80.0,
      ),
      data: Colors.deepOrange.value,
    );
  }

Misolda DragTarget uning ustida Draggable mavjudligini tekshiradi. Agar yo’q bo’lsa, default holatda “Drag To and see the color change” degan xabar text bo’ladi. Agar Draggable uning ustida bo’lsa va ma’lumotlar qiymatiga ega bo’lsa, ma’lumotlarni ko’ramiz.

DragTarget<int> _buildDragTarget() {
    return DragTarget<int>(
      onAccept: (colorValue) {
        _paintedColor = Color(colorValue);
      },
      builder: (BuildContext context, List<dynamic> acceptedData,
              List<dynamic> rejectedData) =>
          acceptedData.isEmpty
              ? Text(
                  'Drag To and see color change',
                  style: TextStyle(color: _paintedColor),
                )
              : Text(
                  'Painting Color: $acceptedData',
                  style: TextStyle(
                    color: Color(acceptedData[0]),
                    fontWeight: FontWeight.bold,
                  ),
                ),
    );
  }

Ma’lumotlarni qabul qilish uchun DragTargetni onAccept qulayligidan foydalanamiz Color typeda _paintedColor o’zgaruvchisni kiritib olamiz.

class GesturSimple extends StatefulWidget {
  const GesturSimple({Key? key}) : super(key: key);

@override
  State<GesturSimple> createState() => _GesturSimpleState();
}

class _GesturSimpleState extends State<GesturSimple> {
  String _gestureDetected = " ";
  Color? _paintedColor;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _buildGestureDetector(),
              const Divider(color: Colors.black, height: 44.0),
              _buildDraggable(),
              const Divider(height: 40.0),
              _buildDragTarget(),
              const Divider(color: Colors.black),
            ],
          ),
        ),
      ),
    );
  }
}

Ushbu postlardan boshlab jestlar(qo’lni harakatlari) orqali mobil ilovamizga interaktivlikni qo’shishni ko’rib chiqamiz. Mobil ilovada jestlar foydalanuvchi bilan dasturni aloqalarini yuragi hisoblanadi jestlar bo’lmasa ilovamiz shunchaki ko’rinishdan boshqa narsa bo’lmaydi, yani bir sahifadan sahifaga o’ta olmaymiz yoki scroll qila olmaymiz va yana bir qancha qulayliklardan foydalana olmaymiz. Kerakli joyga kerakli jestlar qo’shish dasturmizni yaxshi UXga ega dastur qiladi.

GestureDetector widgeti tap, double tap, long press, pan, vertical drag, horizontal drag va scale kabi jestlarni o’zida ishlata oladi. Child propertysi optional (ixtiyoriy) hisoblanadi, agar child propertysiga widget bersak jestlar berilgan widget uchun tegishli bo’lib qoladi. Agar child qulayligiga bermasak u yuqorisidagi parent widgetga tegishli bo’ladi. Ilovada bir vaqtning o’zida vertikal va gorizontal jestlardan foydalanish kerak bo’lsa, pan qulayligidan foydalanamiz. Agar bitta yo’nalish bo’yicha bo’lsa, vertikal drag yoki horizontal drag foydalanishimiz mumkin.

Agar bir vaqtning o’zida vertikal drag, horizontal drag va pan jestlaridan foydalanmoqchi bo’lsak, Incorrect GestureDetector Arguments error(xatosi)ni olamiz. Biroq, pan jestini vertikal yoki horizontal dragdan biridan foydalansak, hech qanday xatolik olmaymiz.

Agar bir vaqtning o’zida vertikal drag, horizontal drag va scale jestlaridan foydalanmoqchi bo’lsak ham, xuddi yuqoridagidek xatolikni olamiz. Biroq, agar scaleni yuqoridagidek ikklasidan bittasidan foydalansak, vertikal yoki horizontal dragdan hech qanday xatolik olmaymiz.

Endi misol ko’rib chiqaylik, ekranda bir qancha harakatlar qilib onHorizontalDragEnd qulayligan foydalanib, DragEndDetails orqali obyekt haqida tafsilotlarni olishga harakat qilib ko’raylik. details.primaryVelocity orqali foydalanuvchi obyektni qaysi o’q bo’yicha harakatlantiryotganini ko’rib olamiz.

class GesturSimple extends StatefulWidget {
  const GesturSimple({Key? key}) : super(key: key);

@override
  State<GesturSimple> createState() => _GesturSimpleState();
}

class _GesturSimpleState extends State<GesturSimple> {
  String _gestureDetected = " ";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _buildGestureDetector(),
              const Divider(color: Colors.black, height: 44.0),
            ],
          ),
        ),
      ),
    );
  }

GestureDetector _buildGestureDetector() {
    return GestureDetector(
      child: Container(
        color: Colors.lightGreen.shade100,
        width: double.infinity,
        padding: const EdgeInsets.all(24.0),
        child: Column(
          children: <Widget>[
            const Icon(Icons.access_alarm, size: 98.0),
            Text(_gestureDetected),
          ],
        ),
      ),
      onTap: () {
        debugPrint('onTap');
        _displayGestureDetected('onTap');
      },
      onDoubleTap: () {
        debugPrint('onDoubleTap');
        _displayGestureDetected('onDoubleTap');
      },
      onLongPress: () {
        debugPrint('onLongPress');
        _displayGestureDetected('onLongPress');
      },
      // onPanUpdate: (DragUpdateDetails details) {
      //   debugPrint('onPanUpdate: $details');
      //   _displayGestureDetected('onPanUpdate:\n$details');
      // },

onVerticalDragUpdate: (DragUpdateDetails details) {
        print('onVerticalDragUpdate: $details');
        _displayGestureDetected('onVerticalDragUpdate:\n$details');
      },
      onHorizontalDragUpdate: (DragUpdateDetails details) {
        print('onHorizontalDragUpdate: $details');
        _displayGestureDetected('onHorizontalDragUpdate:\n$details');
      },
      onHorizontalDragEnd: (DragEndDetails details) {
        print('onHorizontalDragEnd: $details');
        if (details.primaryVelocity! < 0) {
          print('Dragging Right to Left: ${details.velocity}');
        } else if (details.primaryVelocity! > 0) {
          print('Dragging Left to Right: ${details.velocity}');
        }
      },
    );
  }

void _displayGestureDetected(String gesture) {
    setState(() {
      _gestureDetected = gesture;
    });
  }

Keyini misolarda Draggable va Dragtarget haqida qisqacha tanishib chiqamiz.

Ushbu postlarimizda widgetlarni bir-biri bilan bog’lashni professional tarzda o’rganamiz. Ushbu ko’rinish kompozitsiya deb ham ataladi bu Flutterda mobil ilovalarini yaratishni katta qismi hisoblanadi. Odatada vertikal yoki gorizontal vidjetlardan foydalanib yoki ikkalasining kombinatsiyasidan foydalangan holda oddiy yoki murakkab UI yaratamiz.

Ushbu misolimizda sahifani ko’rinishini to’g’ri yig’ishga harakat qilib ko’ramiz. UIga muvofiq, UIni poydevorni tashkil etuvchi ketma-ketliklani qismlarini ajratamiz. Mobil qurilmalar turli o’lchamlarda bo’lganligi uchun, SingleChildScrollView foydalanamiz sababi widgetlarimiz ekranimizga sig’may qolsa scroll qilinganida ko’rinishi uchun.

Widgetlarmiz usun shaklda tushishi uchun Column widgetidan foydalanamiz. Columni birinchi widgeti sovga rasmi bo’lgani uchun Image widgetidan foydalanamiz. Textlarmiz widgetlarimiz hoshiyalardan olib qochish uchun SafeArea widgetidan foydalanamiz. Shu tarzda rasmda ko’rsatilgan widgetlarni taxlab chiqamiz.

Ob havoni ko’rsatib turgan qismini qilish uchun. Row widgetidan foydalanib uni ichini yana to’g’ri widgetlar bilan to’ldirib boramiz. Ikkita Column widgeti va SizedBox widgetini qo’shamiz. Rowni ichidagi birinchi columnda ob-havoni belgisini ko’rsatamiz. Ikkinchi Columnda ikkita Row widgetini qo’shamiz. Birinchi rowda ob-havo harorati va ma’lumotlari ko’rsatiladi. Ikkinchi Rowda ma’nzil ko’rsatiladi.

Teg widgetlaridan odatda kategoriyalarga bo’lishda yoki ko’p qidirilarigan ma’lumotlarni qidirishni osonlashtirish uchun foydalaniladi. Flutterda teg widgetlari Chip widgeti hisoblanadi, label propertysi required hisoblanadi. Unga odatda Icon yoki Image widgeti beriladi. Default holatida Chip widgeti kulrang borderli ko’rinishda bo’ladi. Chipni shape xususiyati va backgroundColor xususiyatidan foydalanib uni o’zgartirishimiz mumkin.

Ushbu loyihada teglarimiz ko’p bo’lgani tufayli uni Wrap widgetini childreniga beramiz.

Wrap widgetni qulayligi agar bizda turli uzunlikda yoki nomaʼlum sonli elementlar roʻyxati boʻlsa, ularni Wrap widgetida ishlatish juda qulay hisoblanadi u joyni qurmalaning ekraniga qarab avotmatik tarzada to’lib keyingi qatorga tushib ketaveradi.

UI ohirgi yani footer qismida yana Row widgetidan foydalanamiz, uni ichiga esa CircleAvatar widgetini joylashtiramiz va ohiridagi Iconlar uchun esa yana Column widgetidan foydalanamiz.

Bizning misolimizda asosiy qism SingleChildScrollView-ni o’z ichiga oladi, va childiga Columni oladi. So’ng ketma-ketlikda Image, SafeArea, Padding widgetlarni joylashtirib boramiz. Har bir qismni alohida ajratib olamiz masalan _buildJournalHeaderImage(), _buildJournalEntry(), _buildJournalWeather(), _buildJournalTags() va _buildJournalFooterImages().

Misolda widget daraxtini ichma-ich qilib qiyinlashtirmaslik uchun widget klasslar o‘rniga metodlardan foydalanamiz. UI maqsadi tafsilotlarni ko’rishdir va u page o’zgarishlar talab qilinmaydi, shuning uchun siz widget daraxtini qurishda metodlardan foydalansak bo’ladi. Ammo agar sahifa tashqi maʼlumotlar oʻzgarishlari asosida ekranni yangilab tursa, u holda widjet klasslardan foydalanish yaxshi yechim hisoblanishi mumkin, chunki bunda ekranning faqat oʻzgargan qismi boshqata chizadi.

Widget _buildBody() {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _buildJournalHeaderImage(),
          SafeArea(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _buildJournalEntry(),
                  const Divider(),
                  _buildJournalWeather(),
                  const Divider(),
                  _buildJournalTags(),
                  const Divider(),
                  _buildJournalFooterImages(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

Image _buildJournalHeaderImage() {
    return const Image(
      image: AssetImage('assets/images/present.jpg'),
      fit: BoxFit.cover,
    );
  }

Column _buildJournalEntry() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const <Widget>[
        Text(
          'My Birthday',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        Divider(),
        Text(
          "It s going to be a great birthday. We are going out for dinner at myfavorite place, then watch a movie after we go to the gelateria for ice cream and espresso ",
          style: TextStyle(color: Colors.black54),
        ),
      ],
    );
  }

Row _buildJournalWeather() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const <Widget>[
            Icon(
              Icons.wb_sunny,
              color: Colors.orange,
            ),
          ],
        ),
        const SizedBox(
          width: 16.0,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: const <Widget>[
                Text(
                  '81o Clear',
                  style: TextStyle(color: Colors.deepOrange),
                ),
              ],
            ),
            Row(
              children: const <Widget>[
                Text(
                  '4500 San Alpho Drive, Dallas, TX United States',
                  style: TextStyle(color: Colors.grey),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }

Wrap _buildJournalTags() {
    return Wrap(
      spacing: 8.0,
      children: List.generate(7, (int index) {
        return Chip(
          label: Text(
            'Gift ${index + 1}',
            style: const TextStyle(fontSize: 10.0),
          ),
          avatar: Icon(
            Icons.card_giftcard,
            color: Colors.blue.shade300,
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4.0),
            side: const BorderSide(color: Colors.grey),
          ),
          backgroundColor: Colors.grey.shade100,
        );
      }),
    );
  }

Row _buildJournalFooterImages() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const CircleAvatar(
          backgroundImage: AssetImage('assets/images/salmon.jpg'),
          radius: 40.0,
        ),
        const CircleAvatar(
          backgroundImage: AssetImage('assets/images/asparagus.jpg'),
          radius: 40.0,
        ),
        const CircleAvatar(
          backgroundImage: AssetImage('assets/images/strawberries.jpg'),
          radius: 40.0,
        ),
        SizedBox(
          width: 100.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: const <Widget>[
              Icon(Icons.cake),
              Icon(Icons.star_border),
              Icon(Icons.music_note),
//Icon(Icons.movie),
            ],
          ),
        ),
      ],
    );
  }

CustomScrollView widgeti listlardan tashkil topgan widgetlardan foydalanib ListView ga o’xshash scroll imkoniyatini beradi faqat unda ko’proq qulaylik va effektlar bor. Sliver — bu dasutirmizning bizaga kerak bo’lgan qismga scroll effektini beradigan qulayliklar to’plami. Oldingi postlarimizda ListView va GridView widgetlarini alohida alohida ishlatgan edik. Endi savol tug’iladi ularni bitta listda ishtishimiz kerak bo’lsa-chi?

Buning javobi esa, CustomScrollView widgetinig slivers propertysidan foydalangan holda qilishimiz mumkin. U o’zida SliverSafeArea, SliverAppBar, SliverList va SliverGrid widgetlarini ishlata oladi.

SliverList va SliverGrid sliverlari children widgetlarini ikki hil usulda yaratadi biri explicit ikkinchisi lazily. Explicitda listda avval barcha elementlarni tuzib olinadi, keyin ekranda ko’rinadi.

Lazily da esa faqat ekranda ko’rinagan elementlarni yaratadi va foydalanuvchi scroll qilsa qolgan elementlar tuziladi, natijada performance yaxshilanadi.

SliverGrid(
   delegate: SliverChildBuilderDelegate((
              BuildContext context,
              int index,
            ) {
            return const Card();
           }, 
    childCount: _rowsCount),
   gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3)),

SliverList delegate propertysiga ega, SliverGrid ham delegate va gridDelegate propertysiga ega. SliverList va SliverGrid delegate propertysi explicit listlarni yaratish uchun SliverChildListDelegate dan foydalanadi, lazily listlarni yaratish uchun SliverChildBuilderDelegate-dan foydalanamiz. SliverGrid qo’shimcha gridDelegate xususiyati plitkalarni o’lchami va joylashishiga masul bo’ladi. Belgilangan miqdorda plitkalarni yaratish uchun SliverGridDelegateWithFixedCrossAxisCount klassini gridDelegate propertysiga beramiz; SliverGridDelegateWithMaxCrossAxisExtent klassi esa GridView.extent qoidasi bilan bir xil.

SliverAppBar widgeti expandedHeight va flexibleSpace propertydan foydalib chiloryli effekt beradigan UI chiqazishi mumkin. Bunday effektni parallaks effekt ham deyishadi uni ko’rinshi backgraund da turgan rasmni sekin silliq qilib scroll qilishida.

class HomeCustomScroll extends StatelessWidget {
  const HomeCustomScroll({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.brown,
        title: const Text('CustomScrollView - Slivers'),
        elevation: 0.0,
      ),
      body: const CustomScrollView(
        slivers: <Widget>[
          SliverAppBarWidget(),
          SliverListWidget(),
          SliverGridWidget(),
        ],
      ),
    );
  }
}

Ushbu misolda CustomScrollView widgetidan foydalanib SliverAppBar, SliverList, SliverSafeArea va SliverGrid qulayliklarini ko’rib chiqaylik. SliverAppBar widgetini parallaks effektini ko’ramiz. SliverList List.generate konstruktori bilan widgetlar listini chiqazib ko’ramiz. SliverSafeArea dan foydalanib hoshiyalardan qutilamiz. SliverGriddan foydalanib plitkalarni ham chiqazamiz.

class SliverAppBarWidget extends StatelessWidget {
  const SliverAppBarWidget({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const SliverAppBar(
      backgroundColor: Colors.brown,
      forceElevated: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Parallax Effect'),
        background: Image(
          image: AssetImage('images/desk.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

class SliverListWidget extends StatelessWidget {
  const SliverListWidget({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildListDelegate(
        List.generate(3, (int index) {
          return ListTile(
            leading: CircleAvatar(
              child: Text("${index + 1}"),
              backgroundColor: Colors.lightGreen,
              foregroundColor: Colors.white,
            ),
            title: Text('Row ${index + 1}'),
            subtitle: Text('Subtitle Row ${index + 1}'),
            trailing: const Icon(Icons.star_border),
          );
        }),
      ),
    );
  }
}

class SliverGridWidget extends StatelessWidget {
  const SliverGridWidget({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SliverSafeArea(
      sliver: SliverGrid(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Card(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                const  Icon(
                    Icons.child_friendly,
                    size: 48.0,
                    color: Colors.amber,
                  ),
                  const Divider(),
                  Text('Grid ${index + 1}'),
                ],
              ),
            );
          },
          childCount: 12,
        ),
        gridDelegate:
           const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      ),
    );
  }
}

Stack widgeti bir qancha widgetlarni aralashmasidan tashkil topgan chiroyli widget chiqazish uchun ishlatiladi, ya’ni widgetlarni bir birini usitga chiqazib dizayn berish uchun. Misol uchun bizda online do’koning savatchasida biz buyurtma bergan tovarlarimiz soni turadigan widget bo’lishi mumkin.

Stack widgeti o’zida children propertysini qabul qiladi bunda default holatda widgetlarimiz joylashtirsak ustma ust joylashib boradi, huddi qog‘oz parchalarini bir-birining ustiga qo‘yib pastdan yuqoriga qarab taxlanadi.

Ammo uni pozitsiyasini Positoned widgeti orqali kerakli joyga o’zgartirsak bo’ladi. Stackdagi har bir widgetni joylashtirish Positioned widgetiga wrap qilamiz. Top, bottom, left, va right xususiyatlaridan foydalanib, har bir widgetini Stack ichida o’zgartirib boramiz. Positioned widgetining width va height propertylari ham bor.

Widgetni asosiy widgetdan qisman tashqariga chiqazish uchun FractionalTranslation klassidan ham foydalansak bo’ladi. FractionalTranslation klassini translation propertysiga Offset(dx, dy) bu widgetimizning hajmiga moslashgan bo’ladi.

Misolimizda ListView widgetidan foydalanib bir nechta Stacklarni ko’ramiz.ListView.builderni itemCount argumentiga 7 qiymatini beramiz. Har bir Stack index qiymatini juft yoki toq ekanligini tekshirib StackWidget() va StackFavoriteWidget() widget klasslarni ishlatamiz.

Buni qilishimizda maqsad biz bu orqali dasturimizga pullik reklama qo’ymoqchi bo’lsak shu tartibda qo’ysak bo’ladi yani har 10 chi listdan keyin reklama qo’ygin deb. Ushbu reklama turi odamlarni joniga tegmaydi sababi bunda biz listni scroll qilib o’tkazib yuvorsak bo’ladi, ba’zi bir reklama turlari bor, dasturdan foydalanib turgan vaqtimizda to’liq ekranni egalab oladigan reklamalar bular odamni bezor qiluvchi reklamalar turiga kiradi.

class StackWidget extends StatelessWidget {
  const StackWidget({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: const <Widget>[
        Image(
          image: AssetImage('images/tree.jpg'),
        ),
        Positioned(
          bottom: 10.0,
          left: 10.0,
          child: CircleAvatar(
            radius: 48.0,
            backgroundImage: AssetImage('images/lion.jpg'),
          ),
        ),
        Positioned(
          bottom: 16.0,
          right: 16.0,
          child: Text(
            'Lion',
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white30,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}

Stack widgeti pozitsiya berilmagan widgetlarni o’lchamiga qarab moslashib oladi. Stackda postion berilmgan widgetlardan foydalansak, avtomatik ravishda align qonuniyatlariga bo’ysinib ishlaydi (muhitga qarab Top-left yoki Top-right). Har bir Stackning ichidagi widgelar pastdan yuqoriga qarab ye’g’ilib boradi, ya’ni har bir bola widgeti bir-birining ustiga joylashib boradi.

class StackFavoriteWidget extends StatelessWidget {
  const StackFavoriteWidget({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black87,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Stack(
          children: const <Widget>[
            Image(image: AssetImage('images/dawn.jpg')),
            Positioned(
              top: 0.0,
              right: 0.0,
              child: FractionalTranslation(
                translation: Offset(0.3, -0.3),
                child: CircleAvatar(
                  radius: 24.0,
                  backgroundColor: Colors.white30,
                  child: Icon(
                    Icons.star,
                    size: 24.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: 10.0,
              right: 10.0,
              child: CircleAvatar(
                radius: 48.0,
                backgroundImage: AssetImage(
                  'images/eagle.jpg',
                ),
              ),
            ),
            Positioned(
              bottom: 16.0,
              left: 16.0,
              child: Text(
                'Bald Eagle',
                style: TextStyle(
                  fontSize: 32.0,
                  color: Colors.white30,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

GridView widgeti plitklar formatida scroll qilinadigan widget turi hisoblanadi. GridViewni GridView.count, GridView.extent va GridView.builder kabi turlari mavjud.

GridView.count va GridView.extent odatda fiks yoki kichikroq maʼlumotlar bo’lsa ishlatiladi. Odatda o‘zaro o‘qda belgilangan miqdordagi plitkalar bilan kerak bo‘lganda GridView.count dan foydalananiz. GridView.extent-dan portret rejimida ikki-uch plitka, landscape rejimida esa besh-oltita plitka mos kelishini ko’rish uchun foydalanamiz; boshqacha qilib aytganda, u ekran o‘lchamiga qarab ekrandagi plitkalarga moslashtirib boradi.

GridView.builder kattaroq, yoki nomaʼlum hajmdagi maʼlumotlar to‘plami bilan ishlayotgan vaqtda kerak bo’ladi. Agar maʼlumotlar katta to‘plamda bo‘lsa, builder faqat ko‘rinib turgan widgetlar uchun ishlap turadi, yana scroll qilsak yana widgetlarni build qiladi, bu esa performance ishlash jihatidan juda yaxshi. Qolgan xususiyatlari ListView.builderniki bilan deyarli farq qilmaydi.

GridView.count ishlatish

GridView.count crossAxisCount va children argumentlari required hisoblanadi. CrossAxisCount plitkalar nechi bo’lak bo’lishini belgilaydi, childrenda esa widgetlar listi bo’ladi. ScrollDirection argumenti o’q yo’nalishini belgilaydi Axis.vertical yoki Axis.horizontal, default holatda vertikal bo’ladi.

class HomeGridCount extends StatelessWidget {
  const HomeGridCount({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: GridView.count(
        crossAxisCount: 3,
        padding: const EdgeInsets.all(8.0),
        children: List.generate(
          7000,
          (index) {
            debugPrint('_buildGridView $index');
            return Card(
              margin: const EdgeInsets.all(8.0),
              child: InkWell(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Icon(
                      Icons.coffee,
                      //_iconList[0],
                      size: 48.0,
                      color: Colors.blue,
                    ),
                    const Divider(),
                    Text(
                      'Index $index',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 16.0,
                      ),
                    )
                  ],
                ),
                onTap: () {
                  debugPrint('Row $index');
                },
              ),
            );
          },
        ),
      )),
    );
  }
}

Children uchun, List.generate dan foydalangan holda widgetlarimizni ko’p miqdorda yaratib olamiz. children argumentida nima uchun GridView.builder foydalanmaganimizni hozir bilib olamiz. Hozir loyihani ishga tushirganimizda ma’lumotlar faqat ko’rinib turgan qismi emas balki barcha widgetlar kelib olgandan keyin chiqishini ko’rishimiz mumkin, buni debugPrint orqali kuzatib borsak bo’ladi. Shunda GridView.count barcha yozuvlar ishlanmaguncha hech qanday ma’lumot ko’rsatmay turadi hammasi kelganidan keyin ekranda widgetlarimiz payod bo’ladi. GridView.builderni faqi ham ana shunda builder bizga faqat ekranda ko’rinib turgan ma’lumotni o’zinigina ko’rsatib turadi.

GridView.extent-dan foydalanish

GridView.extent maxCrossAxisExtent va children argumentini talab qiladi ya’ni required. MaxCrossAxisExtent argumenti qurilma uchun har bir plitkaning maksimal hajmini belgilaydi. Misol uchun, portret rejimda ekranimizga ikki-uchta plitka sig’ishi mumkin, lekin landscapeda qurilmani disply o’lchamiga qarab o’zgaradi, beshta-oltita sig’ishi mumkin.

class GridExtent extends StatelessWidget {
  const GridExtent({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GridView.extent(
          maxCrossAxisExtent: 175.0,
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(8.0),
          children: List.generate(20, (index) {
            debugPrint('_buildGridViewExtent $index');
            return Card(
              margin: const EdgeInsets.all(8.0),
              child: InkWell(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Icon(
                      Icons.coffee,
                      size: 48.0,
                      color: Colors.blue,
                    ),
                    const Divider(),
                    Text(
                      'Index $index',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 16.0,
                      ),
                    )
                  ],
                ),
                onTap: () {
                  debugPrint('Row $index');
                },
              ),
            );
          }),
        ),
      ),
    );
  }
}

GridView.builder foydalanish

GridView.builder itemCount, gridDelegate va itemBuilder argumentlarini talab qiladi. itemCount widgetlarimiz soni uchun. gridDelegate SilverGridDelegate bo’lib, u necha qatorli widgetlar chiqishini belgilaydi. GridDelegate argument null bo’lishi mumkin emas; maxCrossAxisExtent o’lchamini beramiz masalan 150.0 piksel. Misol uchun, ekranda uchta plitkani ko’rsatish uchun SliverGridDelegateWithFixedCrossAxisCount klassidan foydalanamiz. Agar maksimal kengligi 150.0 piksel bo’lgan plitkalarni ko’rsatishkerak bo’lsa,SliverGridDelegateWithMaxCrossAxisExtent klassidan foydalanamiz.

class HomeGridBuilder extends StatelessWidget {
  const HomeGridBuilder({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    List<IconData> _iconList = GridIcons().getIconList();
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
          itemCount: 20,
          padding:const EdgeInsets.all(8.0),
          gridDelegate:
             const SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150.0),
          itemBuilder: (BuildContext context, int index) {
            debugPrint('_buildGridViewBuilder $index');
            return Card(
              color: Colors.lightGreen.shade50,
              margin: const EdgeInsets.all(8.0),
              child: InkWell(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      _iconList[index],
                      size: 48.0,
                      color: Colors.lightGreen,
                    ),
                  const  Divider(),
                    Text(
                      'Index $index',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 16.0,
                      ),
                    )
                  ],
                ),
                onTap: () {
                  debugPrint('Row $index');
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

Ushbu postlarimizda biz foydalanuvchilarga ma’lumotni ko’rish va tanlashda yordam beradigan scroll qilinadigan listlarni qilishni o’rganamiz. Oldingi postda standart ListViewni ko’rgan edik endi ListView.builder foydalanishni ham ko’rib olamiz. GridView widgeti bir yo’nalishda bir biriga bog’langan plitka widgetlari. Stack widgeti odatda widgetlarni bir-biriga ustiga qo’yish uchun ishlatamiz. CustomScrollView widgeti sliver widgetlari roʻyxatidan foydalanib, maxsus scroll effektlarini yaratishga imkon beradi.

Card widgeti Material Design widgetlaridan hisoblanadi sababi uni ko’rinishidan bilsak bo’ladiki u minimal dumaloqroq burchaklarsiz va soyasi bor widget. Ma’lumotlarni komponentlarga bo’lish yoki guruhlash uchun Card widgeti UI uchun chiroyli yechim hisoblanadi. Card widgetni elevation, shape, color, margin va yana bir qancha propertylarga ega. Elevation double qiymatni oladi, qiymat qanchalik katta bo’lsa, soya ham shunchalik katta bo’ladi. Card widgetining shakli va borderlarni sozlash uchun shape propertysida o’zgartirishlar kiritamz. Misol uchun: StadiumBorder, UnderlineInputBorder, OutlineInputBorder va boshqalar.

ListView.builder ham standart ListView kabi scroll qilinadidan widget hisoblanadi farqi esa katta ma’lumotlar to’plami bilan ishlaydigan bo’lsak builderdan foydalanishimizda va yana asosiy farqi u fqurilamda ko’rinib turgan widgetlar uchun ishlaydi, ya’ni 20 ta rasmdan iborat widgetimiz bo’lsin ekranda esa 5ta rasm sig’sa faqat 5 ta uchun ishlaydi scroll qilsak qolgan qismi uchun build qiladi. itemBuilder esa bizga child widgetlarimizni yasash uchun kerak bo’ladi. itemBuilder faqat itemCount argumenti noldan katta bo’lsa ishlaydi. itemCount o’zi esa bizda qancha ma’lumot borligni indexlab turadi. Bundan tashqari ScrollDirection argumenti default holatda Axis.vertical da bo’ladi, uni Axis.horizontal ga o’zgartirishimiz mumkin, shunda obyektlarimiz gorizontal yo’nalishda scroll bo’ladi. ListTile widgeti odatda ListView widgeti bilan ham ishlatilinadi. Asosiy propertylari leading, trailing, title va subtitle,va yana boshqalari ham bor. Bundan tashqari, foydalanuvchi harakatni amalga oshirish uchun onTap va onLongPress qulayliklari ham bor. Bunda foydalanuvchi ListTile-ga teginganida biron bir sahifaga o’tadi yoki alertdilaog ochiladi. Odatda leading va trailing propertylariga icon widgeti beriladi ammo bu required emas istalgan widgetimizni bersak bo’ladi.

Card(
  child: ListTile(
    leading: Icon(Icons.flight),
    title: Text('Airplane $index'),
    subtitle: Text('Very Cool'),
    trailing: Text('${index * 7}%'),
    onTap: ()=> print('Tapped on Row $index'),
  ),
);

ListTile(
  leading: Icon(Icons.directions_car),
  title: Text('Car $index'),
  subtitle: Text('Very Cool'),
  trailing: Icon(Icons.bookmark),
  onTap: ()=> print('Tapped on Row $index'),
);

Rasmda ko’rinib turganidek birinchi uchta ListTileni leading propertyisda icon turibti, trailingda esa Text widgeti foizlarni ko’rsatib turibdi. Qolgan ListTilelarda esa leading va trailingda iconlar turibti. Title sa subtitle nima ekanligni rasmga qarab tushunib olgan bo’lsangiz kerak.

Har xil turdagi widgetlarni qanday qo’shish uchun ozgina mantiq operatorlardan foydalanamiz. Misol uchun index teng bo’lsa 0 ga boshqa turdagi widgetni ko’rsat agar 1 ga teng bo’lsa boshqasini shu tartibda kodimizni kiritib olamiz. ItemBuilder-dagi index vazifasi har bir index uchun unique bolgan widgetni tuzishdan iborat.

class HeaderWidget extends StatelessWidget {
  const HeaderWidget({
    Key? key,
    required this.index,
  }) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      height: 120.0,
      child: Card(
        elevation: 8.0,
        color: Colors.white,
//shape: StadiumBorder(),
//shape: UnderlineInputBorder(borderSide: BorderSide(color: Colors.deepOrange)),
//shape: OutlineInputBorder(borderSide: BorderSide(color:
//Colors.deepOrange.withOpacity(0.5)),),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'Barista',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 48.0,
                color: Colors.orange,
              ),
            ),
            Text(
              'Travel Plans',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

class RowWithCardWidget extends StatelessWidget {
  const RowWithCardWidget({
    Key? key,
    required this.index,
  }) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: const Icon(
          Icons.flight,
          size: 48.0,
          color: Colors.lightBlue,
        ),
        title: Text('Airplane $index'),
        subtitle: const Text('Very Cool'),
        trailing: Text(
          '${index * 7}%',
          style: const TextStyle(color: Colors.lightBlue),
        ),
//selected: true,
        onTap: () {
          debugPrint('Tapped on Row $index');
        },
      ),
    );
  }
}

class RowWidget extends StatelessWidget {
  const RowWidget({
    Key? key,
    required this.index,
  }) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: const Icon(
        Icons.directions_car,
        size: 48.0,
        color: Colors.lightGreen,
      ),
      title: Text('Car $index'),
      subtitle: const Text('Very Cool'),
      trailing: (index % 3).isEven
          ? const Icon(Icons.bookmark_border)
          : const Icon(Icons.bookmark),
      selected: false,
      onTap: () {
        debugPrint('Tapped on Row $index');
      },
    );
  }
}

Nima uchun ushbu navigatsiya postlarida ListView widgetni endi ishlatayotganimizni sababi bor edi. Sababi Drawer widgeti bir qancha listlardan tashkil topgan bo’ladi. Va aynan shu listlar orqali ListViewni bilib olsak onsonroq bo’ladi. ListView widgetlari roʻyxatdagi elementlarni tanlash uchun ko’p ishlatiladi, misol uchun Detail sahifaga o’tishga o’xshagan holatlarda.

Drawer — Scaffold widgetining qulayligi, odatda qurilma ekranining chap yoki o’ng chetidan gorizontal ravishda chiqib keladigan yarim ekranli dialog desa ham bo’ladi, u Material design paneli hisoblanadi sababi bu qulaylik android qurilmalarida ko’rishimiz mumkin ios esa kamdan kam holatda ko’ramiz. Drawer Scaffoldni tortmasi deb ham atasak bo’ladi uni chapdan chiqazish uchun drawer deb yozsak chap tarafdan chiqazadi, endDrawer deb yozsak o’ng tarafdan chiqazadi. Drawerni o’zimiz istalgancha ehtiyojimizdan kelib chiqib sozlanishimiz mumkin, lekin odatda foydalanuvchi rasmi va ma’lumotlari yoki sozlamalar qismidan foydalanamiz.

Drawer ga header berish uchun bizda ikkita variant mavjud: UserAccountsDrawerHeader yoki DrawerHeader. UserAccountsDrawerHeader currentAccountPicture, accountName, accountEmail, otherAccountsPictures va decoration xususiyatlarini olgan bu foydalanuvchi maʼlumotlarini koʻrsatish uchun moʻljallangan.

DrawerHeader esa padding, child, decoration va boshqa xususiyatlarni o’z ichiga oladi, umumiy yoki moslashtirilgan ma’lumotlar uchun ishlatiladi.

Misolimizda Scaffoldning drawer va endDrawer xususiyatini ko’rishimiz mumkin. Drawer va endDrawer dan foydalanganimizda TextDirection.ltr ) yoki TextDirection.rtl qulayligni shu yerda nima uchun kerakligini bilib olamiz. UserAccountsDrawerHeaderni (chap tomon) xususiyati uchun ya’ni drawerga va DrawerHeader esa endDrawer (o’ng tomon) xususiyatiga beragnimiz ko’rinib turibdi.

Ushbu misolda Scaffoldning drawer va endDrawer xususiyatini ko’rishimiz mumkin. Drawer va endDrawer dan foydalanganimizda TextDirection.ltr ) yoki TextDirection.rtl qulayligni shu yerda nima uchun kerakligini bilib olamiz. UserAccountsDrawerHeaderni (chap tomon) xususiyati uchun ya’ni drawerga va DrawerHeader esa endDrawer (o’ng tomon) xususiyatiga beragnimiz ko’rinib turibdi.

class MenuListTile extends StatelessWidget {
  const MenuListTile({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListTile(
          leading: const Icon(Icons.cake),
          title: const Text('Birthdays'),
          onTap: () {
            Navigator.pop(context);
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const Birthdays(),
              ),
            );
          },
        ),
        ListTile(
          leading: const Icon(Icons.sentiment_satisfied),
          title: const Text('Gratitude'),
          onTap: () {
            Navigator.pop(context);
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const Gratitude(),
              ),
            );
          },
        ),
        ListTile(
          leading: const Icon(Icons.alarm),
          title: const Text('Reminders'),
          onTap: () {
            Navigator.pop(context);
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const Reminders(),
              ),
            );
          },
        ),
        const Divider(color: Colors.grey),
        ListTile(
          leading: const Icon(Icons.settings),
          title: const Text('Setting'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    );
  }
}

Birthdays, Reminders, Gratitude sahifalarini avvalgi postlarimizda kiritb olgan edik, bu safar ham misol tariqasida yana o’sha sahifalardan foydalangan holda misolmizni ishlaymiz.

class LeftDrawer extends StatelessWidget {
  const LeftDrawer({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          UserAccountsDrawerHeader(
              currentAccountPicture: Icon(
                Icons.face,
                size: 48.0,
                color: Colors.white,
              ),
              accountName: Text('Amir Temur'),
              accountEmail: Text('temur.temuchin@domainname.com'),
              otherAccountsPictures: <Widget>[
                Icon(
                  Icons.bookmark_border,
                  color: Colors.white,
                )
              ],
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('images/home_top_mountain.jpg'),
                  fit: BoxFit.cover,
                ),
              )),
          MenuListTile(),
        ],
      ),
    );
  }
}

class RightDrawerWidget extends StatelessWidget {
  const RightDrawerWidget({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          DrawerHeader(
            padding: EdgeInsets.zero,
            child: Icon(
              Icons.face,
              size: 128.0,
              color: Colors.white54,
            ),
            decoration: BoxDecoration(color: Colors.blue),
          ),
          MenuListTile(),
        ],
      ),
    );
  }
}

Menyu elementlari list uchun o’zimiz yasab olgan MenuListTile() widget klassidan foydalandik. Bu widget klassimiz menyu listni yaratish uchun ListTile-dan foydalanildi. ListTile widgetiga leading propertysiga Icon, title esa text berdik va onTap xususiyati uchun esa Drawerni yopish uchun Navigator.pop() ni va tanlangan sahifaga o’tish uchun Navigator.push() ni ishlatdik. Ushbu ilova widget klasslaridan unumli foydalanishni va qanday qilib qayta foydalanishni o’rgangan bo’ldik.

TabBar widgeti gorizontal qatorlar vkladkar (yorliqlarni) ko’rsatadigan Material Design widgeti hisoblanadi.TabBarnni bir qancha propertylari bor ulardan asosiysi, tabs xususiyati Widgetlar listni oladi va Tab widgetidan foydalangan holda vkladkalarni qoʻshib boramiz. Tab widgetidan foydalanishdan tashqari Flutter tomonidan berilgan widgetlardan foydalansak ham bo’laveradi. BottomNavigationBar kabi tanlagan vkladkamiz default holatida pastki chizig’i bilan belgilanadi.

TabBarView widgeti odatda TabBar widgeti bilan birgalikda ishlatiladi ya’ni biz vkladkani tanlasak TabBarView tanlangan vkladkadagi sahifaga o’tkazadi. Foydalanuvchilar kontentni o‘zgartirish uchun chapga yoki o‘ngga surishlari yoki har bir vkladkani bosishlari mumkin.

TabBar va TabBarView widgetlari TabController-ning controller qulayligidan foydalanadi. TabController TabBar va TabBarView o’rtasida vkladkalarni tanlovlarini sinxronlashtirish uchun javobgar. TabController vkladkalar tanlovlarini sinxronlashtirganligi sababli, klassimizga
SingleTickerProviderStateMixinni e’lon qilishimiz kerak. Animatsiyani iloji boricha silliq bo’lishi uchun foydalanishimizni avvalgi postlarimizda aytib o’tgan edik.

Bu misolda TabBar widgetini bottomNavigationBar bilan ishlatamiz. Bunda TabBar-ni ekranning pastki qismida joylashadi, lekin uni AppBarga yoki istalgan boshqa joyda ham joylashtirib foydalanishimiz mumkin.

Ushbu misolimizda uchta alohida sahifadan iborat TabBarView kiritamiz. BottomNavigationBar loyihasidagi kabi uchta bir hil sahifani ishlatamiz.
TabController typeda _tabController o’zgaruvchisini kiritib olamiz. _tabControllerni ishlatish uchun initState() metodidan foydalanamiz vsync argumentiga this qiymatni va length qiymatga 3 beramiz sahifamiz 3 ta bo’lgani uchun. Length tablar sonini bildiradi biz nechi sonini kiritsak shuncha tabni ko’rishimiz mumkin bo’ladi. Tablardagi o’zgarishlarni bilib turish uchun addListenerdan foydalanamiz, u doimo _tabControllerdagi o’zgarishlarni tinglab poylab turadi. Boshqa sahifada backgrounda _tabController ishlashini to’xtatish uchun dispose() metodidan foydalanamiz.

class HomeTabs extends StatefulWidget {
  const HomeTabs({Key? key}) : super(key: key);

@override
  _HomeTabsState createState() => _HomeTabsState();
}

class _HomeTabsState extends State<HomeTabs>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
    _tabController!.addListener(_tabChanged);
  }

@override
  void dispose() {
    super.dispose();
    _tabController!.dispose();
  }

void _tabChanged() {
    if (_tabController!.indexIsChanging) {
      debugPrint('tabChanged: ${_tabController!.index}');
    }
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: TabBarView(
          controller: _tabController,
          children: const [
            Birthdays(),
            Gratitude(),
            Reminders(),
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        child: TabBar(
          controller: _tabController,
          //label color va  unselectedLabelColor farqiga borish uchun
          //amaliyotda ko'proq boshqa ranglarda foydalanib ko'ring
          //shunda to'liq farqiga borshingiz oson bo'ladi
          labelColor: Colors.black54,
          unselectedLabelColor: Colors.black38,
          tabs: const [
            Tab(
              icon: Icon(Icons.cake),
              text: 'Birthdays',
            ),
            Tab(
              icon: Icon(Icons.sentiment_satisfied),
              text: 'Gratitude',
            ),
            Tab(
              icon: Icon(Icons.access_alarm),
              text: 'Reminders',
            ),
          ],
        ),
      ),
    );
  }
}

TabBar va TabBarView birgalikda ishlatilsa, sahifalar avtomatik ravishda bir birga bog’langan bo’ladi. Foydalanuvchi TabBarView-ni chapga yoki o’ngga sursa, sahifa ham o’zgaradi. Qaysi sahifa qaysi vkladkaga tegishli ekanini bilish uchun TabControllerdan foydalandik, bu TabBar va TabBarView o’rtasida bog’liqlikni sinxronlashtiradi. TabBar va TabBarView ikkalasi ham bitta TabController-dan foydalanadi. TabController vsync argumenti va length argumentlari orqali ishga tushadi. Tabda oʻzgarishlarini tinglash uchun TabController addListenerga qoʻshilgan. Buni biz bir vkladkadan ikkinchisiga o’tayotgada birinchi sahifadagi o’zgrishlarni saqlab qolish yoki o’chirib yuborish uchun ishlatishimiz mumkin bo’ladi.