专栏首页个人路线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包装InkWellMaterial部件。然后decorationContainer小部件中删除。

结果:

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),
    ),

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 Android Studio 进行 Flutter 开发

    本文将与你一起回顾如何在 Android Studio 里进行 Flutter 工具的配置。

    程序亦非猿
  • ​打开Flutter动画的另一种姿势——Flare

    日常开发过程中我们时常能遇到 动画 的需求,flutter中使用动画的方式主要分为三种:

    CCCruch
  • 组合与自绘,我该选用何种方式自定义Widget?

    在实际开发中,我们经常会遇到一些复杂的UI需求,往往无法通过使用Flutter的基本Widget,设置其属性参数来满足。这个时候,我们就需要针对特定的场景自定义...

    拉维
  • Flutter 密码锁定屏幕

    Flutter 让我对高效构建令人愉悦的UI很感兴趣,而且它允许您同时为两个平台创建。直到最近一年,我一直使用touchID和FaceID作为身份验证工具。在任...

    老孟Flutter
  • [-Flutter 自组篇-] 蛛网图+绘制+动画实践

    张风捷特烈
  • [-Flutter 自组篇-] 蛛网图+绘制+动画实践

    张风捷特烈
  • 网页轮播图案例

    ② 此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖 animate.js 所以,animate.js 要写到 index.js...

    梨涡浅笑
  • 网页轮播图案例

    此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖animate.js所以,animate.js 要写到index.is.上面)...

    星辰_大海
  • 网页轮播图案例

    节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。

    星辰_大海
  • 你知道吗,Flutter内置了10多种Button控件

    Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。

    老孟Flutter
  • 你知道吗,Flutter内置了10多种Button控件

    Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。

    老孟Flutter
  • ❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️

    你可以观看现场演示以了解它是如何工作的。如果你想使用 HTML 和 CSS 代码创建玻璃态登录表单,请按照以下教程进行操作。

    海拥
  • 文本、图片和按钮在Flutter中怎么用

    与iOS、Android和React类似,作为一个UI框架,Flutter自然也提供了很多UI控件。而文本、图片和按钮,则是这些不同的UI框架中构建视图都要用到...

    拉维
  • 常见网页特效案例

    节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。

    清出于兰
  • Flutter布局基础——自定义BottomNavigationBar

    这里我们来尝试实现一个不规则的 BottomNavigationBar,首先了解两个系统组件: floatingActionButton和BottomAppBa...

    莫空9081
  • Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    上一篇文章我们搭建好了 Flutter 的开发环境。 Flutter 即学即用系列博客——01 环境搭建

    AndroidTraveler
  • 【Flutter 专题】07 您搭好【登录】页面了么?

    和尚最近在利用业余时间学习 Flutter,还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手,在实践过程中结合官网文档才能更快的学习和理解。...

    阿策小和尚
  • 未来布局之星——ConstraintLayout

    ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一,相比于RelativeLayout、LinearLayout等传统...

    代码咖啡
  • Flutter 步骤进度组件

    老孟导读:最近文章更新拖后腿了,一直忙着网站改版的事情,今天总算落地了,全新的Flutter网站即将上线,敬请期待。网站目前收集197个组件的详细用法,还有15...

    老孟Flutter

扫码关注云+社区

领取腾讯云代金券