I am using animated icons in my FloatingActionButton (FAB) at bottom navigation bar. But FAB overlapping any page or dialogue open from the BottomAppBar, how can I resolve this?
When I open a new page with Navigator.push, Navigator.pushNamed, modalBottomSheet or a dialogue, the fab overlapping them.
Only works when I use pushReplacementNamed to open a new page.
How can I show the modalSheet without the fab on it and a page using just pushNamed?
I use this reference.
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: _buildFab(context, model),
bottomNavigationBar: BottomAppBar(
color: CustomTheme.getThemeData(context).getAccentColor(),
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () => _showModal(),
),
IconButton(
icon: Icon(Icons.home),
onPressed: () => {},
),
],
),
),
This is my FAB
And this happen when a show the modal or any page
Please I need your help..
I don't know what else to do. :-(
If this is happening with the Modal bottom sheet then try to increase the elevation of the bottom sheet. Like this
showModalBottomSheet(context: context, builder: (context) {
return AddressChangeBottomSheet(
title: "Change Area",
showAddress: false,
cityAreaList: list, onAddressChangeSubmit: () {
mainBloc.fetchUpdatedUser();
});
}, elevation: 10.0)
Related
I am pretty new to flutter/dart, so this might be a silly question...
I wanted to have a search bar, that when tapped the first time, displays a series of listview tiles (like pre-canned search terms). I wanted a subsequent tap to then open the soft keyboard for user input. As it stands now, a single tap opens the listview tiles, and also opens the soft keyboard.
After some looking around, I am thinking I would need to wrap the searchbar in a GestureDetector, and handle the tap / double-tap gestures through that. What I can't quite figure out, is how to tie the GestureDetector gestures, ontap and ondoubletap, to the child widget actions... I think when the searchbar gets focus (onTap), the soft keyboard opens, so not sure if that behavior can be (easily) uncoupled...
The flutter cookbook example uses this:
ScaffoldMessenger.of(context).showSnackBar(snackBar);
but the API docs say this only manages snackbars and MaterialBanners:
"Manages SnackBars and MaterialBanners for descendant Scaffolds."
Here is the framework I have so far:
Widget searchBar() {
//final FloatingSearchBarController searchBarController = FloatingSearchBarController();
return
GestureDetector(
onTap: () =>{},
onDoubleTap: () => {},
child: FloatingSearchBar(
controller: searchBarController,
hint: "search",
openAxisAlignment: 0.0,
width: 600,
axisAlignment: 0.0,
scrollPadding: const EdgeInsets.only(top: 16, bottom: 20),
elevation: 4.0,
onQueryChanged: (query) {
},
builder: (BuildContext context, Animation<double> transition) {
return ClipRRect(
child: Material(
color: Colors.white,
child: Container(
color: Colors.white,
child: Column(
children: [
ListTile(
title: const Text('Item 1'),
onTap: () {},
),
ListTile(
title: const Text('Item 2'),
onTap: () {},
),
ListTile(
title: const Text('Item 3'),
onTap: () {},
),
],
),
),
)
);
},
)
);
Any thoughts would be greatly appreciated!
I want to add two icons on FAB Flutter, one icon will be a map(onPressed show map) and other icon will trigger showBottomModel. A kind of icon switch based floatingActionBar, I don't know if that is possible or please tell me a work around. Thanks.
You can use flutter_speed_dial package/dependency here or try below code hope its help to you.
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.person),
),
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.home),
),
]
),
Your result screen ->
How do I this bottom bar menu in Flutter?
bottom menu hidden
bottom menu opened
There is a bar at bottom and when tapped, the bar is opened with a list and a button
You can use BottomSheet here's example :
void _modalBottomSheetMenu(BuildContext context){
showModalBottomSheet(
context: context,
builder: (builder){
return ListView(
children: [
ListTile(
leading: CircleAvatar(),
title: Text("John Doe"),
subtitle: Text("Nearby"),
),
RaisedButton(child: Text("Button"), onPressed: () => print("Pressed"))
]
);
}
);
}
For more information Flutter Documentation , Medium Guide
Identify status e.g. isExpanded
then display your cells(Widgets) based on that. Either you can use Visibility widget,
Visibility(
visible: (isExpanded),
child: Row(
children: <Widget>[
Image.asset('yourImage')
Text("some text"),
],
),
)
Or you can just use a condition like,
if (a == b)
Row(
children: <Widget>[
Image.asset('yourImage')
Text("some text"),
],
),
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
it's possible to create a float action button which open more float buttons, and If yes, can you give me a example?
Like these :
Flutter gives a named parameter in Scaffold Widget - ‘floatingActionButton’. And the named parameter floatingActionButton shouldn't take only FloatingActionButton widget, it should take Widget and it does. So you can assign another widget instead of FloatingActionButton like as Column, Row, Stack. And it works.
floatingActionButton: Row(
children: [
RaisedButton(child: Text('Button1'), onPressed: (){}),
RaisedButton(child: Text('Button1'), onPressed: (){}),
]
),
I just give you a reference example, it will work - you just need to customize the styles and positioning as you want. Hope it will be helpful.
Using the SpeedDial widget provided by flutter_speed_dial package you can use multiple float button as children of a parent floating action button. You can also add animated icons.
In your pubspec.yaml under dependecies, add:
dependencies:
flutter_speed_dial: ^1.2.5
Now you can use the SpeedDial widget in your FAB:
floatingActionButton: SpeedDial(
//provide here features of your parent FAB
children: [
SpeedDialChild(
child: Icon(Icons.accessibility),
label: 'First',
onTap: null,),
SpeedDialChild(
child: Icon(Icons.accessibility),
label: 'Second',
onTap: null,),
...
]
),
Try This
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: getImage,
child: Icon(Icons.camera),
),
SizedBox(height: 8,),
FloatingActionButton(
onPressed: getImage,
child: Icon(Icons.camera),
),
],
)