in my code I use from GrideView.count but it dos not scroll, I wrap entire column with Expanded widget it works but in release mode it shows a gray window and got error. please help me it takes my hours but not solve yet.
A RenderFlex overflowed by 178 pixels on the bottom.
import 'package:doctor_yab/app/theme/AppColors.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../components/buildStroy.dart';
import '../../../components/searchAndFilterBox.dart';
import '../../../routes/app_pages.dart';
import '../../home/controllers/tab_home_main_controller.dart';
class NavigationBarNewF extends GetView<TabHomeMainController> {
const NavigationBarNewF({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
buildStroies(controller: controller),
Container(),
],
),
searchAndFilterBox(
name: 'Mohammad Nabi HassanZada',
subject: 'Doctor',
onPressed: () {}),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: ShapeDecoration(
color: Color(0xFFEBEDFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.arrow_back,
size: 24,
color: AppColors.primary,
),
Text(
'Navigation',
style: TextStyle(
color: Color(0xFF333E92),
fontSize: 14,
fontFamily: 'Poppins',
fontWeight: FontWeight.w600,
),
),
Icon(
Icons.cancel_outlined,
size: 24,
color: AppColors.primary,
),
],
).paddingSymmetric(vertical: 12, horizontal: 15),
// Grid view
Expanded(
child: GridView.count(
physics: ScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
children: [
_customCart(
title: 'Drag Database',
color: 0xFFFFF0EC,
image: 'assets/png/Pills.png',
onTap: () {
Get.toNamed(Routes.Drugs_Database);
}),
_customCart(
title: 'Disease and Treatment',
color: 0xFFF0FFEC,
image: 'assets/png/hansaplas.png',
onTap: () {
Get.toNamed(Routes.All_Dieases_Treatment);
}),
_customCart(
onTap: () {
Get.toNamed(Routes.Blood_Donation);
},
title: 'Blood Donation',
color: 0xFFFFE2E1,
image: 'assets/png/Pills.png'),
_customCart(
onTap: () {
Get.toNamed(Routes.Treatment_Abroad);
},
title: 'Treatment Abroad',
color: 0xFFB6E9FF,
image: 'assets/png/airplane 1.png'),
_customCart(
onTap: () {
Get.toNamed(Routes.Pregnancy_Tracker);
},
title: 'Pregnancy Tracker',
color: 0xFFECFDFF,
image: 'assets/png/OBJECTS.png'),
_customCart(
onTap: () {
Get.toNamed(Routes.Checkup_List);
},
title: 'Checkup Packages',
color: 0xFFFFF6D6,
image: 'assets/png/microskop.png'),
],
).paddingOnly(bottom: 30, right: 20, left: 20, top: 8),
)
],
),
).paddingSymmetric(horizontal: 20)
]));
}
Widget _customCart({title, image, color, onTap}) {
return InkWell(
onTap: onTap,
child: Container(
width: 150,
height: 150,
decoration: ShapeDecoration(
color: Colors.white,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
child: Column(
children: [
SizedBox(
height: 10,
),
Container(
width: 130,
height: 95,
decoration: ShapeDecoration(
color: Color(color),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
),
child: Image.asset(image),
),
SizedBox(
height: 10,
),
SizedBox(
width: 77,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF3F3F3F),
fontSize: 12,
fontWeight: FontWeight.w600,
height: 0.97,
),
),
)
],
),
),
);
}
}
in my code i use from GrideView.count but it dos not scroll, I wrap entire column with Expanded widget it works but in release mode it shows a gray window and got error. please help me it takes my hours but not solve yet.
this is my code:
import 'package:doctor_yab/app/theme/AppColors.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../components/buildStroy.dart';
import '../../../components/searchAndFilterBox.dart';
import '../../../routes/app_pages.dart';
import '../../home/controllers/tab_home_main_controller.dart';
class NavigationBarNewF extends GetView<TabHomeMainController> {
const NavigationBarNewF({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
buildStroies(controller: controller),
Container(),
],
),
searchAndFilterBox(
name: 'Mohammad Nabi HassanZada',
subject: 'Doctor',
onPressed: () {}),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: ShapeDecoration(
color: Color(0xFFEBEDFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.arrow_back,
size: 24,
color: AppColors.primary,
),
Text(
'Navigation',
style: TextStyle(
color: Color(0xFF333E92),
fontSize: 14,
fontFamily: 'Poppins',
fontWeight: FontWeight.w600,
),
),
Icon(
Icons.cancel_outlined,
size: 24,
color: AppColors.primary,
),
],
).paddingSymmetric(vertical: 12, horizontal: 15),
// Grid view
Expanded(
child: GridView.count(
physics: ScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
children: [
_customCart(
title: 'Drag Database',
color: 0xFFFFF0EC,
image: 'assets/png/Pills.png',
onTap: () {
Get.toNamed(Routes.Drugs_Database);
}),
_customCart(
title: 'Disease and Treatment',
color: 0xFFF0FFEC,
image: 'assets/png/hansaplas.png',
onTap: () {
Get.toNamed(Routes.All_Dieases_Treatment);
}),
_customCart(
onTap: () {
Get.toNamed(Routes.Blood_Donation);
},
title: 'Blood Donation',
color: 0xFFFFE2E1,
image: 'assets/png/Pills.png'),
_customCart(
onTap: () {
Get.toNamed(Routes.Treatment_Abroad);
},
title: 'Treatment Abroad',
color: 0xFFB6E9FF,
image: 'assets/png/airplane 1.png'),
_customCart(
onTap: () {
Get.toNamed(Routes.Pregnancy_Tracker);
},
title: 'Pregnancy Tracker',
color: 0xFFECFDFF,
image: 'assets/png/OBJECTS.png'),
_customCart(
onTap: () {
Get.toNamed(Routes.Checkup_List);
},
title: 'Checkup Packages',
color: 0xFFFFF6D6,
image: 'assets/png/microskop.png'),
],
).paddingOnly(bottom: 30, right: 20, left: 20, top: 8),
)
],
),
).paddingSymmetric(horizontal: 20)
]));
}
Widget _customCart({title, image, color, onTap}) {
return InkWell(
onTap: onTap,
child: Container(
width: 150,
height: 150,
decoration: ShapeDecoration(
color: Colors.white,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
child: Column(
children: [
SizedBox(
height: 10,
),
Container(
width: 130,
height: 95,
decoration: ShapeDecoration(
color: Color(color),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
),
child: Image.asset(image),
),
SizedBox(
height: 10,
),
SizedBox(
width: 77,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF3F3F3F),
fontSize: 12,
fontWeight: FontWeight.w600,
height: 0.97,
),
),
)
],
),
),
);
}
}
4
Answers
Put the
SingleChildScrollViewwidget as a parent of theColumnwidget.Wrap your Column in a
SingleChildScrollViewand make sure thatshrinkwrapis set totrueinside your GridView.Try removing the Expanded and adding SingleChildScrollView();
SingleChildScrollView
By adding the expanded does not mean that it is scrollable instead it means to render in the whole available space in the screen.
As I commented, It should be in this way: