In the gif you can see the problem of the scroll, how can I solve to make the scoll work?
I tried to make the scroll unique but with poor results, any changes I make give me a "HasSize" error.
AnnunciBox() is a simple container with text image.
Here is the example GIF:
Image
Here is the code:
return Scaffold(
body: Container(
padding: const EdgeInsets.all(20),
child: ScrollConfiguration(
behavior: CustomScroll(),
child: CustomScrollView(
slivers: [
SliverAppBar(
titleSpacing: 0,
backgroundColor: background,
floating: true,
pinned: true,
snap: false,
centerTitle: false,
elevation: 0,
title: Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(top: 20, bottom: 20),
child: const Text(
'Teso esempio',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 28,
color: primaryRed,
fontFamily: 'Proxima'),
),
),
bottom: AppBar(
titleSpacing: 0,
elevation: 0,
backgroundColor: background,
toolbarHeight: 70,
title: Row(
children: [
Expanded(
child: Container(
padding: const EdgeInsets.only(right: 10),
child: TextFormField(
onTap: () async {
// should show search screen here
showSearch(
context: context,
// we haven't created AddressSearch class
// this should be extending SearchDelegate
delegate: Cerca(),
);
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: border,
),
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 1, color: Colors.red),
borderRadius: BorderRadius.circular(10),
),
labelText: 'Cerca l\'oggetto',
prefixIcon: const Icon(Icons.search),
),
),
),
),
SizedBox.fromSize(
size: const Size(50, 50),
child: Material(
borderRadius:
const BorderRadius.all(Radius.circular(10)),
color: primaryRed,
child: InkWell(
splashColor: secondaryOrange,
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Image(
image: AssetImage(
'assets/images/icon/icon-filter.png'),
height: 20,
),
Text(
"Filtra",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 12,
color: Colors.white,
fontFamily: 'Proxima'),
), // <-- Text
],
),
),
),
),
],
),
),
),
// Other Sliver Widgets
SliverList(
delegate: SliverChildListDelegate([
const SizedBox(
height: 20,
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: secondaryOrange,
),
height: 200,
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(top: 20),
child: const Text(
'Ultimi annunci',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 28,
color: Colors.black,
fontFamily: 'Proxima'),
),
),
SizedBox(
height: 690,
child: GridView.count(
childAspectRatio: (itemWidth / itemHeight),
padding: const EdgeInsets.only(top: 20, bottom: 20),
primary: false,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: const <Widget>[
AnnunciBox(colore: primaryRed),
AnnunciBox(colore: primaryRed),
AnnunciBox(colore: primaryRed),
AnnunciBox(colore: primaryRed),
AnnunciBox(colore: primaryRed),
AnnunciBox(colore: primaryRed),
],
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
minimumSize: const Size(100, 50),
),
onPressed: () {},
child: const Text(
'Carica altri annunci',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
color: Colors.white,
fontFamily: 'Proxima'),
),
)
]),
),
],
),
),
),
);
>Solution :
you can resolve this issue by passing physics property to your second list like below:
physics: NeverScrollableScrollPhysics(),
Or you have to use NestedScrollView for this type of usecase