I am Making an App with a custom bottom bar. I have made a screen having two containers in a stack one container is the Screens changer and the second container is a bottomMenuBar. I am changing the screens easily from bottomMenuBar container but inside one of the child screens i want to change the the whole screen from a button. please help!
enter image description here
Use this statement:
FlatButton(
child: Text('Third Screen'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => ThirdScreen()));
},
),
Related
I have a list of Screens in a custom drawer.
Screen 1,
Screen 2,
Screen 3
What is the proper way of navigating from Screen 1 to Screen 2 on push of a button. Currently, I am losing the hamburger (the drawer button) option when I push or push replace.
The code I have was not written by me and I do not have access to the person who wrote the code.
Any thoughts?
Just use the standard navigation:
TextButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => Screen2()));
}
child:
//child goes here
)
I try go to another page using bottom app bar button with code under onPressed like this:
TextButton(
onPressed: () {
Get.toNamed('/Register');
},
child: const Text("REGISTER"));
But nothing is changed, page is not refreshed. Why? How to do it?
I am new to flutter, I have a login screen, on clicking signIn button I pushed a route(Landing Screen) using pushReplacement (beacause i don't want to let the user hit back button and go to login screen again), my landing page consist of bottomNavigationBar, i want my bottomNavigtionBar persist all the time in app so i decided to use persistent_bottom_nav_bar libaray.
my navbar items are (home, serach and setting), on my home navBarItem child widget i have one button named "goToNextScreen", when i pressed "goToNextScreen" button i pushed a new route, now on this next Screen i just want to have a back button on appbar so that i can come back to my home navbarItem child widget again(Landing Screen).
To add a back button to AppBar you have to define the leading property
a little example of it
AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
bottomOpacity: 0,
shadowColor: Colors.transparent,
leading: IconButton(
icon: SvgPicture.asset(
"assets/icons/arrow_back.svg",
color: AppColors.currentAppTheme.boxBackgroundTextColor,
),
onPressed: () {
Navigator.pop(context);
},
),
);
Inside goToNextScreen are you using Navigator.pushReplacement?
If yes, change it to Navigator.push.
Navigator.pushReplacement removes the current screen from the stack before navigating to next screen.
Since you have only one screen left and that too is replaced by the NextScreen, you have no-where to go back.
I need help with the animation, when I click on the FAB icon in the first screen the icon will go up with animation and the other screen (shown in second image) should be displayed with animation like curtain. And the fab icon should be set in the app bar just like second image.
Bottom menu should be there in both of the screen just like the screenshots given.
you can do one thing that just wrap floating action button to AnimatedContainer
AlignmentDirectional _ironManAlignment = AlignmentDirectional.bottomCenter;
...
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: AnimatedContainer(
duration: Duration(seconds: 2),
alignment: _ironManAlignment,
child: FloatingActionButton(
onPressed: () {
_flyIronMan();
},
child: Icon(Icons.add),
),
),
like this
when you press button then call this method
void _flyIronMan() {
setState(() {
_ironManAlignment =
AlignmentDirectional(0.0, -0.8); //AlignmentDirectional(0.0,-0.7);
});
}
Just wrap buttons on each page with Hero widget, like that:
Hero(
tag: 'fab',
child: FloatingActionButton()
);
With the design you want to achieve, I suggest you to use sliding_up_panel instead of pushing new screen.
It has a parameter collapsed, in which you can put FloatingActionButton to expand panel on tap, and show the same button inside the expanded panel. Just set panel non-draggable, and it won't expand on swipe.
Please read it's documentation carefully, I'm sure you can achieve the effect you want with this widget.
Is there any way to handle long press on the items of BottomNavigationBar in Flutter?
I see "onTap" event handler, but nothing else and I also cannot wrap the Items into GestureDetector.
I can wrap the whole BottomNavigationBar section into the GestureDetector but in this case it's not possible to realize which Item was pressed :-/
Thanks in advance!
After couple of days I finally understood how to realize it: you just need (as almost always) wrap Icon and Text of you bottom navigation bar items into GestureDetector widget and it works :)
The snippet would be:
new BottomNavigationBarItem(
icon: GestureDetector(
onLongPress: (){print("long tap icon");
setState(() {
_resetSct(context, i);
});
},
child: new Image.memory([skiped])), //Icon(Icons.looks_one),//photos[0].icon,
title: GestureDetector(
onLongPress: (){print("long tap title");
setState(() {
//do stuff
});
},
child: Text([skipped]))
With Flutter I recommend you to create your custom Bottom Navigation Bar as it is very easy to do.
Note: There is no way to do what you want using the default BottomNaivgationBarItem.
You need also to add enableFeedback as true and wrap your icon with GestureDetector
BottomNavigationBar(
enableFeedback: true,
This is works for me.