How make something fixed position during scroll in Flutter - flutter

Question

I'm up to making a screen like on the pic
I'd like to add scroll for gridview, but the trouble now is I don't really understand how to achieve that.
When I wrap Grid with SingleChildGridView, I've got an error that bottom overflowed. Example is on the second screen:
Obviously, it's happening as the GridView is a part of Column which causes the error. But how can I find a wayaround to avoid wrapping the column with let's say singlechildscrollview and at the same time making scrollable only GridView ?
Here is my code:
Scaffold(
appBar: HomeAppBar(),
bottomNavigationBar: CustomNavBar(),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hemendra',
style: Theme.of(context).textTheme.displaySmall
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Welcome to Laza.',
style: Theme.of(context).textTheme.bodyMedium
),
),
Searchbox(),
BlocBuilder<ProductBloc, ProductState>(
builder: (context, state) {
if (state is ProductLoaded) {
return Padding(
padding: const EdgeInsets.only(top: 15.0),
child: SingleChildScrollView(
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
mainAxisExtent: 300,
crossAxisCount: 2,
),
itemCount: state.products.length,
itemBuilder: (BuildContext ctx, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Stack(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<ProductDetailsBloc>(
context)
.add(ProductDetailsEvent(
state.products[index]));
Navigator.pushNamed(
context, '/product_details');
},
child: Container(
height: 240,
child: Image.network(
state.products[index].imageUrl, fit: BoxFit.fill,),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
icon: Image(
image: AssetImage('heart.png'),
),
onPressed: () {},
),
],
),
],
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
children: [
Expanded(
child: Text(
maxLines: 2,
state.products[index].name,
style: Theme.of(context).textTheme.bodySmall
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
maxLines: 2,
"\$" +
state.products[index].price
.toString(),
style: TextStyle(
color: HexColor('1D1E20'),
fontWeight: FontWeight.w600),
),
],
))
],
),
],
);
},
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
)
],
),
),
);
}
}

Answer 1

remove SingleChildScrollView and warp you BlocBuilder with Expanded widget .
so you code widget inside Scaffold body like this
Column(
children: [
searchBox(),
SizedBox(height:70, child: horizontalBrandList()),
Expanded(child: BlocBuilder(...))
],
)
created code similar UI code for better understanding update your code accordingly:
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//SEARCH BAR
const TextField(decoration: InputDecoration(hintText: "Search")),
const SizedBox(height: 12),
// HORIZONTAL LIST VIEW
SizedBox(
height: 50,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(
10,
(i) => Container(
width: 50,
color: Colors.accents[i % 16],
alignment: Alignment.center,
child: Text('$i'),
),
),
),
),
const SizedBox(height: 12),
// GRID LISTVIEW
Expanded(
child: GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: MediaQuery.of(context).size.width * 0.5,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: 20,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Center(child: Text(index.toString())),
);
},
),
)
],
),
)
You are adding ListView inside Column so You need to wrap with with Expanded Widget. in ListView contains own ScrollController so no need to wrap it with external SingleChildScrollView