i want to rescale my icon and rotate my icon until it's scale become 0,but i can only 'set' icon's size which means size become instantly 0 without animation, tried to wrap icon with animated container, but it doesn't effect to icon, any ideas for rotating and rescaling icon by time ? my code's here below.
Widget build1(BuildContext context) {
Widget widget1;
var animatedContainer = AnimatedContainer(
width: double.infinity,
height: double.infinity,
duration: Duration(seconds: 2),
color: animSize ? Colors.greenAccent[700] : Colors.yellow,
child: IconButton(
icon: Icon(
Icons.group,
size: animSize ? 0:90,
),
onPressed: () {
setState(() {
animSize = true;
});
},
));
widget1 = animatedContainer;
return widget1;
}
Related
In my interface I have a row of containers like this
.
The idea is that when I pass my finger on these containers, the one under my finger gets bigger (and other changes but that's not the point).
I know how to use GestureDetector and get it bigger when I tap on the container with "onTap". But if you keep your finger down and drag it to another container nothing change. Idealy I'd like to be able to detect when the user pass his finger hover a container while touching the screen.
Appreciate if someone can advise. Thank you in advance!
You can use onVerticalDragUpdate on GestureDetector.
class DraUILien extends StatefulWidget {
const DraUILien({super.key});
#override
State<DraUILien> createState() => _DraUILienState();
}
class _DraUILienState extends State<DraUILien> {
int? activeIndex;
final double containerWidth = 30;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
onVerticalDragUpdate: (details) {
activeIndex =
details.localPosition.dx ~/ (containerWidth + 16); //16 padding
setState(() {});
},
child: SizedBox(
height: 200,
child: Row(
children: List.generate(
10,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
color: index == activeIndex ? Colors.blue : Colors.grey,
width: containerWidth,
height: index == activeIndex ? 200 : 100,
),
),
),
),
),
)),
);
}
}
Play with the logic for more customization. If you need onTap functionality try including onPanDown
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 have a button with a icon inside of it. Right now I am using two different icons and change them onTap:
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
_isDropdownOpened = !_isDropdownOpened;
}
...
},
child:
_isDropdownOpened
? SvgPicture.asset(
'images/icons/arrow_down_primary.svg',
width: scaleWidth(12),
)
: SvgPicture.asset(
'images/icons/arrow_up_primary.svg',
width: scaleWidth(12),
),
),
);
This is working but I would like to have a RotationTransition. How can I rotate my icon onTap with animation, so I don't need two different SVGs?
use RotatedBox widget and change its rotation in your setState
you can do like this
child: RotatedBox(
quarterTurns: _isDropdownOpened? 2:0,
child: SvgPicture.asset(
'images/icons/arrow_down_primary.svg',
width: scaleWidth(12),
),
)
if you want to apply animation to the rotation as well consider looking to this
I'm trying to make a custom drop-down menu in Flutter that is just a simple button that on tap shows a scrollable row of products. I've attached some images that better show what I'm referring to. I tried to use an IconButton and an AnimatedContainer but I can't seem to get it working. I was hoping someone would have a better idea on how to do something like this.
Here is my code so far by the way:
class ModelsDropdown extends StatefulWidget {
final List<Phone> phones;
ModelsDropdown({#required this.phones});
#override
_ModelsDropdownState createState() => _ModelsDropdownState();
}
class _ModelsDropdownState extends State<ModelsDropdown> {
bool _droppedDown;
#override
void initState() {
_droppedDown = false;
super.initState();
}
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
border: Border.all(width: 2.0)
),
width: 32.0,
height: 32.0,
child: Column(
children: [
IconButton(
padding: const EdgeInsets.only(right: 0.0),
icon: Icon(
_droppedDown ? Icons.expand_more : Icons.expand_less
),
color: Colors.black,
onPressed: () {
setState(() {
_droppedDown = !_droppedDown;
});
}
),
_droppedDown ?
Container(
width: MediaQuery.of(context).size.width,
height: 300.0,
color: Colors.orangeAccent,
) :
SizedBox.shrink()
],
),
);
}
}
With the container at the bottom, it doesn't even work. I get an overflow error. Any help is very much appreciated. Thanks a lot, everyone.
I Think you should Change The Below Container with an AnimatedCrossFade.
Animated Cross Fade Has Two Child First and Second ...
https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html
Dont set Height for Your Child ... its Works Perfectly...
AnimatedCrossFade(
duration: const Duration(seconds: 3),
firstChild: Container(), // When you don't want to show menu..
secondChild: menu,
crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)
with this method you don't need Animated Container at top ... remove that.(return Column)...
with Animated cross Fade You don't need to Know The Height of widget and its for works dynamic Heights
-------------- if You Want to use Your Code and Use Fixed Height ----------------
width: _droppedDown ? YourWidth : 32.0,
height: _droppedDown ? 300 : 32.0,
I want to use Hero to animate the AnimatedIcon in the process of route navigation. What should I do?
_controller = AnimationController(
duration: Duration(microseconds: 1000), value: 1.0, vsync: this);
void _toggleFrontLayer() {
final AnimationStatus status = _controller.status;
final bool isOpen = status == AnimationStatus.completed ||
status == AnimationStatus.forward;
_controller.fling(velocity: isOpen ? -2.0 : 2.0);
}
leading: Hero(
child: Material(
color: Colors.transparent,
child: IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: _controller,
),
onPressed: _toggleFrontLayer,
),
),
tag: "leading",
),
leading: Hero(
child: Material(
color: Colors.transparent,
child: IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: _controller,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
tag: "leading",
),
The appbar looks like this:now
And the AnimatedIcon's animation looks like this:AnimatedIcon
What I want is showing the animation of the AnimatedIcon in the process of route navigation instead of fade in and fade out or other animations.
First things first. If you don't have a Material ancestor widget, you're probably getting an exception while you're routing between screens. To prevent it, you can wrap your IconButton in a Material with the property color: Colors.transparent.
Second, there is nothing wrong with using Hero to animate the leading button between screens, however, you won't notice a difference since the position is exactly the same and there is nothing to animate from-to. The result is something like this:
However, if you actually change the position of the IconButton between screens, you will get the Hero animation as expected.