如何更改浮动按钮的大小？

我试图设置一个大小为 FloatingActionButton在颤动，我想设置 width/height，我的意思是，使按钮更大，我一直在寻找一个圆形按钮，但我得到的唯一一个是这一个，所以，我开始与这个工作，但我需要它更大一点。

92302 次浏览
小开

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: () {}),
),
),

enter image description here

小开

You can wrap your button with a Transform.scale() widget:

  floatingActionButton: Transform.scale(
scale: 1.5,
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: () {},
),
);
小开

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: () {},
),
)
小开 
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.

小开

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"),
),

enter image description here

src: proandroiddev

小开

Screenshot:

enter image description here

  • 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),
)


  • 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),
),
),
)
小开

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:

enter image description here

小开

https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html

use mini: true


FloatingActionButton(
child: Icon(
Icons.delete
),
onPressed: () {
}, mini: true,
),
小开

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),
),
小开

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),
),
),
),
小开

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,
),
)

提交答案