I write the code to AnimatedContainer and while it s expanding it give me gradual overflow but at full extent it s no more a overflow error. I tried the code on several screens and I don t have any problems. I want.
child: GestureDetector(
onTap: () {
setState(() {
arr[index] = !arr[index];
});
},
child: Center(
child: AnimatedContainer(
width: arr[index] ? 300.0 : 300.0,
height: arr[index] ? 80.0 : 85.0+60.0*clase[index].clase,
alignment:
arr[index] ? Alignment.center : AlignmentDirectional
.center,
duration: Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
child: arr[index] ? Inchis(index) :Deschis(index),//these are the classes
),
),
),
Everything is fine but I want to escape of that little error.
Here is a video
https://imgur.com/0HXoIZN
Related
In CSS I can use filter to change brightness. It's easy to make button hover effect.
filter: brightness(1.1);
filter: brightness(0.9);
Is there any way to change widget brightness in Flutter?
If your main goal is giving a hover effect on a button, you can use the combination of animated container(for the effect) and inkwell(onHover method to notify when hovering happens)
AnimatedContainer(
height: 70,
duration: Duration(milliseconds: 200),
padding: EdgeInsets.only(
top: (isHover) ? 25 : 30.0, bottom: !(isHover) ? 25 : 30),
child: Container(
height: 30,
color: Colors.blue,
child: InkWell(
onTap: () {},
child: Text("Hover Button"),
onHover: (val) {
print("Val--->{}$val");
setState(() {
isHover = val;
});
},
),
We do this in flutter
Colors.red.withOpacity(1.1);
I want to animate the height property of the container (AnimatedContainer in code below), but I don't want to set hard numbers like this (height: _visible2 ? 160 : 40.9) because height of this container is otherwise relative to its children content (mainly Text)
AnimatedContainer(
curve: Curves.ease,
height: _visible2 ? 160 : 40.9,
duration: Duration(milliseconds: 350),
child: AnimatedOpacity(
duration: Duration(milliseconds: 400),
opacity: _visible2 ? 1.0 : 0,
child: GestureDetector(
onTap: () {
_visible2
? setState(() {
_visible2 = !_visible2;
})
: null;
},
child: myWidget
),
),
)
Is there a way to animate from zero to relative height (for example height of this container can change in landscape mode due to more room for text to lay itself on the screen) ?
I am trying to implement some custom design in an expasion panel list. Therefore, I wanted to create some kind of animation that animates smoothly from one view (e.g. header) to another view (e.g. full info of the tile) that has other dimensions (obviously, full info will be higher than just the header). This is quite easy to implement with an AnimatedContainer. However, I would need the height of the header widget and the full info widget in order to animate between these two heigths. As these values differ between tiles (other info -> maybe other height) and tracking height via global keys is not my preferred solution, I decided to use the much simpler AnimatedSwitcher instead. However, the behavior of my AnimatedSwitcher is quite strange. At first, the other tiles in the ListView (in my example the button) move down instantly and subsequently the tile expands. Has anyone an idea of how I could implement some code in order to achieve the same animation that I would get from AnimatedContainer(button/other tiles moving down simultaniously with the tile expanding)? Thanks in advance for any advice. Here is my code:
class MyPage extends State {
List _items;
int pos;
#override
void initState() {
pos = 0;
_items = [
Container(
color: Colors.white,
width: 30,
key: UniqueKey(),
child: Column(
children: <Widget>[Text('1'), Text('2')], //example that should visualise different heights
),
),
Container(
width: 30,
color: Colors.white,
key: UniqueKey(),
child: Column(
children: <Widget>[Text('1'), Text('2'), Text('44534'), Text('534534')],
),
)
];
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.only(top: 100),
children: <Widget>[
AnimatedSwitcher(
duration: Duration(seconds: 1),
transitionBuilder: (child, animation) => ScaleTransition(
child: child,
scale: animation,
),
child: _items[pos],
),
RaisedButton(
child: Text('change'),
onPressed: pos == 0
? () {
setState(() => pos = 1);
}
: () {
setState(() => pos = 0);
})
],
),
);
}
}
The solution was quite simple. Just found out that there exists an AnimatedSize Widget that finds out the size of its children automatically.
I stumbled on this post and since I had a similar problem I decided to create a tutorial here on how to mix AnimatedSwitcher and AnimatedSize to solve this issue. Animations do not happen at the same time but the advantage is that you have full control on the animation provided to the switcher.
I ended up doing this in the end (please note that I'm using BlocBuilder and that AnimatedSizeWidget is a basic implementation of AnimatedSize:
AnimatedSizeWidget(
duration: const Duration(milliseconds: 250),
child: BlocBuilder<SwapCubit, bool>(
builder: (context, state) {
return AnimatedSwitcher(
duration: const Duration(milliseconds: 1000),
child: state
? Icon(Icons.face, size: 80, key: Key("80"))
: Icon(Icons.face, size: 160, key: Key("160")),
);
},
),
),
var isWidgetA = true;
final Widget widgetA = Container(
key: const ValueKey(1),
color: Colors.red,
width: 100,
height: 100,
);
final Widget widgetB = Container(
key: const ValueKey(2),
color: Colors.green,
width: 50,
height: 50,
);
...
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation<double> animation) {
return SizeTransition(
sizeFactor: animation,
child: ScaleTransition(
child: child,
scale: animation,
alignment: Alignment.center,
),
);
},
child: isWidgetA
? widgetA
: widgetB,
),
I have created a container in which two AnimatedContainers are located. When i press the down button i would like the TextFieldContainer (The content with the white TextField in the middle) to disappear by decreasing it size to 0. Simountanesly i want to make the ToolbarContainer appear by increasing its size. So far this is what i get:
It looks like only one of the AnimatedContainers can animate its properties one at a time, which creates the werid behaviour as shown, where one of the AnimatedContainers animate quickly, then slowly and then quickly once again.
How do i make the animation smooth so the overall size of the main container does not change because the two AnimatedContainers animate their size equally quick and simountanesly?
Here is the code for the main container:
class _MessageToolbarContainerState extends State<MessageToolbarContainer> {
bool toggleToolbar = false;
#override
Widget build(BuildContext context) {
return Container(
width: widget.availableWidth - 75,
margin: EdgeInsets.only(bottom: 25.0),
constraints: BoxConstraints(minHeight: 50.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: Border.all(
color: Colors.grey,
width: 2.0,
),
),
child: Material(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
elevation: 5.0,
clipBehavior: Clip.antiAlias,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
AnimatedContainer(
duration: Duration(seconds: 1),
constraints: BoxConstraints(
minHeight: toggleToolbar ? 0.0 : 50.0,
maxHeight: toggleToolbar ? 0.0 : 100.0,
),
child: IntrinsicHeight(
child: TextFieldContent(
onDownPressed: () {
setState(() {
toggleToolbar = !toggleToolbar;
print(toggleToolbar);
});
},
),
),
),
AnimatedContainer(
duration: Duration(seconds: 1),
constraints: BoxConstraints(
minHeight: !toggleToolbar ? 0.0 : 50.0,
maxHeight: !toggleToolbar ? 0.0 : 100.0,
),
child: IntrinsicHeight(
child: ToolbarContent(
onUpPressed: () {
setState(() {
toggleToolbar = !toggleToolbar;
print(toggleToolbar);
});
},
),
),
),
],
),
),
);
}
}
EDIT:
I have boiled the problem down to one widget. I have wraped my AnimatedContainers in two IntrinsicHeight widgets to keep their content from expanding to much. If i remove the IntrinsicHeight widgets i get the following output:
As it is clearly shown the AnimatedContainers now animate smoothly. Sadly that does not fix my problem. I added the IntrinsicHeight widgets to make the content expand as the user typed in the TextField. If i remove the IntrinsicHeight widgets the content of the AnimatedContainers are not displayed properly.
The original question still stands. How do I make the 2 AnimatedContainers animate properly when they are wrapped in an IntrinsicHeight widget?
I have BottomAppBar with Row Icons.
BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(),
IconButton(),
IconButton(),
],
))
I want to make an smooth animation so that when you click on an icon, it shrinks and then returns to its original size. I would call it a tap effect. I know a way to do it through a bunch of animationcontroller, but is there any way to make it easier, like AnimatedSize or else?
Something like this:
0: IconSize = 20.0
1: onPressed: IconSize = 15.0
2: IconSize = 20.0
Try to use the AnimatedContainer widget to do that and wrap it into a GestureDetector and change the width and the height of the container like this:
bool selected = false;
BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
GestureDetector(child: AnimatedContainer(child: Icon(), width: selected ? 15.0 : 20.0), onTap: () {
setState(() {
selected = !selected;
});
},),
AnimatedContainer(child: Icon(), width: selected ? 15.0 : 20.0),
AnimatedContainer(child: Icon(), width: selected ? 15.0 : 20.0),
],
))
You can achieve that with an AnimatedBuilder, a TweenSequence and an AnimationController. The official documentation of the AnimatedBuilder explains the setup very well (even with a video).
Your TweenSequence could look like this:
final Animation<double> animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 20.0, end: 15.0)
.chain(CurveTween(curve: Curves.ease)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 15.0, end: 20.0)
.chain(CurveTween(curve: Curves.ease)),
weight: 50.0,
),
],
).animate(myAnimationController);