I am new to flutter and wondering if someone could help me with a scroll mechanic. I am trying out SliverAppBar
for the first time and it is working correctly with movements of the bar itself. However, I have a ListView.builder
that builds widgets that I placed within a sliverfillremaining and it is not detecting the movements of the list. Any help would be greatly appreciated.
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Row(
children: <Widget>[
Text('appName')],),
expandedHeight: 110,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Container(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('my text 1', style: TextStyle(
fontFamily: 'OpenSans',
),
softWrap: true,),
Text('my Text', style: TextStyle(
fontFamily: 'OpenSans',
),),],),),),),),
SliverFillRemaining(
hasScrollBody: true,
child: Container(
child: NoteList(
items: items,
),
),
)
],
),
NoteList
class NoteList extends StatelessWidget {
const NoteList({
@required this.items,
});
final List<Note> items;
Future _navigateToNote(BuildContext context, Note note) => Navigator.push(
context,
MaterialPageRoute(builder: (context) => NoteScreen(note)),
);
Widget _itemBuilder(BuildContext context, int position) {
final cardShape = const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
);
return Padding(
padding: const EdgeInsets.only(top:0, bottom: 0),
child: Card(
shape: cardShape,
child: InkWell(
onTap: () => _navigateToNote(context, items[position]),
customBorder: cardShape,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Column(
children: <Widget>[
ListTile(
title: Text('${items[position].theItem}',
),
),
],
),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scrollbar(
child: ListView.builder(
itemCount: items.length,
padding: const EdgeInsets.only(left: 2, right: 2),
itemBuilder: _itemBuilder,
),
);
}
}
You are using ListView
inside CustomScrollView
. Both are scrollable so the conflict occurs.
To solve the problem, replace ListView
with SliverList
— special widget for displaying list of items inside CustomScrollView
.
SliverFillRemaining
isn't needed here, so the code will be:
Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
...
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Card(
// any nested widgets
child: ListTile(
title: Text(items[index].name),
),
),
childCount: items.length,
),
),
],
),
);