I am having trouble getting my GridView.builder to scroll with the two widgets above it at the same time. I only want the search bar to remain on the screen when I am scrolling. The only way I have managed to hack it is by using a SizedBox but I want it to fill up whatever mobile device it is on.
Any help would be appreciated. I have marked the point I want it to scroll from in the code in capital letters.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import '../widgets.dart/search_results_chip.dart';
class ItemSearchResults extends StatelessWidget {
const ItemSearchResults({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
children: [
//search bar
Row(
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.arrow_back),
),
Expanded(
child: TextField(
decoration: InputDecoration(
isCollapsed: true,
prefixIcon: const Icon(Icons.category),
suffixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30))),
),
),
IconButton(
onPressed: () {}, icon: const Icon(Icons.filter_alt_outlined))
],
),
SizedBox(
height: 6,
),
//search results
//SCROLL FROM HERE
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Container(
padding: const EdgeInsets.all(8),
height: 60,
child: ListView(
scrollDirection: Axis.horizontal,
children: const [
SearchResultsChip(
title: 'Free Delivery', showDropDown: false),
SearchResultsChip(
title: 'Price',
showDropDown: true,
),
SearchResultsChip(
title: 'Estimated Delivery', showDropDown: true)
],
),
),
//sort by
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
),
child: Row(
children: [
Text(
'Relevance',
style: TextStyle(color: Colors.white),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.sort,
color: Colors.white,
),
),
],
),
),
//Search Results
Expanded(
child: GridView.builder(
itemCount: 10,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisSpacing: 4),
itemBuilder: (context, index) {
return Column(
children: [
Expanded(
child: Container(
height: 150,
child: Image(
height: 150,
fit: BoxFit.cover,
image: NetworkImage(
'https://images.unsplash.com/photo-1633435597643-601bb3efc197?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGVwb3h5JTIwdGFibGV8ZW58MHx8MHx8fDA%3D')),
),
)
],
);
}),
)
],
),
),
)
],
));
}
}
Wrap your GridView.builder
with SizedBox
instead of Expanded
//Search Results
SizedBox(
child: GridView.builder(),
),