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: () {},
),
);
Related
Is there a way to make an Extended FAB fluid-width like described in the Material 3 specification with flutter?
Try with a fitted box:
return Container(
width: double.infinity,
color: Colors.red,
child: FittedBox(
child: FloatingActionButton.extended(
onPressed: () {},
label: const Text('My button'),
icon: const Icon(Icons.add),
),
),
);
The result, the button has a hight proportional to width, so the button becomes huge:
Try to restrict height:
return Container(
width: double.infinity,
color: Colors.red,
height: 88,
child: FittedBox(
child: FloatingActionButton.extended(
onPressed: () {},
label: const Text('My button'),
icon: const Icon(Icons.add),
),
),
);
Result the button is resised and doesn't take all space in the red container:
How to make it like this (A fluid-width container is defined by its relationship to the dimensions of the screen, such as screen width or layout grid.)
Related topics:
flutter - How to change the size of FloatingActionButton? - Stack Overflow
Full width floatingactionbutton in flutter? - Stack Overflow
user interface - How to set size to FloatingActionButton - Flutter - Stack Overflow
Just remove FittedBox as below code, It will work
return Container(
width: double.infinity,
color: Colors.red,
child: FloatingActionButton.extended(
onPressed: () {},
label: const Text('My button'),
icon: const Icon(Icons.add),
),
),
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 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.
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,
),
),
),
I am developing an app with Flutter, and I want to have 2 FABs on the main screen. One in the BottomAppBar which I have done.
Scaffold(
appBard: AppBar(title: Text("My App")),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
)
I want to have a second FAB positioned and fixed in the right bottom side of the screen in plus of the centered FAB like the following maquette:
Is there any way to achieve that?
I don't think there is any built in way of doing this with the scaffold, but it should be easy enough to just use a stack as your scaffold body, since you can add a floating action button anywhere. However, if you have two, you will need to change the hero tag on one of them to avoid errors when moving to/from that page.
Scaffold(
appBar: AppBar(title: Text("My App")),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
body: Stack(
alignment: Alignment.bottomRight,
children: [
Container(
child: //Use this as if it were the body
),
//Setup the position however you like
Padding(
padding: const EdgeInsets.all(16.0),
child: FloatingActionButton(
heroTag: null, //Must be null to avoid hero animation errors
child: Icon(Icons.add),
onPressed: () => {},
),
),
],
),
)
Try this:
Scaffold(
appBar: AppBar(title: Text("My App")),
body: Stack(
children: [
Positioned(
bottom: 16,
right: 16,
child: FloatingActionButton(
heroTag: null,
child: Icon(Icons.add),
onPressed: ()=>{}
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Colors.black54,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[
]
),
),
),
)