///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.
-
Drawer
-
AppBar
-
Body – Slider, List-View, Grid-View
-
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
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
use
shrinkWrap: trueproperty for GridView and remove the parent widget Expanded.I noticed you are using two columns unnecessarily
here
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: