直播系统开发，Flutter创建圆圈图标按钮

直播系统开发，Flutter创建圆圈图标按钮实现的相关代码

我找不到任何显示如何创建IconButton类似于的圆的示例FloatingActionButton。任何人都可以建议创建一个自定义按钮的方式/需要什么FloatingActionButton吗？

我认为RawMaterialButton更适合。

RawMaterialButton(<br>  onPressed: () {},<br>  elevation: 2.0,<br>  fillColor: Colors.white,<br>  child: Icon(<br>    Icons.pause,<br>    size: 35.0,<br>  ),<br>  padding: EdgeInsets.all(15.0),<br>  shape: CircleBorder(),<br>)

您可以尝试一下，它是完全可定制的。

ClipOval(<br>  child: Material(<br>    color: Colors.blue, // button color<br>    child: InkWell(<br>      splashColor: Colors.red, // inkwell color<br>      child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),<br>      onTap: () {},<br>    ),<br>  ),<br>)

输出：

您只需要使用形状： CircleBorder()

MaterialButton(<br>  onPressed: () {},<br>  color: Colors.blue,<br>  textColor: Colors.white,<br>  child: Icon(<br>    Icons.camera_alt,<br>    size: 24,<br>  ),<br>  padding: EdgeInsets.all(16),<br>  shape: CircleBorder(),<br>)

您可以使用InkWell来做到这一点：

响应触摸的材料的矩形区域。

下面的示例演示如何使用InkWell。**注意：**您不需StatefulWidget要这样做。我用它来改变计数状态。

例：

import 'package:flutter/material.dart';<br>class SettingPage extends StatefulWidget {<br>  @override<br>  _SettingPageState createState() => new _SettingPageState();<br>}<br>class _SettingPageState extends State<SettingPage> {<br>  int _count = 0;<br>  @override<br>  Widget build(BuildContext context) {<br>    return new Scaffold(<br>      body: new Center(<br>        child: new InkWell(// this is the one you are looking for..........<br>        onTap: () => setState(() => _count++),<br>        child: new Container(<br>          //width: 50.0,<br>          //height: 50.0,<br>          padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height<br>          decoration: new BoxDecoration(<br>            shape: BoxShape.circle,// You can use like this way or like the below line<br>            //borderRadius: new BorderRadius.circular(30.0),<br>            color: Colors.green,<br>          ),<br>          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.<br>          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),<br>        ),//............<br>      ),<br>      ),<br>    );<br>  }<br>}

如果要利用splashColor，请使用材料类型为circle的小部件highlightColor包装InkWell小Material部件。然后decoration在Container小部件中删除。

结果：

RawMaterialButton(<br>  onPressed: () {},<br>  constraints: BoxConstraints(),<br>  elevation: 2.0,<br>  fillColor: Colors.white,<br>  child: Icon(<br>    Icons.pause,<br>    size: 35.0,<br>  ),<br>  padding: EdgeInsets.all(15.0),<br>  shape: CircleBorder(),<br>)

记下 constraints: BoxConstraints()，这是为了不允许向左填充。

如果需要背景图像，则可以将CircleAvatar与IconButton一起使用。设置backgroundImage属性。

1	`CircleAvatar(<br> backgroundImage: NetworkImage(userAvatarUrl),<br>)`

按钮示例：

        CircleAvatar(<br>          backgroundColor: Colors.blue,<br>          radius: 20,<br>          child: IconButton(<br>            padding: EdgeInsets.zero,<br>            icon: Icon(Icons.add),<br>            color: Colors.white,<br>            onPressed: () {},<br>          ),<br>        ),

实际上，有一个示例如何创建类似于FloatingActionButton的圆形IconButton。

Ink(<br>    decoration: const ShapeDecoration(<br>        color: Colors.lightBlue,<br>        shape: CircleBorder(),<br>    ),<br>    child: IconButton(<br>        icon: Icon(Icons.home),<br>        onPressed: () {},<br>    ),<br>)

此代码将帮助您添加按钮而不会出现不必要的填充，

RawMaterialButton(<br>      elevation: 0.0,<br>      child: Icon(Icons.add),<br>      onPressed: (){},<br>      constraints: BoxConstraints.tightFor(<br>        width: 56.0,<br>        height: 56.0,<br>      ),<br>      shape: CircleBorder(),<br>      fillColor: Color(0xFF4C4F5E),<br>    ),

以上就是直播系统开发，Flutter创建圆圈图标按钮实现的相关代码，更多内容欢迎关注之后的文章