I have created a navigation bar in flutter, now I want to add a button in between the navbar icons as shown in this image.
I want this
But I am getting this. I am getting this
I brought the button in the middle with following code:
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(PhosphorIcons.plusLight,color: navBarColor),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Is there any way to bring it in the middle of the navbar?
If there is a there is a way to give circle background color to a navbar destination, then it would be better.
Try adding an alignment to the fab
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: const EdgeInsets.only(bottom: 6.0),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
),
floatingActionButton: Stack( [ Position( bottom: -20, FloatingActionButton( onPressed: () {}, child: const Icon(PhosphorIcons.plusLight,color: navBarColor), ) ) ]), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Do not use a FloatingActionButton with a navbar like that. Just add the + action as another button in the middle of the navbar.
Related
I want to greyout a FloatingActionButton in Flutter. How do I do that?
Changing the onPress to null doesn't work:
floatingActionButton: const FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
)
there are two options....
you can specify the background colour as grey just like this:
floatingActionButton: const FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
backgroundColor: Colors.grey,
),
You can wrap it with Opacity widget just like this:
floatingActionButton: const Opacity(
opacity: .3,//level of opacity 0~1
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
backgroundColor: Colors.grey,
),
),
I am having a hard time finding out why this docked floating action button behaves like this. When I press the floating action button, it shows a weird background shape when pressed.
Code:
floatingActionButton: Padding(
padding: const EdgeInsets.only(top: 155),
child: Container(
height: 80,
width: 100,
child: FittedBox(
child: FloatingActionButton(
onPressed: () => setState(() {_currentIndex=4;}),
child: Tab(
icon: Image.asset('images/scan.png'),
),
backgroundColor: Colors.transparent,
elevation: 0,
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
I have a problem where If I wrap my FABs placed a the end of a BottomNavigationBar in a Column, It changes their positions. I don't want to wrap it in a stack because than it is unclickable, I tried various ways to fix that, but none of them worked.
FAB 1:
Widget add(){
return new FloatingActionButton(
onPressed: (){Navigator.push(context, new MaterialPageRoute(builder: (context) => HomePage()));},
heroTag: 'btnAdd',
child: new Icon(Icons.add),
backgroundColor: Colors.blue,
elevation: 0.0,
splashColor: Colors.redAccent,
);
}
FAB 2:
Widget floatMain(){
return new FloatingActionButton(
heroTag: 'btnMain',
child: new AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _animateIcon,
),
tooltip: 'floatMain',
onPressed: animate,
backgroundColor: _buttonColor.value,
);
}
FAB Call:
floatingActionButton: new Container(
child: new Stack(
children: <Widget>[
new Container(
child: new Transform(
transform: Matrix4.translationValues(0.0, _translateButton.value - 56, 0.0),
child: add(),
),
),
floatMain(),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked
So, if I wrap it in a Stack it works, but it doesn't work with a Column.
If you need only FAB button buttom right align. Inside column
Try it.
Expanded(
child: Align(
alignment:FractionalOffset.bottomRight,
child: Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: floatMain()//Your FAB widget here,
),
),
),
Is there an 'out of the box' implementation of the functionality you get in the google app/etc. where the button at the bottom appears that allows you to 'Tap to update'? A custom snack bar doesn't seem viable as you have to have the title as well as the onTap action.
Try Using Floating Action Button
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
height: 40,
child: RaisedButton(
color: Colors.blue,
onPressed: () => {},
child: Text('Tap to Update'),
),
),
),
try this combination
Scaffold(
bottomNavigationBar: FlatButton(
child: Text('Flat Button'),
onPressed: () {},
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
floatingActionButton: RaisedButton(
child: Text('Floating Button'),
onPressed: () {},
),
);
I am trying to have multiple floatingActionButtons on a page in a flutter app, but I haven't been able to solve myself as the instructions on the internet aren't clear. I want the floating action buttons to be on the bottom right of the app. The current code correctly has two floatingactionbuttons, but they appear at the top right. Can someone please let me know how to do this. Thanks! Here is my curret code that puts two floatingactionbuttons in the top right but I want them in the bottomright.
#override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: Column(
children: <Widget>[
FloatingActionButton(
heroTag: "btn1",
child: Icon(Icons.add),
onPressed: () {
setState(() {
list.add(list.length);
});
}),
FloatingActionButton(
heroTag: "btn2",
child: Icon(Icons.add),
onPressed: () {
setState(() {
list.add(list.length);
});
}),
]), //column end
You can use something like this:
floatingActionButton: Stack(
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom:80),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: "btn1",
onPressed: (){},
child: Icon(Icons.camera_alt),),
),),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: "btn2",
onPressed: (){},
child: Icon(Icons.add_photo_alternate),),
),
],
)