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
Related
I have my custom Bottom Navigation Bar in one dart file, i.e. bottomnavbar.dart. And I have list of multiple screens(or pages) in my home.dart file. I am using an .obs variable to store my selected index value.
code from home.dart file:
var selectedIndex = 0.obs;
final screen = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
const Page5(),
];
...
body: screen[selectedIndex.value],
...
Even if I change the variable value (like 0.obs to 1.obs), page not changing, why??
next of, In my bottomnavbar.dart file, I have extracted and made a widget for my nav bar 'items'. And I have tried to wrap the item widget with Obx:
Widget bnbItems(String image, int index, double height) {
return Obx(
() => InkWell(
splashColor: Theme.of(context).brightness == Brightness.dark
? Colors.white.withOpacity(0.5)
: Colors.pink.withOpacity(0.5),
enableFeedback: true,
onTap: () => setState(() {
selectedIndex.value = index;
_controller.animateTo(index / 4);
// print(selectedIndex);
}),
child: Container(
alignment: Alignment.center,
width: 50,
height: 50,
child: Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Image.asset(
image,
height: height,
),
),
),
),
);}
and I am getting this error:
[Get] the improper use of a GetX has been detected.
You should only use GetX or Obx for the specific widget that will be updated.
If you are seeing this error, you probably did not insert any observable variables into GetX/Obx
or insert them outside the scope that GetX considers suitable for an update
(example: GetX => HeavyWidget => variableObservable).
If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
Can anyone give me the solution with some code and explanation? And also how will I be able to set a particular screen as the initial screen?
Replace on tap with this code
onTap: () {
selectedIndex.value = 1; // page index you want to view
},
then remove Obx(()=> on bnbItems widget
Widget bnbItems(String image, int index, double height) {
return InkWell(
splashColor: Theme.of(context).brightness == Brightness.dark
? Colors.white.withOpacity(0.5)
: Colors.pink.withOpacity(0.5),
enableFeedback: true,
onTap: () {
selectedIndex.value = 1; // page index you want to view
},
child: Container(
alignment: Alignment.center,
width: 50,
height: 50,
child: Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Image.asset(
image,
height: height,
),
),
),
);}
then use Obx(()=> wrapper on the body's widget
body: Obx(() => screen[selectedIndex.value]),
why you are using setState in GetX structure?
Try this code for onTap()
onTap: () {
selectedIndex.value = index;
_controller.animateTo(index / 4);
// print(selectedIndex);
},
to set initial screen use index no of that screen in var selectedIndex = 0.obs; instead of 0.
As far as I know, due to this question Flutter AbsorbPointer vs IgnorePointer difference , AbsorbPointer will absorb tap event and other widgets below it will not receive tap event, but when I use AbsorbPointer like this. it still pass tap event to its parent:
GestureDetector(
onTap: () {
print('123'); // This still call when I tap on red container
},
child: Container(
color: Colors.green,
width: 300,
height: 300,
child: Center(
child: AbsorbPointer(
absorbing: true,
child: GestureDetector(
onTap: () {
print('567');
},
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
),
),
),
)
So my question is does AbsorbPointer only work with widget same level in Stack and doesn't work with its parent?
In your code absorbing property having true value. which means your red container is not clickable. so parent green container have tapped. Incase if you change absorbing property to false, red container can able to tap.
I am trying to show a splash screen with an animation, and I found this article: https://medium.com/#galadhruvil7/flutter-splash-screen-animation-16c50e18b9d8 I think that's very simple but wonderful, the case is I would like to change the flutter icon into another image and text. Here is the code
SplashScreenState() {
_timer = new Timer(const Duration(seconds: 1), () {
setState(() {
assetImage = Row(
children: [
Image.asset('assets/logo.png', height: 500, width: 500),
Text("trial")
],
);
});
});
}
and showing the widget like this:
return Scaffold(
backgroundColor: Colors.grey[850],
body: Center(
child: Container(
child: assetImage,
),
),
);
but by running that code, there is no animation effect. Is there a way to keep the animation like the source that I have given while the Flutter logo is changed into image and text ?
Through AnimatedSwitcher with conditional operators you can change your logo with icon and text.
Example - AnimatedSwitcherExample
Wanna implement same functionality that is done here with images:
Flutter how to change image after onTap with Gesture Detector
Im using this package:
https://pub.dev/packages/flutter_svg/example
Even though I'm able to do this in IconButton, I need this in GestureDetector, not in IconButton, so just to be clear, need help how to implement SVG into GestureDetector not IconButton!
I'm able to get SVG rendered on the screen but can't figure it out how to implement it in GestureDetector, to render SVG on screen, Im doing it like this:
Expanded svgTest({double blackKeyWidth}) {
return Expanded(
child: Container(
child: IconButton(
icon: SvgPicture.asset(
'assets/images/1.svg',
fit: BoxFit.fill,
allowDrawingOutsideViewBox: true,
width: 500,
),
onPressed: null //do something,
),
),
);
}
Cant figure out how to implement SVG in GestureDetector, it can't go in as Image and Gesture Detector doesn't accept icon, or Im not doing it right.
Thank
If you want to change the image on the onTap method of the iconButton then you should have to change the path of the image in onTap method using setState
String imagePath = "assets/images/1.svg";
Expanded svgTest({double blackKeyWidth}) {
return Expanded(
child: Container(
child: IconButton(
icon: SvgPicture.asset(
'${imagePath}',
fit: BoxFit.fill,
allowDrawingOutsideViewBox: true,
width: 500,
),
onPressed: (){
setState(() {
imagePath = "assets/images/2.svg";
});
},
),
),
);
}
EDITED: (For Gesture Detector You Can Simply Wrap the SVG in it)
Replace the iconbutton with the GestureDetector and Add its onTap and onTapUp methods too.
GestureDetector(
onTap: () {
setState(() {
imagePath = "assets/images/2.svg";
});
},
onTapUp: (TapUpDetails tapUpDetails) {
setState(() {
imagePath = "assets/images/1.svg";
});
},
child: SvgPicture.asset(
'${imagePath}',
//fit: BoxFit.fill,
//allowDrawingOutsideViewBox: true,
//width: 500,
),
),
For More About GestureDetector and Flutter SVG Click Here
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;
}