skip to Main Content

///grid view builder, In this section I want to expand the grid view height as the available space for different size of phone height increase and other items height remains fixed but Expanded widget isn’t working, making whole ui blank. Please suggest me how I can make my grid view expandable as the height vary. Thanks in advance. Please see my whole code below in which I am using. I tried multiple solutions but didn’t worked.

  1. Drawer

  2. AppBar

  3. Body – Slider, List-View, Grid-View

  4. BottomNavigationBar

     @override
       Widget build(BuildContext context) {
        Size size = MediaQuery.of(context).size;
        return Scaffold(
           drawer: DrawerMenu(),
           appBar: PostHomeAppBar(appBar: AppBar()),
           body: Stack(
            children: [
             Container(
              height: double.infinity,
              width: double.infinity,
              decoration: const BoxDecoration(
             image: DecorationImage(
                 image: AssetImage("lib/assets/asset/bg-original (1).png"),
                 fit: BoxFit.cover)),
              child: Column(
               children: [
                Column(
                 children: [
                 ///slider
                 Container(
                   height: size.height * 0.25,
                   width: double.infinity,
                   child: MySlider(),
                 ),
    
                 const SizedBox(
                   height: 5,
                 ),
    
                 ///list view builder
                 Container(
                   height: 55,
                   child: ListView.builder(
                       scrollDirection: Axis.horizontal,
                       itemCount: _homePageController
                               .getGameCategorylist?.data?.length ??
                           0,
                       itemBuilder: (BuildContext context, int index) {
                         bool isSelected = _selectedTabIndex == index;
                         return Obx(
                           () => (_homePageController.isLoading.value)
                               ? const Center(child: Loader())
                               : _homePageController
                                           .getGameCategorylist!.data ==
                                       null
                                   ? const Center(
                                       child: Text(''),
                                     )
                                   : Padding(
                                       padding: const EdgeInsets.only(
                                           left: 2,
                                           right: 2,
                                           top: 4,
                                           bottom: 8),
                                       child: GestureDetector(
                                         onTap: () {
                                           _onTappedItem(index);
                                         },
                                         child: FittedBox(
                                           child: Container(
                                             padding: const EdgeInsets.only(
                                                 left: 10, right: 10),
                                             decoration: BoxDecoration(
                                               color: isSelected
                                                   ? AppColors.golden
                                                   : null,
                                               gradient: isSelected
                                                   ? null
                                                   : const LinearGradient(
                                                       colors: [
                                                         Color(0xff1e1b53),
                                                         Color(0xff444185)
                                                       ],
                                                       begin: Alignment
                                                           .topCenter,
                                                       end: Alignment
                                                           .bottomCenter,
                                                     ),
                                               borderRadius:
                                                   BorderRadius.circular(30),
                                             ),
                                             child: Column(children: [
                                               SizedBox(
                                                 height: size.height * 0.01,
                                               ),
                                               Text(
                                                 _homePageController
                                                     .getGameCategorylist!
                                                     .data![index]
                                                     .lobbyCat
                                                     .toString(),
                                                 textAlign: TextAlign.center,
                                                 style: const TextStyle(
                                                     fontWeight:
                                                         FontWeight.w400,
                                                     color: Colors.white,
                                                     fontFamily: 'Roboto',
                                                     fontSize: 8),
                                               ),
                                               Text(
                                                 '(${_homePageController.getGameCategorylist!.data![index].length.toString()})',
                                                 textAlign: TextAlign.center,
                                                 style: const TextStyle(
                                                     fontWeight:
                                                         FontWeight.w400,
                                                     color: Colors.white,
                                                     fontFamily: 'Roboto',
                                                     fontSize: 8),
                                               ),
                                               SizedBox(
                                                 height: size.height * 0.005,
                                               ),
                                             ]),
                                           ),
                                         ),
                                       ),
                                     ),
                         );
                       }),
                 ),
    
                 ///grid view builder
                 Expanded(
                   child: GridView.builder(
                     padding: EdgeInsets.zero,
                     gridDelegate:
                         const SliverGridDelegateWithFixedCrossAxisCount(
                       crossAxisCount: 2,
                       crossAxisSpacing: 2,
                       mainAxisSpacing: 2,
                       mainAxisExtent: 120,
                     ),
                     itemCount: casinoGameList?.data?.length ?? 0,
                     itemBuilder: (BuildContext context, int index) {
                       return Obx(() => (_homePageController.isLoading.value)
                           ? const Center(child: Loader())
                           : casinoGameList?.data == null
                               ? const Center(
                                   child: Text(''),
                                 )
                               : GestureDetector(
                                   onTap: () {
                                     final gameData =
                                         casinoGameList?.data?[index];
                                     Get.to(() =>
                                         WebViewHome(gameData ?? Datum()));
                                   },
                                   child: Padding(
                                     padding: const EdgeInsets.all(4.0),
                                     child: Container(
                                       alignment: Alignment.center,
                                       decoration: BoxDecoration(
                                         borderRadius:
                                             BorderRadius.circular(10),
                                         image: DecorationImage(
                                           image: NetworkImage(base +
                                               '${casinoGameList?.data?[index].imgSrc.toString()}'),
                                           fit: BoxFit.cover,
                                         ),
                                       ),
                                     ),
                                   ),
                                 ));
                     },
                   ),
                 ),
               ],
             ),
           ],
         ),
       ),
       if (_isLoading)
         Padding(
           padding: EdgeInsets.only(top: 200),
           child: const Positioned.fill(
             child: Loader(),
           ),
         ),
      ],
      ),
      bottomNavigationBar: BottomNavigationBar(
       backgroundColor: const Color(0xff140b36),
       currentIndex: _currentIndex,
       onTap: (int index) {
       setState(() {
         _currentIndex = index;
       });
     },
     selectedItemColor: Colors.amber,
     unselectedItemColor: Colors.grey,
     type: BottomNavigationBarType.fixed,
     items: [
       BottomNavigationBarItem(
         icon: GestureDetector(
           onTap: () {
             Get.to(() => Home_Post_Login());
           },
           child: Image.asset('lib/assets/asset/icon_home_fill.png',
               color: _currentIndex == 0 ? Colors.amber : Colors.white,
               height: 20),
         ),
         label: 'HOME',
       ),
       BottomNavigationBarItem(
         icon: GestureDetector(
           onTap: () {
             Get.to(() => Login_Screen());
           },
           child: Image.asset('lib/assets/asset/icon_games.png',
               color: _currentIndex == 1 ? Colors.amber : Colors.white,
               height: 20),
         ),
         label: 'PROVIDERS',
       ),
       BottomNavigationBarItem(
         icon: GestureDetector(
           onTap: () {
             Get.to(() => WebViewHome(Datum(gameTypeUnified: 'game_shows')));
           },
           child: Image.asset('lib/assets/asset/icon_game_show.png',
               color: _currentIndex == 2 ? Colors.amber : Colors.white,
               height: 20),
         ),
         label: 'GAME SHOWS',
       ),
       BottomNavigationBarItem(
         icon: GestureDetector(
           onTap: () {
             Get.to(() => Profile());
           },
           child: Image.asset('lib/assets/asset/icon_user.png',
               color: _currentIndex == 3 ? Colors.amber : Colors.white,
               height: 20),
         ),
         label: 'MY ACCOUNT',
       ),
      ],
      ),
     );
    }
    

3

Answers


  1. I think the error is because of that your gridView items do not have a bounded height, try to give them a height and see if it works or not

    Login or Signup to reply.
  2. use shrinkWrap: true property for GridView and remove the parent widget Expanded.

    Login or Signup to reply.
  3. I noticed you are using two columns unnecessarily
    here

    image: DecorationImage(
                 image: AssetImage("lib/assets/asset/bg-original (1).png"),
                 fit: BoxFit.cover)),
              child: Column(
               children: [
                Column(
                 children: [
                 ///slider
    

    It seems that Expanded is having trouble determining its size because the inner column does not have a size of its own. To address this issue, you have two options:

    1. You can remove one of the columns if you don’t require it.
    2. Alternatively, you can wrap the inner column with Expanded if you truly need both columns.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search