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 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 faced with this problem: I found the only way to do so that the background of the button was in full height when using safearea on iPhone 11. But now the button is pressed partially podskajet. Please how to make the entire blue area pressed as a button. Thank you all for your answers.
I add a screenshot and a piece of code as it is implemented now.
Container(
color: Colors.blue,
child: SafeArea(
left: false,
right: false,
child: Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
child: RaisedButton(
elevation: 0,
onPressed: () {},
child: Text("Add", style: TextStyle(color: Colors.white)),
color: Colors.blue,
),
),
),
),
),
You can check by changing the color of this Container.
Container(
color: Colors.red,
Or you can use Debug Paint using the inspector. And then you will realize that some area is not in the button. This is the reason why onTap is not working.
After that time you can use InkWell easily with wrapping all your Container.
InkWell(
onTap: () {
// Here is your onTap function
},
Container(
color: Colors.red,
child: SafeArea(
left: false,
right: false,
child: Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
// In fact, you don't need a button anymore.
child: RaisedButton(
elevation: 0,
onPressed: () {},
child: Text("Add", style: TextStyle(color: Colors.white)),
color: Colors.blue,
),
),
),
),
),
),
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>[
]
),
),
),
)
I'm trying to set a size to a FloatingActionButton in flutter, I wanna set width/height, I mean, make the button bigger, I was looking for a circular button, but the only one that I got was this one, so, I started to work with this, but I need it a little bigger.
wrap your FAB with a FittedBox inside a Container or SizedBox and then change the width and the height of it.
example :
floatingActionButton: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(onPressed: () {}),
),
),
Use a Container where you can specify width and height, then use a RawMaterialButton, like this:
final myFabButton = Container(
width: 200.0,
height: 200.0,
child: new RawMaterialButton(
shape: new CircleBorder(),
elevation: 0.0,
child: Icon(
Icons.favorite,
color: Colors.blue,
),
onPressed: () {},
),
);
Screenshot:
Small (40 x 40)
FloatingActionButton.small(
onPressed: onPressed,
child: Icon(Icons.edit),
)
Regular (56 x 56)
FloatingActionButton(
onPressed: onPressed,
child: Icon(Icons.edit),
)
Large (96 x 96)
FloatingActionButton.large(
onPressed: onPressed,
child: Icon(Icons.edit),
)
Extended
FloatingActionButton.extended(
onPressed: onPressed,
label: Text('Extended'),
icon: Icon(Icons.edit),
)
Custom size (A x B):
SizedBox(
width: 20,
height: 20,
child: FittedBox(
child: FloatingActionButton(
onPressed: onPressed,
child: Icon(Icons.edit),
),
),
)
You do not have to reinvent the wheel, flutter team knew it will be needed.
Instead of using regular FloatingActionButton() use FloatingActionButton.extended()
example code:
FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.save),
label: Text("DOWNLOAD"),
),
src: proandroiddev
Update
Just using a SizedBox does not seem to scale the child inside the FAB. You need to use a FittedBox in between.
floatingActionButton: SizedBox(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
),
),
Thanks chemturion for the comment.
Please checkout Raouf Rahiche's answer for more details.
Old Answer
Use a SizedBox
SizedBox(
width: 200.0,
height: 200.0,
child: FloatingActionButton(
onPressed: () {},
),
)
Most of the answers here using hardcoded values, but actually we have to apply generic solutions here, which should be constant in all the UI.
Scaffold(
floatingActionButton: Container(
height: MediaQuery.of(context).size.width * 0.2,
width: MediaQuery.of(context).size.width * 0.2,
child: FloatingActionButton(onPressed: () {}),
),
Set width and height using MediaQuery which will be same across the devices.
Output:
You can wrap your button with a Transform.scale() widget:
floatingActionButton: Transform.scale(
scale: 1.5,
child: FloatingActionButton(onPressed: () {}),
)
RawMaterialButton(
elevation: 2.0,
shape: CircleBorder(),
fillColor: Colors.red,
onPressed: (){},
child: Icon(
Icons.add,
color: Colors.white,
size: 20.0,
),
constraints: BoxConstraints.tightFor(
width: 56.0,
height: 56.0,
),
)
BY this way .. you can add any type of button.
This is how I have implemented in one of my apps:
floatingActionButton: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: _loadProgress,
child: Icon(Icons.ac_unit_outlined),
child: Text(
'Get Joke!',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 10.0),
),
),
),
),
FloatingActionButton has a property called mini which can be set to true.
floatingActionButton: FloatingActionButton(
mini: true,
onPressed: (){
},
child: Icon(Icons.play_arrow_outlined),
),
you can use extendedPadding. it works for me
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
// Add your onPressed code here!
},
extendedPadding:
const EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
label: const Text('Approve'),
icon: const Icon(Icons.thumb_up),
backgroundColor: Colors.pink,
),
Please use the following option in theme.
floatingActionButtonTheme: const FloatingActionButtonThemeData(
sizeConstraints: BoxConstraints.expand(
width: 60,
height: 60,
),
)
https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html
use mini: true
FloatingActionButton(
child: Icon(
Icons.delete
),
onPressed: () {
}, mini: true,
),
Try this:
floatingActionButton: Container(
height: 50.0,
width: MediaQuery.of(context).size.width * 0.92,
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(30)),
child: Center(
child: Text(
'SAVE',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 16.0,
color: whiteTextColor),
),
),
),