I want to place a listview(1000+ items) into a column, I tried Expanded, not worked.
In the column, there is a swiper and a listview.
Is there any solution?
Here is my code:
Widget build(BuildContext context) {
return DefaultTabController(
length: _list.length,
child: Scaffold(
appBar: AppBar(
title: Text("ListView in Column"),
centerTitle: true,
bottom: TabBar(
isScrollable: false,
tabs: _list.map((String ss) {
return Tab(text: ss);
}).toList(),
),
),
body: Column(
children: <Widget>[
Container(
height: 200,
width: MediaQuery.of(context).size.width,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return _swiperImage[index];
},
itemCount: _swiperImage.length,
autoplay: true,
loop: true,
pagination: SwiperPagination(),
control: SwiperControl(),
onTap: (index) =>
Fluttertoast.showToast(msg: 'Clicked ${index + 1}'),
),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return ListItemExamStrategyWidget(_listExamStrategy[index]);
},
itemCount: _listExamStrategy.length,
),
)
],
),
),
);
}
A few changes:
Wrap your Column inside SingleChildScrollView.
body: SingleChildScrollView(
child: Column(
Remove Expanded widget parent from your ListView
Set the physics of your ListView to NeverScrollableScrollPhysics
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
It works in a column with swiper and expanded widget that holds listview with 1000 texts
Here is my working code
final List<String> _list = <String>['tab-1', 'tab-2'];
final List<String> _swiperImage = <String>[
'http://via.placeholder.com/350x150',
'http://via.placeholder.com/350x150'
];
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: _list.length,
child: Scaffold(
appBar: AppBar(
title: const Text('ListView in Column'),
centerTitle: true,
bottom: TabBar(
isScrollable: false,
tabs: _list.map((String ss) {
return Tab(text: ss);
}).toList(),
),
),
body: Column(
children: <Widget>[
Container(
height: 200,
width: MediaQuery.of(context).size.width,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
_swiperImage[index],
fit: BoxFit.fill,
);
},
itemCount: _swiperImage.length,
autoplay: true,
loop: true,
pagination: const SwiperPagination(),
control: const SwiperControl(),
onTap: (int index) {
print('----------$index');
}),
),
new Expanded(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return new Container(
padding: const EdgeInsets.all(15.0),
child: new Text('index ${index.toString()}'),
);
},
itemCount: 100,
),
)
],
),
),
);
}
Related
The data is not updating in the list view flutter but the response is printing in the log. i want to show the data in the list view but the API is working the Video is not updating and i am not receiving any data in the card. if any idea there to resolve this issue.
Below the code i am hitting the API to get response but is not displaying anything(video).
I am using the stream builder to achieve the data displaying check the below code and tell me where is the issue
class RespondedVideos extends StatefulWidget{
var slug;
RespondedVideos({Key key,#required this.slug}) : super(key: key);
#override
respondedVideosState createState() => respondedVideosState();
}
class respondedVideosState extends State<RespondedVideos> {
VideoPlayerController _controller;
List data = new List();
var respondercookie;
String video_url = "";
#override
void initState() {
super.initState();
readCookie();
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Flexible(
flex: 1,
child:Container(
height: 100,
child: Card(
margin: EdgeInsets.fromLTRB(3.0, 60.0, 3.0, 0.0),
color: Colors.blueAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Feedback: ")
],
),
Row(
children: <Widget>[
Text("Status: ")
//+data[position].name,style:TextStyle(color: Colors.blueAccent)
],
)
]
),
),
)
),
SizedBox(height: 10),
Flexible(
flex: 2,
child:Container(
height: 1000,
child: StreamBuilder(
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.tealAccent),
),
);
} else {
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int position) {
if(data[position]["source_url"] != null)
video_url = data[position]["source_url"];
_controller = VideoPlayerController.network(video_url
)
..initialize().then((_) {
setState(() {});
});
_controller.setVolume(30.0);
return new Container(
child: Center(
child: Card(
child: Container(
width: 230.0,
child: Column(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
Column(
children: <Widget>[
Padding(padding: new EdgeInsets.symmetric(
vertical: 80.0, horizontal: 160.0)),
RaisedButton(
color: Colors.transparent,
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying
? Icons.pause
: Icons.play_arrow,
color: Colors.blueAccent,
),
),
],
),
],
),
],
),
),
),
)
);
}
);
}
}
)
)
),
],
);
}
Future<String>getUserVideoDetails(String slug) async{
String url= "http://3.208.3.10:3000/api/v1/feedbacks/"+slug+"";
var response = await http.get(
Uri.encodeFull(url),
headers: {"Content-Type": "application/json","cookie":respondercookie},
);
setState(() {
var convertDataToJson = json.decode(response.body);
data =convertDataToJson['responses'];
print(data);
});
return "suceess";
}
void readCookie() async{
final prefs = await SharedPreferences.getInstance();
respondercookie = prefs.getString('respondedcookie')??'';
getUserVideoDetails(widget.slug);
}
This code should work:
Fetching data do not print inside setState:
Future<String>getUserVideoDetails(String slug) async{
String url= "http://3.208.3.10:3000/api/v1/feedbacks/"+slug+"";
var response = await http.get(
Uri.encodeFull(url),
headers: {"Content-Type": "application/json", "cookie": respondercookie},
);
var convertDataToJson = json.decode(response.body);
setState(() {
data = convertDataToJson['responses'];
});
print(data);
return "suceess";
}
You don't need StreamBuilder you can just use ListView.builder:
Flexible(
flex: 2,
child: Container(
height: 1000,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
itemCount: data.length,
itemBuilder: (BuildContext context, int position) {
if (data.isEmpty) {
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.tealAccent),
),
);
}
if (data[position]["source_url"] != null)
video_url = data[position]["source_url"];
_controller = VideoPlayerController.network(video_url
)
..initialize().then((_) {
setState(() {});
});
_controller.setVolume(30.0);
return new Container(
child: Center(
child: Card(
child: Container(
width: 230.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
child: Container(),
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
Column(
children: <Widget>[
Padding(
padding: new EdgeInsets.symmetric(
vertical: 80.0,
horizontal: 160.0)),
RaisedButton(
color: Colors.transparent,
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying
? Icons.pause
Icons.play_arrow,
color: Colors.blueAccent,
),
),
],
),
],
),
],
),
),
),
));
}))),
I have this
Widget _Project() {
return new ListView(
children: <Widget>[
Container(
child: Card(
color: _Cardcolor,
child: Center(
child: Text(
'Projects',
style: new TextStyle(
fontSize: 40.0,
),
),
),
),
margin: EdgeInsets.only(left: 50.0, right: 50.0, top: 10.0),
height: 130.0,
width: 15.0,
),
Divider(
height: 40,
),
Container(
child: FutureBuilder<List<Project>>(
future: fetchProjects(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? ProjectList(projects: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
)
],
) ;
}
and this is the builder
class ProjectList extends StatelessWidget {
final List<Project> projects;
ProjectList({Key key, this.projects}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
itemCount: projects.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Container(
color: Colors.white10,
alignment: Alignment.center,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
title: Text(projects[index].ProjectId),
subtitle: Text(projects[index].ProjectId),
),
ButtonTheme.bar(
// make buttons use the appropriate styles for cards
child: ButtonBar(
children: <Widget>[
FlatButton(
child: const Text('Open'),
onPressed: () {/* ... */},
),
],
),
),
],
),
)),
],
);
},
);
}
}
So, i'm creating the list with card. Here is the screenshot
the data is from json and it is showing properly. Well, it is not showing properly because i have 5 and it is only showing 3, well it is because the scrolling problem. When i make the card smaller all of my data is showing up.
I already try to add this line
physics: const AlwaysScrollableScrollPhysics()
But still no help, I'm stuck now
How can i fix it ? did i miss something ?
In Your class - ProjectList() - ListView.builder - add - physics: ClampingScrollPhysics(),
Widget build(BuildContext context) {
return ListView.builder(
physics: ClampingScrollPhysics(), // add this
shrinkWrap: true,
itemCount: projects.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[ ...
update:
To make the card list scroll only not the whole page - replace top Listview with the column.
return Scaffold(
body: Column( // replace from listview
children: <Widget>[
SizedBox(height: 15.0,),
Container(
child: Card(
// color: _Cardcolor,
child: Text(
'Projects',
style: new TextStyle(
fontSize: 44.0,
),
),
),
margin: EdgeInsets.only(left: 50.0, right: 50.0, top: 15.0),
height: 130.0,
// width: 15.0,
),
Divider(
height: 40,
),
Expanded( // add Expanded
child: Container(
child: ProjectList(
projects: ['anmol', 'anmol', 'dummy', 'demo'],
),
// child: FutureBuilder<List<Project>>(
// future: fetchProjects(http.Client()),
// builder: (context, snapshot) {
// if (snapshot.hasError) print(snapshot.error);
// return snapshot.hasData
// ? ProjectList(projects: snapshot.data)
// : Center(child: CircularProgressIndicator());
// },
// ),
),
)
],
),
I currently have a listview operating on the whole of my screen. I would like to have a button in the bottom of the screen, thus splitting it up so the listview doens't fill up the whole of my window.
This is the current code building the class:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HT scoreboard'),
),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('Spillere').orderBy("score", descending: true).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return LinearProgressIndicator();
return _buildList(context, snapshot.data.documents);
},
);
}
Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return ListView(
padding: const EdgeInsets.only(top: 10.0),
children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);
}
Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
final record = Record.fromSnapshot(data);
return Padding(
key: ValueKey(record.name),
padding: const EdgeInsets.all(5.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(5.0),
),
child: ListTile(
title: Text(record.name + ": " + record.score.toString()),
trailing: new IconButton(icon: new Icon(isAdmin ? Icons.add : null, color: Colors.green),
onPressed: (){
if(isAdmin){
record.reference.updateData({'score': record.score + 1});
}
}
),
),
),
);
change your buildlist function to include a column with the button and listview as children
Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return Column(
children:[
Expanded(
child: ListView(
padding: const EdgeInsets.only(top: 10.0),
children: snapshot.map((data) => _buildListItem(context, data)).toList(),
),
),
RaisedButton(
// fill in required params
)
])
}
To prevent the buttons being pushed above the keyboard;
return CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// list items
],
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
RaisedButton()
],
),
)
],
);
I'm struggling with the ListView.
My problem is that I've a Listview inside another Listview and the second Listview items height are not always the same. I want to get rid of the itemExtent and create an automatically height for the first Listview.
What I really want to acomplish is something like this:
#override
Widget build(BuildContext context) {
return
Column(
children: <Widget>[
TextField(),
Expanded(
child: ListView.builder(
key: new Key("ditisdekeyvoordelistview"),
itemBuilder: _makeMovieList,
padding: EdgeInsets.all(0.0),
itemCount: _movies.length,
itemExtent: 300.0,
),
),
],
);
}
//FIRST LIST
Widget _makeMovieList(BuildContext context, int index) {
return Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Container(
child: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
Image.network(
_movies[index].movieImage,
fit: BoxFit.cover,
width: 100.0,
)
])),
title: Text(
_movies[index].movieTitle,
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_makeStarRating(_movies[index].movieRating),
Text(_movies[index].movieDescription),
_makeCardDates(index)
],
),
),
);
}
//SECOND LIST
Widget _makeCardDates(int index) {
return Expanded(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.all(0.0),
itemCount: _movies[index].dateTimeList.length,
itemBuilder: (context, indexx) {
return GestureDetector(
onTap: () {
print(_movies[index].dateTimeList[indexx].toString());
},
child: Card(
elevation: 8.0,
color: Color.fromRGBO(64, 75, 96, .9),
child: Column(
children: <Widget>[
Text(_movies[index].cinema),
Text(((dateFormatMovieHours
.format(_movies[index].dateTimeList[indexx]))
.toString())),
],
)));
},
itemExtent: 40.0,
),
);
}
Using itemExtent on a ListView isn't required, though ListView needs to have a finite height set for vertical scroll (default) and finite width is needed for horizontal scroll. Otherwise, the ListView will throw a "constraints are unbounded" error.
For your use case, you can either set height on the list items in the first ListView, or set height on the second ListView. However, if you'd like the second ListView to be non-scrollable and the list items in the first ListView will adapt dynamically, you can use a Column of Widgets similar to this sample.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final items = [
'Apple',
'Banana',
'Carrot',
'Dog',
'Egg',
'Flower',
'Goat',
'Honey'
];
final subItems = ['1.00', '2.00', '3.00', '4.00'];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: firstList(),
),
);
}
firstList() {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Card(
child: Container(
color: Colors.lightBlue[50],
padding: EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
flex: 2,
child: Text('${items[index]}'),
),
Expanded(
flex: 1,
child: secondList(subItems),
),
],
),
),
),
);
},
);
}
secondList(List item) {
// Create List<Widget> for the second "List"
var subList = List<Widget>();
item.forEach((data) {
subList.add(
Card(
child: Container(
padding: EdgeInsets.all(16.0),
color: Colors.lightBlueAccent,
child: Text('$data'),
),
),
);
});
// Populate Column instead of ListView
return Column(
children: subList,
);
}
}
I want to create a list of cards scrolling horizontally with snap to fit effect when swiped either from left or right.
Each card has some spacing between them and fit to screen similar to below image
Apart from that these horizontally scrollable list elements should be contained inside a vertically scrollable list.
I all I am able to achieve is only displaying a list of horizontal scrolling cards after following example in flutter docs.
class SnapCarousel extends StatelessWidget {
#override
Widget build(BuildContext context) {
final title = 'Horizontal List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
Container(
width: 160.0,
color: Colors.yellow,
),
Container(
width: 160.0,
color: Colors.orange,
),
],
),
),
),
);
}
}
Use PageView and ListView:
import 'package:flutter/material.dart';
main() => runApp(MaterialApp(home: MyHomePage()));
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Carousel in vertical scrollable'),
),
body: ListView.builder(
padding: EdgeInsets.symmetric(vertical: 16.0),
itemBuilder: (BuildContext context, int index) {
if(index % 2 == 0) {
return _buildCarousel(context, index ~/ 2);
}
else {
return Divider();
}
},
),
);
}
Widget _buildCarousel(BuildContext context, int carouselIndex) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Carousel $carouselIndex'),
SizedBox(
// you may want to use an aspect ratio here for tablet support
height: 200.0,
child: PageView.builder(
// store this controller in a State to save the carousel scroll position
controller: PageController(viewportFraction: 0.8),
itemBuilder: (BuildContext context, int itemIndex) {
return _buildCarouselItem(context, carouselIndex, itemIndex);
},
),
)
],
);
}
Widget _buildCarouselItem(BuildContext context, int carouselIndex, int itemIndex) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
),
);
}
}
Screenshot:
If you don't want to use any 3rd party packages, you can simply try this:
class _HomePageState extends State<HomePage> {
int _index = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: SizedBox(
height: 200, // card height
child: PageView.builder(
itemCount: 10,
controller: PageController(viewportFraction: 0.7),
onPageChanged: (int index) => setState(() => _index = index),
itemBuilder: (_, i) {
return Transform.scale(
scale: i == _index ? 1 : 0.9,
child: Card(
elevation: 6,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
"Card ${i + 1}",
style: TextStyle(fontSize: 32),
),
),
),
);
},
),
),
),
);
}
}
this is an old question, and I arrived here looking for something else ;-), but what WitVault was lookig is done easy with this package: https://pub.dev/packages/flutter_swiper
The implementation:
Put the dependencies in pubsec.yaml:
dependencies:
flutter_swiper: ^1.1.6
Import it in the page where you need it:
import 'package:flutter_swiper/flutter_swiper.dart';
In the layout:
new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/288x188",
fit: BoxFit.fill,
);
},
itemCount: 10,
viewportFraction: 0.8,
scale: 0.9,
)
To achieve the snap effect via ListView, just set the physics to PageScrollPhysics
const List<Widget> children = [
ContainerCard(),
ContainerCard(),
ContainerCard(),
];
ListView.builder(
scrollDirection: Axis.horizontal,
physics: const PageScrollPhysics(), // this for snapping
itemCount: children.length,
itemBuilder: (_, index) => children[index],
)
Advanced Snap List
If you are looking for advanced usages, such as dynamic item sizes, configurable snap points, visualization of items, and essential control (such as scrollToIndex, animate) you should use the native-based SnappyListView with way more features.
SnappyListView(
itemCount: Colors.accents.length,
itemBuilder: (context, index) {
return Container(
height: 100,
color: Colors.accents.elementAt(index),
child: Text("Index: $index"),
),
);
I believe the answer solution from CopsOnRoad is better and simple for someone who don't want to use a 3rd party library. However, since there is no animation, I add the scale animation when the card is viewed (expand) and the previous card is swiped (shrink) using index. So what happened is whenever the first time the page load, 1st and 2nd card won't have any animation, and when the card is swiped, only the previous and current card have the scale animation. So this is my implementation:
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int currentIndex = -1, previousIndex = 0;
double getAnimationValue(int currentIndex, int widgetIndex, int previousIndex,
{bool begin = true}) {
if (widgetIndex == currentIndex) {
return begin ? 0.9 : 1;
} else {
return begin ? 1 : 0.9;
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200, // card height
child: PageView.builder(
itemCount: 10,
controller: PageController(viewportFraction: 0.7),
onPageChanged: (int index) {
setState(() {
if (currentIndex != -1) {
previousIndex = currentIndex;
}
currentIndex = index;
});
},
itemBuilder: (_, widgetIndex) {
return (currentIndex != -1 &&
(previousIndex == widgetIndex ||
widgetIndex == currentIndex))
? TweenAnimationBuilder(
duration: const Duration(milliseconds: 400),
tween: Tween<double>(
begin: getAnimationValue(
currentIndex,
widgetIndex,
previousIndex,
),
end: getAnimationValue(
currentIndex,
widgetIndex,
previousIndex,
begin: false,
),
),
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Card(
elevation: 6,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Card${widgetIndex + 1}",
style: const TextStyle(fontSize: 30),
),
Text(
"$widgetIndex >> Widget Index << $widgetIndex",
style: const TextStyle(fontSize: 22),
),
Text(
"$currentIndex >> Current Index << $currentIndex",
style: const TextStyle(fontSize: 22),
),
Text(
"$previousIndex >> Previous Index << $previousIndex",
style: const TextStyle(fontSize: 22),
),
],
),
),
);
},
)
: Transform.scale(
// this is used when you want to disable animation when initialized the page
scale:
(widgetIndex == 0 && currentIndex == -1) ? 1 : 0.9,
child: Card(
elevation: 6,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Card${widgetIndex + 1}",
style: const TextStyle(fontSize: 30),
),
Text(
"$widgetIndex >> Widget Index << $widgetIndex",
style: const TextStyle(fontSize: 22),
),
Text(
"$currentIndex >> Init Index << $currentIndex",
style: const TextStyle(fontSize: 22),
),
Text(
"$previousIndex >> Previous Index << $previousIndex",
style: const TextStyle(fontSize: 22),
),
],
),
),
);
},
),
),
],
),
);
}
}
I used TweenAnimationBuilder for this animation and hardcoded the widget. You can use method for your widget or use package flutter_animate for easy animation whenever necessary.