How I can scroll widget in same time
Flutter
Screenshot
Here is code for this screen
return Scaffold(
appBar: CustomAppBar(
scaffoldKey: widget.scaffoldKey,
// icon: AppIcon.settings,
// onActionPressed: onSettingIconPressed,
onSearchChanged: (text) {
setState(() {
if (text.length > 0) {
searching = true;
} else {
searching = false;
}
});
state.filterByUsername(text);
},
),
backgroundColor: Colors.white,
body: new RefreshIndicator(
backgroundColor: Colors.white,
onRefresh: () async {
HapticFeedback.selectionClick();
setState(() {
list3 = state2.getPostList(authstate.userModel);
list3.shuffle();
onlyImages.shuffle();
});
state.getDataFromDatabase();
return Future.value(true);
},
// mesto povise greed, i ispod search boxa
child: new Column(
children: <Widget>[
searching
? ListView.separated(
addAutomaticKeepAlives: false,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) =>
_UserTile(user: list[index]),
separatorBuilder: (_, index) => Divider(
color: Colors.orange,
height: 0,
),
itemCount: list?.length ?? 0,
)
: slider(),
searching
? ListView.separated(
addAutomaticKeepAlives: false,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) =>
_UserTile(user: list[index]),
separatorBuilder: (_, index) => Divider(
color: Colors.orange,
height: 0,
),
itemCount: list?.length ?? 0,
)
: Container(
height: 32,
margin: EdgeInsets.only(top: 5, bottom: 5),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_tagItem(Icon(Icons.dehaze, color: Colors.orange),
'DAJGI', null, Colors.black, () {
Navigator.pushNamed(
context, '/PhoneConfirmCode');
}),
_tagItem(null, 'Nature', null,
Colors.greenAccent.withOpacity(0.3), null),
_tagItem(
null, 'Animal', null, Colors.brown, null),
_tagItem(null, 'Travel', null, Colors.teal, null),
_tagItem(
null, 'Happy', null, Colors.orange, null),
_tagItem(null, 'Art', null, Colors.blue, null),
_tagItem(
null, 'Night', null, Colors.blueGrey, null),
]),
),
// Grid List
_listOfPosts(),
// Expanded(
// child: GridView.count(
// crossAxisCount: 3,
// children: List.generate(onlyImages.length, (index) {
// return GestureDetector(
// onTap: () {
// FeedModel model = onlyImages[index];
// onPostPressed(context, model);
// },
// // onLongPress: () {
// // _createPopupContext;
// // FeedModel model = onlyImages[index];
// // onPostPressed(context, model);
// // },
// child: Container(
// child: Card(
// child: onlyImages
// .elementAt(index)
// .imagesPath
// .length >
// 0
// ? CachedNetworkImage(
// imageUrl: onlyImages
// .elementAt(index)
// .imagesPath[0],
// fit: BoxFit.cover,
// )
// :
// // Container()
// Center(
// child: Text(onlyImages
// .elementAt(index)
// .description),
// )),
// ));
// }
// ),
// ),
// ),
],
)));
When I starting to scroll now only grid scrolling but widget not moving, and I want that this widget going up when user starting to scroll.. Can anyone tell me what's the problem and how to fix it?
Updated the full code as requested in the comments.
First of all, Column is un-scrollable, so to make widgets scrollable is to wrap those widgets with a ListView instead of a Column. So you can do something like this to make widgets scrollable:
RefreshIndicator(
backgroundColor: Colors.white,
onRefresh: (_){},
child: new ListView(
children: <Widget>[
// widget 1,
// widget 2,
// widget 3,
],
),
If ListView make widgets scrollable, what happens when a ListView is wrap in another ListView? A scrollable inside a scrollable? (Well there are some cases when you want to do this, but thats not the case here so yeah). There will be error.
So to avoid the error, just add shrinkWrap: true and physics: ClampingScrollPhysics() and you're good to go, as such:
RefreshIndicator(
backgroundColor: Colors.white,
onRefresh: (_){},
child: new ListView(
children: <Widget>[
// listview
ListView.separated(
shrinkWrap: true, // <--- add this
physics: ClampingScrollPhysics(), // <--- and this
...
),
// gridview
GridView.builder(
shrinkWrap: true, // <--- add this
physics: ClampingScrollPhysics(), // <--- and this
...
),
],
),
),