我找不到任何显示如何创建IconButton
类似于的圆的示例FloatingActionButton
。任何人都可以建议创建一个自定义按钮的方式/需要什么FloatingActionButton
吗?
我认为RawMaterialButton更适合。
RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
您可以尝试一下,它是完全可定制的。
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
onTap: () {},
),
),
)
输出:
您只需要使用形状: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
您可以使用InkWell来做到这一点:
响应触摸的材料的矩形区域。
下面的示例演示如何使用InkWell
。**注意:**您不需StatefulWidget
要这样做。我用它来改变计数状态。
例:
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
@override
_SettingPageState createState() => new _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
int _count = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new InkWell(// this is the one you are looking for..........
onTap: () => setState(() => _count++),
child: new Container(
//width: 50.0,
//height: 50.0,
padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
decoration: new BoxDecoration(
shape: BoxShape.circle,// You can use like this way or like the below line
//borderRadius: new BorderRadius.circular(30.0),
color: Colors.green,
),
child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
//child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
),//............
),
),
);
}
}
如果要利用splashColor
,请使用材料类型为circle的小部件highlightColor
包装InkWell
小Material
部件。然后decoration
在Container
小部件中删除。
结果:
RawMaterialButton(
onPressed: () {},
constraints: BoxConstraints(),
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
记下 constraints: BoxConstraints()
,这是为了不允许向左填充。
如果需要背景图像,则可以将CircleAvatar与IconButton一起使用。设置backgroundImage属性。
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
按钮示例:
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
实际上,有一个示例如何创建类似于FloatingActionButton的圆形IconButton。
Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
)
此代码将帮助您添加按钮而不会出现不必要的填充,
RawMaterialButton(
elevation: 0.0,
child: Icon(Icons.add),
onPressed: (){},
constraints: BoxConstraints.tightFor(
width: 56.0,
height: 56.0,
),
shape: CircleBorder(),
fillColor: Color(0xFF4C4F5E),
),
最后
这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》,从编程语言到项目实战,一条龙服务!!
《Flutter Dart 语言编程入门到精通》
-
第一章 Dart语言基础
-
第二章 Dart 异步编程
-
第三章 异步之 Stream 详解
-
第四章 Dart标准输入输出流
-
第五章 Dart 网络编程
-
第六章 Flutter 爬虫与服务端
-
第七章 Dart 的服务端开发
-
第八章 Dart 调用C语言混合编程
-
第九章 LuaDardo中Dart与Lua的相互调用
《Flutter实战:第二版》
- 第一章:起步
- 第二章:第一个Flutter应用
- 第三章:基础组件
- 第四章:布局类组件
- 第五章:容器类组件
-
第六章:可滚动组件
-
第七章:功能型组件
-
第八章:事件处理与通知
-
第九章:动画
-
第十章:自定义组件
-
第十一章:文件操作与网络请求
-
第十二章:Flutter扩展
-
第十三章:国际化
-
第十四章:Flutter核心原理
-
第十五章:一个完整的Flutter应用
有需要学习资料的朋友扫描下方二维码即可免费领取!!!