更改floatingActionButton的大小
更改floatingActionButton的大小
提问于 2021-02-21 09:36:48
我想改变FloatingActionButton的大小。但是，下面不接受height和width值。
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xff33333D),
onPressed: () {},
child: Icon(Icons.camera),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,我如何调整才能做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-21 09:56:32
FloatingActionButton尺寸在Material Design：https://material.io/components/buttons-floating-action-button中定义
您有两个大小: default和mini：
要定义迷你FloatingActionButton，只需添加mini: true
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xff33333D),
mini: true,
onPressed: () {},
child: Icon(Icons.camera),
),现在，如果您想要其他大小，可以使用ElevatedButton
floatingActionButton: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 200, height: 200),
child: ElevatedButton(
child: Icon(Icons.camera, size: 160),
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
),
),
),完整的源代码
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButton: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 200, height: 200),
child: ElevatedButton(
child: Icon(Icons.camera, size: 160),
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
),
);
}
}您可以在此处找到定义圆形按钮的其他方法：https://www.kindacode.com/article/how-to-make-circular-buttons-in-flutter/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66298315
复制相关文章
相似问题
腾讯云开发者
