直播系统开发,Flutter创建圆圈图标按钮
直播系统开发,Flutter创建圆圈图标按钮实现的相关代码
我找不到任何显示如何创建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创建圆圈图标按钮实现的相关代码,更多内容欢迎关注之后的文章