I have a list in my flutter app that displays some facts, I would like to make it so when I click any of the facts in the list, it animates, expands to a larger pop-up kind of screen that shows a the fact text and some buttons below like "save" inside the pop-up. Upon pressing "back" it should animate back to the list.
I have created an animation in a video editor to show the behavior I'm trying to achieve: https://drive.google.com/file/d/16GsJ1J89jn2CCVnuUecoy7VsF7BRdKF_/view?usp=sharing
Here's my build function currently:
// Main UI Build function
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const PreferredSize(
preferredSize: Size.fromHeight(50), child: FactsAppBar()),
drawer: const FactsAppDrawer(),
body: GlowingOverscrollIndicator(
axisDirection: AxisDirection.down,
color: Theme.of(context).primaryColor,
child: ListView.separated(
// Render List View
itemCount: widgetsList
.length, // Set item count from the previously generated list
physics:
const AlwaysScrollableScrollPhysics(),
itemBuilder: (_, int index) =>
widgetsList[index], // Build items from the generated list
separatorBuilder: (_, div) => const Divider(
// Build separator between the items
thickness: 1.5,
),
),
));
}
Note: The widgetsList is a list of the facts generated during the screen load.
Related
A screen in my app displays a list of "listings" the user has made. In the event there is not enough listings to fill the whole screen, and the user scrolls down, the listing they are scrolling will get cut off instead of being scrolled down.
example before scrolling
example after scrolling
As the user scrolls the list entry downwards I would like it not to disappear. I've tried wrapping the listview.builder in containers / sized boxes to define their size, although this behavior persists. I thought I could also put in some blank entries into the list that wouldn't respond to user clicks but that seems like an inefficient solution. Here is my code:
return Scaffold(
key: listing_home_scaffold_key,
resizeToAvoidBottomInset: false,
backgroundColor: BODY_BACKGROUND_COLOR,
appBar: returnAppBarForHomePages(context, "Listings", widget.local_user, updateUserState,
widget.local_user.usingDefaultImage, widget.local_user.getProfilePicURL, listing_home_scaffold_key),
drawer: settingsDrawer(widget.local_user),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
returnScrollableListView()
]),
);
Widget returnScrollableListView() {
return RefreshIndicator(
child: ListView.builder(
physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
itemCount: user_listings.length,
shrinkWrap: true,
padding: const EdgeInsets.only(top: 0),
itemBuilder: (context, index) {
return UserListing(listing: user_listings[index]);
}),
onRefresh: () async {
var cancel_loading_indicator = showLoadingIndicatorAllowClick();
await reQueryData();
cancel_loading_indicator();
},
);
}
Edit: Having the refresh indicator be the direct parent to the listview caused this problem. Moving it up a level so it's instead the parent of the Column fixed this.
Having the refresh indicator be the direct parent to the listview caused this problem. Moving it up a level so it's instead the parent of the Column fixed this.
I have created a demo
I have set colour as random for each container of list view, so it changes colours whenever I scroll ,
I want to prevent changing colour while scrolling,
Like if first container colour is red then it should b not changed until I restart app,
I placed print statement inside build method...but it showing only once, than why container's colour get changed,
if it rebuilds, it should execute print statement more than one time
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context,index){
return Container(
height: 200,
color: Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),
);
}),
);
}
In ListView.builder items won't be alive for performance matter, every time you scroll, it build those item. try this:
#override
Widget build(BuildContext context) {
var colorList = List<Color>.generate(10, (index) => Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1)).toList();
return Scaffold(
body: ListView.builder(
itemCount: colorList.length,
itemBuilder: (context,index){
return Container(
height: 200,
color: colorList[index],
);
}),
);
}
As shown in the picture, I want to go directly to the corresponding list view when I press the button.
Instead of scrolling through the list, you can use the buttons to move left and right.
This is my current code.
As shown below, I am running a pageview called body (which changes briefly after using listview), and I know how to come out in order, but I don't know what to use to get it out of a specific number. Do you have a yes or another question?
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => Choice821()),);
},
2
class Choice821 extends StatelessWidget {
#override
Widget build(BuildContext context) {
QuestionController _controller = Get.put(QuestionController());
return Scaffold(
appBar: AppBar(
title: Text('복습 시험', style: TextStyle(color: Colors.black, fontWeight:FontWeight.bold,fontSize: 20,),),
centerTitle: true,
elevation: 0,
),
body: Body(),
);
}
}
2
child: PageView.builder(
physics: NeverScrollableScrollPhysics(),
controller: _questionController.pageController,
onPageChanged: _questionController.updateTheQnNum,
itemCount: _questionController.questions.length,
itemBuilder: (context, index) => ayotube(
question: _questionController.questions[index],
id: _questionController.questionNumber.value,
),
),
You can simply do this:
// jump to page index with animation
_questionController.pageController.animateToPage(index);
// or jump to page index without animation
_questionController.pageController.jumpToPage(index);
I have a panel widget that can be dragged vertically in and out from the bottom of the screen. In that panel widget, there is a ListView that is scrollable.
What I'm trying to achieve is, having the panel handle the drag for opening and closing without the nested listview interfering. Once, the panel is open, the listview become scrollable and if the listview is scrolled down while already at the top, the panel handle the gesture instead and closes.
Like so:
I tried to enable/disable scrolling physics on the ListView based on the Panel position but turned out not to be possible that way.
Any ideas ? :)
You can achieve that with DraggableScrollableSheet.
Here is a quick example of how you can use it:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Center(child: Text('Some content')),
DraggableScrollableSheet(
minChildSize: 0.2,
initialChildSize: 0.2,
builder: (context, scrollController) => Container(
color: Colors.lightBlueAccent,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (context, index) => SizedBox(
height: 200,
child: Text('Item $index'),
),
),
),
),
],
),
);
}
What is the alternative to Recycle view in flutter I have tried using this code
but how to do Animination with listview widget in flutter
Is this valid?
ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
);
ListView:
Usually this should be used with a small number of children as the List will also construct the invisible elements in the list and a large amount of elements may render this inefficient.
ListView.builder():
The list items are constructed lazily, meaning only a specific number of list items are constructed and when a user scrolls ahead, the earlier ones are destroyed.
More info is here.
Following flutter-for/android-devs
The recommended, efficient, and effective way to build a list uses a
ListView.Builder. This method is great when you have a dynamic List or
a List with very large amounts of data. This is essentially the
equivalent of RecyclerView on Android, which automatically recycles
list elements for you:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: ListView.builder(
itemCount: widgets.length,
itemBuilder: (BuildContext context, int position) {
return getRow(position);
}));
}
Widget getRow(int i) {
return GestureDetector(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("Row $i")),
onTap: () {
setState(() {
widgets.add(getRow(widgets.length + 1));
print('row $i');
});
},
);
}
You can also use animatedlist widget for animations. code example are given in the following link.
AnimatedList