I have a floating action button which opens the drawer. I want it to stay in its place when it opens the drawer and just change the icon to close icon with animation. I couldn't find a good solution to do this.
I tried wrapping inside my drawer with scaffold and adding a floating action button there and using hero widgets so make it look like it stays in its place but didn't help at all.
Is there anyway to achieve this?
U can use foldable Sidebar package to achieve this functionalities that's package is available on :
https://pub.dev/packages/foldable_sidebar
And check this piece of code how to use this :
child: Scaffold(
body: FoldableSidebarBuilder(
drawerBackgroundColor: Colors.deepOrange,
drawer: CustomDrawer(closeDrawer: (){
setState(() {
drawerStatus = FDBStatus.FDB_CLOSE; // For Closing the Sidebar
});
},),
screenContents: FirstScreen(), // Your Screen Widget
status: drawerStatus,
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
child: Icon(Icons.menu,color: Colors.white,),
onPressed: () {
// To Open/Close Sidebar
setState(() {
drawerStatus = drawerStatus == FDBStatus.FDB_OPEN ? FDBStatus.FDB_CLOSE : FDBStatus.FDB_OPEN;
});
}),
),
),
Related
I'm developing an application with a FAB on the navigation bar, and when the keyboard appears FAB goes up with the keyboard. I want FAB to stay in the navigation bar as a fixed location.
Normal UI
With Keyboard
I've tried using keyboard_visibility: ^0.5.6 as mentioned in the earlier question. Flutter: Floating action button fixed location
However this plugin is deprecated, so I'm not able to use it.
This is the code related to FAB button.
#override
Widget build(BuildContext context) => Scaffold(
extendBody: true,
body: IndexedStack(
children: pages,
index: index,
),
bottomNavigationBar: TabBarMaterialWidget(
index: index,
onChangedTab: onChangedTab,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => print('Hello'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
void onChangedTab(int index) {
setState(() {
this.index = index;
});
}
What needs to be done to solve this ? (If there is any other plugin like the above please let me know how to use it to solve this issue / or any other method)
From the docs:
bool? resizeToAvoidBottomInset
if there is an onscreen keyboard displayed above the scaffold, the
body can be resized to avoid overlapping the keyboard, which prevents
widgets inside the body from being obscured by the keyboard.
return Scaffold(
resizeToAvoidBottomInset: false,
...
you have to put the FAB inside the bottomNavigationBar then it will be located at the bottom always.
In Flutter i need to add back icon image in app bar in flutter. I m new to flutter learning & developing any help would be appreciated.
I need to customise the back button image in app bar
Please let me know How to add back icon image in app bar in flutter?
Back IconButton is automatically enabled when you Navigate from another screen.
By using this code
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
If you already Navigated from another screen and are still not showing then slightly change the AppBar field
AppBar(
automaticallyImplyLeading:true,
)
There is a widget call : BackButtonIcon()
AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: const BackButtonIcon(),
),)
if you use an AppBar widget in your Scaffold, the back arrow icon will be displayed automatically when you push a new page with the Navigator.
If you want to add manually the icon, you can add it in the leading property inside the AppBar:
AppBar(
leading: IconButton(
icon: const BackButtonIcon(),
onPressed: () { },
)
);
Hi guys i want to chage the beheviour of exiting back button funcionality of Android's defaul bottom bar. In my app if i press the "arrow" it close the application but i want to it come back to previous screen. I don't know how to do it i tried with appBar but using onPressed () appears a black screen. Altrought my mind the best and elegant solution is to change the "arrow" beheviour and it also has to work for IOS. How can i do it?
This is the appBar code
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
color: red,
),
),
if you want to change the behaviour of the bottom back button of app you can use onWillPop
WillPopScope(
onWillPop: () => backPress(),
child: Scaffold(
......
and backpress function decides what to do instead
Future<bool> backPress() async {
print("hellp");
return false;
}
I'm trying to hide keyboard when tapped everywhere outside of textField. So I wrapped Scaffold with GestureDetector and set onTap with unfocused(). That works well however when a button is pressed then the keyboard is still active
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Scaffold(
appBar: AppBar(
actions: <Widget>[FlatButton(child: Text('Done'), onPressed: () {})],
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('something'),
onPressed: () {},
),
TextField(),
],
),
),
);
}
Is there any way to remove the focus without adding that unfocused in onTap of all buttons.. Reason is I've got many buttons there and some has even onLogTap set so there would be a lot of duplicate codes
You need to also add code for hide keyboard inside onPressed() method of FlatButton
FlatButton(
child: Text('something'),
onPressed: () {
FocusScope.of(context).unfocus();
},
),
was hoping for some solution where I wouldn't need so many duplicate codes to do one thing.
AFAIK that is not possible because the click event of GestureDetector widget and click event of FlatButton both are different,
You are registering different/separate click event of FlatButton that's why your keyboard is not hiding when you click on FlatButton
Now the reason why your keyboard not hiding when pressed on buttons
Because the click event of your GestureDetector widget if overridden by the click event of your FlatButton
SOLUTION
You can do one thing, create a common method to hide the keyboard, and call that method to from button click
By thinking a little outside of the box I have managed to hide keyboard on all taps by modifying GestureDetector..
Widget build(BuildContext context) {
return GestureDetector(
onPanDown: (pd) {FocusScope.of(context).unfocus();}, //<- replaced
child: Scaffold(
appBar: AppBar(
actions: <Widget>[FlatButton(child: Text('Done'), onPressed: () {})],
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('something'),
onPressed: () {},
),
TextField(),
],
),
),
);
}
Now the keyboard will hide on taping everywhere outside of the TextField even on Buttons click.. No need to hide it in each button click. Please if you know about better solution then let me know
UPDATE:
This solution will create exception when tap on already focused TextField
I have one application of tabbars. one tab have textfield. It shows keyboard. I want to hide keyboard after press ob any other tab. I used below code but its still not working on other tabs.
return new Scaffold(
key: _scaffoldKey,
resizeToAvoidBottomInset: false,
backgroundColor: blackColor,
body: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Stack(children: <Widget>[
_showForm(),
],)
),
);
you can use onTap under TabBar() like this:
TabBar(
onTap: (_) => FocusManager.instance.primaryFocus?.unfocus(),
tabs: [
tab1(),
tab2(),
)
this will make every tab unfocus the keyboard and move to other tab as well
Use FocusScope.of(context).unfocus() when tab change.
when you click to change tab write below line :
FocusScope.of(context).requestFocus(new FocusNode());