I am trying to achieve the look displayed on the Animations package's site on pub.dev.
I included a gif on what I am trying to achieve:
I tried to implement this but am having a hard time as each Step is not a widget. I first implemented like below, but it makes the entire screen (including the vertical line) rebuild.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const FliAppBar(),
body: PageTransitionSwitcher(
duration: const Duration(seconds: 1),
transitionBuilder: (child, anim, sec) => SharedAxisTransition(
transitionType: SharedAxisTransitionType.vertical,
animation: anim,
secondaryAnimation: sec,
child: child,
),
child: Stepper(
key: ValueKey(stepperIndex),
currentStep: stepperIndex,
steps: steps,
),
),
);
}
Any ideas on how to achieve the look that is displayed on the gif using a SharedAxisTransition from the Animations package?
Related
I'm creating a social media feed where each post is an image of a different size. The user can swipe right to like, left to dislike, up to skip to the next post, or down to go back. To do that, I'm using a Dismissible widget within a PageView, where each page contains a post/image. I used "animateToPage" in the Dismissible to automatically animate to the next page once the user swipes right or left.
The problem is that when the PageView animates to the next page, the image that was dismissed suddenly reappears on the previous page while the animation is happening. I want it to reappear only if the user swipes down to go back to the previous post, but not while the PageView is animating.
Here's a video showing what is going wrong
And here's an animation showing what I need
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
int pageIndex = 0;
PageController _pageController = PageController(
initialPage: 0,
);
#override
Widget build(BuildContext context) {
List images = [
'assets/1.jpg', 'assets/2.jpg', 'assets/3.jpg', 'assets/4.jpg', 'assets/5.jpg',
];
return MaterialApp(
home: Scaffold(
backgroundColor: Color.fromRGBO(250, 250, 250, 1),
body: LayoutBuilder(
builder: (context, constraints) => PageView.builder(
controller: _pageController,
itemCount: 5,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return images.map((image) => Dismissible(
onResize: () {
setState(() {
_pageController.animateToPage(index+1, duration: Duration(milliseconds: 300), curve: Curves.ease);
});
},
onDismissed: (direction) {},
key: UniqueKey(),
child: Container(
padding: const EdgeInsets.all(20.0),
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 100),
child: Container(
alignment: Alignment.center,
child: Image(
image: AssetImage(image)
),
),
),
),
),
))
.toList()[index];
}
),
),
),
);
}
}
I assume this is happening because PageView is rebuilding the other pages while the animation is in progress. I'm still a beginner in Flutter and wasn't able to find a solution. Any ideas of how to fix this?
Everytime setState is called, the widget is redrawn. Try to put your animated code outside of setState method.
Documentation
I am building a WebApp in flutter and I have a SingleChildScrollView with some widgets inside. I want the buttons on the appbar to take me to the correspondent widget when I press on the buttons.
Is that possible? Here I attach the part of the code.
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: CustomAppBar(),
backgroundColor: Colors.white,
body: SingleChildScrollView(
controller: widget.homeController,
child: Column(
children: [
Inicio(),
Services(),
QuienesSomos(),
ContactForm(),
BottomInfo(),
],
),
),
);
}
So I have one button on the appbar per each children in the SingleChildScrollView and I would like that when I press the correspondent button, it scrolls down to the correspondent section on the widget. I tried with Navigator.of().PushNamed but it opens a new screen instead of scrolling down. Any ideas? Thanks in advance!
To control the position, you have to manage the controller of the SingleChildScrollView .
If you want to smoothly go a section, you can attach functionality to control the SingleChildScrollView controller to the button:
widget.homeController.animateTo(
0.0, // change 0.0 {double offset} to corresponding widget position
duration: Duration(seconds: 1),
curve: Curves.easeOut,
);
If you just want to instantly jump to the position:
widget.homeController.jumpTo(0.0); // change 0.0 {double value} to corresponding widget position
Make a scroll controller:
ScrollController myController = ScrollController();
and attach it to your SingleChildScrollView widget:
SingleChildScrollView(
controller: myController,
child: ...
Now create a GlobalKey:
final anchor = GlobalKey();
Attach it to any of your widget:
Container(
key: anchor,
child: ...
),
That's it, now you can programmatically scroll to this widget using scroll controller:
myController.position.ensureVisible(
anchor.currentContext.findRenderObject(),
alignment: 0.5,
duration: const Duration(seconds: 1),
);
I could achieve my goal by using,
onPressed: () {
Scrollable.ensureVisible(servicesKey.currentContext,
duration: Duration(seconds: 1),
curve: Curves.easeOut);
},
and by asigning the corresponding key in each widget.
Pasted below is the build method for a widget based on Card that serves as a list element in a ListWheelScrollView. The TweenAnimationBuilder is simply to animate a background color change in the Card widget whenever it's the currently selected list item.
Widget build(BuildContext context) {
Color primary = Theme
.of(context)
.primaryColor;
Color secondary = Colors.white;
return new TweenAnimationBuilder(
tween: new ColorTween(
begin: secondary, end: selected ? primary : secondary),
duration: new Duration(milliseconds: 300),
builder: (BuildContext context, Color color, Widget child) {
return new Card(
color: color,
child: new InkWell(
splashColor: Colors.blue,
child: new Container(
height: 75,
width: 400,
child: new Center(
child: new Text(quiz.title)
)
),
onTap: () => print("Does nothing")
)
);
}
);}
No matter what I do, there are no visual splashes on the Card nor does the onTap handler ever execute.
I've tried every solution I've seen here on SO. Really confused on this one.
I don't know how you're doing it, try this code:
Widget build(BuildContext context) {
var primary = Theme.of(context).primaryColor;
var secondary = Colors.white;
var selected = true;
return Scaffold(
body: TweenAnimationBuilder(
tween: ColorTween(begin: secondary, end: selected ? primary : secondary),
duration: Duration(milliseconds: 300),
builder: (BuildContext context, Color color, Widget child) {
return Card(
color: color,
child: InkWell(
splashColor: Colors.blue,
onTap: () => print('Does nothing'),
child: Container(
height: 75,
width: 400,
child: Center(child: Text('Title')),
),
),
);
},
),
);
}
Unfortunately after getting a little more creative with my search queries, I discovered the answer is that this is simply how Flutter works. Children of a ListWheelScrollView cannot receive gesture input. I suppose this shouldn't be that surprising given how the widget is intended to function. To save others the frustration, please see the duplicate SO question and discussion on Google's Flutter Github linked below. Also linked is a Pub workaround package found via the Flutter Github discussion I'm looking into now.
ListTile OnTap is working when I use ListView. But when i use ListWheelScrollView it doesnt work
https://github.com/flutter/flutter/issues/38803
https://pub.dev/packages/clickable_list_wheel_view
I need help to do the following: when I press List 1, the screen focuses on List 1; I need the same for the rest of the options
This is the code for the example:
code
This behavior already exists in web pages but I haven't found this same behavior at the mobile app level. Thank you
Here is a small code snippet of something similar which might help you achieve you desired results.
By clicking the fab icon it will scroll down to item 35 within the ListView.
class MyHomePage extends StatelessWidget {
final _scrollController = ScrollController();
final _cardHeight = 200.0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.orange,
onPressed: () => _animateToIndex(35),
child: Icon(Icons.add),
),
body: ListView.builder(
controller: _scrollController,
itemCount: 100,
itemBuilder: (_, i) => Container(
height: _cardHeight,
child: Card(
color: Colors.lightBlue,
child: Center(
child: Text("Scroll Item $i", style: TextStyle(fontSize: 28.0),),
),
),
),
),
);
}
_animateToIndex(index) {
_scrollController.animateTo(_cardHeight * index,
duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
}
}
You'll need to have a scrollable Widget (like ListView, SingleScrollableWidget) instead of a Column in ListSecondPage.
Then add a ScrollController to it and ListSecondPage should receive which button was tapped. Based on that selection you can scroll to the desired location with the ScrollController
I'm pretty new to flutter and i'm trying to do some animation on a PageView. to be precise, I want to animate removing an item.
I've tried serveral ways to animate it and apart from a solution, the way how you guys would solve such a problem would also be helpful for my flutter skils.
What I've tried so far:
Animating the padding and opacity
the problem with this is that when i set the padding in the setState in the onLongPress it rebuilds the widget and it overrides the padding again with the active or inactive CardPadding (i think)
Animating the width and height
I just can't seem to get both of these values to work
Animating the viewportFraction on the PageViewController
Would not know how to go about this and if it would be possible to do this only for a specific 'Page'
Below is the (stripped down) code I've written thus far.
class Main extends StatefulWidget {
#override
_MainState createState() => _MainState();
}
class _MainState extends State<Main> {
int activeCard = 0;
EdgeInsets inActiveCardPadding = EdgeInsets.symmetric(vertical: 120.0, horizontal: 20.0);
EdgeInsets activeCardPadding = EdgeInsets.symmetric(vertical: 105.0, horizontal: 10.0);
PageController pageController = PageController(
initialPage: 0,
viewportFraction: 0.8,
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
PageView.builder(
itemCount: PlantCareApp.plants.length,
controller: pageController,
onPageChanged: (activeCardIndex) {
setState(() {
this.activeCard = activeCardIndex;
});
},
itemBuilder: (context, cardIndex) {
return AnimatedContainer(
padding: (activeCard == cardIndex) ? activeCardPadding : inActiveCardPadding;,
duration: Duration(milliseconds: 250),
child: PlantCard(
PlantCareApp.plants[cardIndex],
onTap: () {
Navigator.pushNamed(context, PlantDetailScreen.route, arguments: PlantCareApp.plants[cardIndex]);
},
onLongPress: () {
setState(() {
//
// ANIMATE OR TRIGGER ANIMATION HERE
//
// do the actual removing
/*
PlantCareApp.plants[cardIndex].remove(); // remove from db
PlantCareApp.plants.removeAt(cardIndex); // remove from List
*/
});
//PlantCareApp.plants[cardIndex].remove();
},
),
);
},
),
],
),
),
);
}
}
Any help will be greatly appreciated! How would you guys tackle a problem like this, or how would you tackle this specific use case.
I guess actually animating viewportFraction would be the nicest because of the adjecent 'Pages' moving toward each other as well?
Thanks!
I'm not certain if this is what you are looking for, but here goes.
One way of doing this is simply using the provided Widgets within Flutter. Two of these will help you out: AnimatedList and Dismissible.
Now, you could do something like this:
// define somewhere
final _animatedListGK = GlobalKey<AnimatedListState>();
// put in a function somewhere
return AnimatedList(
key: _animatedListGK,
padding: const EdgeInsets.all(0),
initialItemCount: PlantCareApp.plants.length,
itemBuilder: (context, index, animation) {
return FadeTransition(
opacity: animation,
child: _buildDismissibleRow(context, index, PlantCareApp.plants[index])
);
}
);
Note: you don't have to use the _animatedListGK global key per se, it depends on whether you can use AnimatedList.of(context) or not. Although it is the easier way.
The _animatedListGK is simply a Global Key that provides access to the AnimatedList so you can perform insertions/removals with animation.
Your dismissible row might look something like:
Widget _buildDismissibleRow(BuildContext context, int index, PlantModel plantModel) {
return Dismissible(
key: ValueKey<String>(plantModel.someKey),
direction: DismissDirection.startToEnd,
background: Container(color: Colors.red),
onDismissed: (direction) {
// You could use:
// AnimatedList.of(context)
_animatedListGK.currentState.removeItem(
index,
(context, animation) => Container(),
duration: Duration.zero
);
},
child: _buildContent(context, index, plantModel)
);
}
You could also do it without a dismissible row or even within the child of the dismissible row (_buildContent() for example). Something similar to:
// You could use:
// AnimatedList.of(context)
_animatedListGK.currentState.removeItem(
index,
(context, animation) {
return FadeTransition(
opacity: CurvedAnimation(parent: animation, curve: Interval(0.5, 1.0)),
child: SizeTransition(
sizeFactor: CurvedAnimation(parent: animation, curve: Interval(0.0, 1.0)),
child: _builContent(context, index, plantModel)
)
);
},
duration: const Duration(milliseconds: 300)
);
Notice how the SizeTransition simply "calls itself" by calling _builContent(context, index, plantModel)? That's how you can animate the row itself (out of existence).
Be sure to watch the videos in the aforementioned documentation pages! They will help understanding certain constructs.
A preview of what the dismissible might look like:
A preview of what the SizedTransition might look like: