如何在Flutter中创建圆圈图标按钮？

Question

我找不到任何显示如何创建类似于floatingActionButton的圆形图标按钮的示例.任何人都可以建议如何/什么需要创建自定义按钮,如floatingActionButton.谢谢.

Answer 1

我认为RawMaterialButton更适合.

new RawMaterialButton(
  onPressed: () {},
  child: new Icon(
     Icons.pause,
     color: Colors.blue,
     size: 35.0,
  ),
  shape: new CircleBorder(),
  elevation: 2.0,
  fillColor: Colors.white,
  padding: const EdgeInsets.all(15.0),
),

Answer 2

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

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

Answer 3

颤动附带一个FloatingActionButton

样品:

 Center(
    child: FloatingActionButton(
      backgroundColor: Colors.redAccent,
      elevation: 0,
      onPressed: () => {},
    ),
  )

Answer 4

您可以轻松地执行以下操作：

FlatButton(
      onPressed: () {

       },
      child: new Icon(
        Icons.arrow_forward,
        color: Colors.white,
        size: 20.0,
      ),
      shape: new CircleBorder(),
      color: Colors.black12,
    )

结果是

Answer 5

如果您需要背景图片，您可以使用带有 IconButton 的 CircleAvatar。设置 backgroundImage 属性。

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

按钮示例：

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

Answer 6

您可以使用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,请使用材质类型为圆形的小部件highlightColor包装InkWell小Material部件.然后取出decoration的Container小部件.

结果:

Answer 7

RaisingButton 已弃用，现在您可以通过 ElevatedButton 创建它。

ElevatedButton(
      onPressed: () {},
      child: Icon(Icons.add, color: Colors.white),
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(20),
        primary: Colors.blue,
        onPrimary: Colors.black,
      ),
    )

Answer 8

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

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

输出：

Answer 9

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()，这是因为不允许在左侧填充。

快乐飘飘！！

Answer 10

使用 ElevatedButton：

          ElevatedButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              color: Colors.white,
              size: 60.0,
            ),
            style: ElevatedButton.styleFrom(
                shape: CircleBorder(), primary: Colors.green),
          )

Answer 11

2021年

如果您需要平坦的（无高度），因为 FlatButton 现已弃用。

TextButton(
      onPressed: (){},
      child: Icon(Icons.arrow_back),
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.black26),
          shape: MaterialStateProperty.all(const CircleBorder())),
    );

Answer 12

我创建了一个具有正确剪裁、高度和边框的版本。请随意定制它。

Material(
    elevation: 2.0,
    clipBehavior: Clip.hardEdge,
    borderRadius: BorderRadius.circular(50),
    color: Colors.white,
    child: InkWell(
        onTap: () => null,
        child: Container(
            padding: EdgeInsets.all(9.0),
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.blue, width: 1.4)),
           child: Icon(
                Icons.menu,
                size: 22,
                color: Colors.red,
            ),
        ),
    ),
)),

Answer 13

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

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

要使用此代码示例创建本地项目，请运行：

flutter create --sample=material.IconButton.2 mysample