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.
Related
I want to implement this page swipe behaviour in Flutter as shown in the picture. The user should be able to drag the screen from the right edge of the screen to the left up until the page is dragged halfway through the screen. Once released, the app will move onto a new page.
Desired Outcome
You can use Slidable Package and wrap the whole page in a slideable.
Slidable(
key:UniqueyKey(),
endActionPane: ActionPane(
onDismissed: (){}, // Leave empty, confirmDismiss will handle event
confirmDismiss: () asnyc {
// function that rerender page with next question
}
children: [] //list of widgets to show when slide
child: // this is the widget that shows and will be slideable
if you want to have both sides you just add startActionPane aswell.
I set two widgets in a Stack(), the one in the back is a sidebar and the one in the front is my main page.
When I click on the menu button from the main page, the main page gets shifted to the right and then the user can see the sidebar.
Now the problem is when the sidebar gets displyed i'm obliged to click exactly on the menu button to go back to the main page.
What i want to do is just to click anywhere in the main page to hide the sidebar.
I mean that i want to set the whole main page as a button when the sidebar is displayed.
You can use InkWell
InkWell(
onTap: (){
/// do something
},
child: Text('data') /// your widget,
),
You can also use GestureDetector
Generally if you want to make anything tappable you can just wrap the widget with GestureDetector
I fixed it by wrapping the main page with InkWell() and I added this to the onTap property"
InkWell(
onTap: isSidebarCollapsed ? () {
setState(() {
isSidebarCollapsed = false;
});
} : null,
child: Container(...)
)
Note that isSidebarCollapsed is the variable that determines if the menu is displayed or not.
Explaination of the code:
If the sidebar is collapsed (is displayed) then the onTap property returns a function where I set the variable isSidebarCollapsed to false (to say that the sidebar is gonna be hidden).
Else it returns null
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()));
},
),
I have an app that has a ListView and Floating Button. I wanted to hide the Floating Button if Index 0 in the ListView is shown and show the Floating Button when Index 0 is not shown in the ListView. Most of the information in the web (including Stackoverflow) covers hiding the button when scrolling (direction) and not based on the index shown by ListView.
you can checklist null or not. I just add a demo code.
List<String> demoList = new List<>();
floatingActionButton: demoList != null ?
FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
)
:Text(''),
);
if the list has a value then it shows a floating button.
Use Visibility widget around FloatingActionButton. When the item shows, just call setState() method with visibility value.
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.