我最近刚开始 flutter ,到目前为止我很喜欢它,但我被一些用户界面的改变搞得焦头烂额.如有任何帮助,我们将不胜感激!

我的目标是得到一个圆形按钮,它有一个蓝色背景的图标,但在外面有一个深蓝色的边框.附有照片.

我的做法是:

  1. 得到一个圆形的蓝色按钮.
  2. 在那个按钮上放一个图标.
  3. 添加边框.

我被困在步骤3,因为我不知道如何添加边框,或者考虑到我处理问题的方式,这是否可能.具体的 colored颜色 现在对我来说并不重要,我稍后会改变主题.

这是我目前掌握的代码智慧:

  var messageBtn = new Row(
  children: <Widget>[
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: new RawMaterialButton(
        onPressed: _messages,
        child: new Padding(
          padding: const EdgeInsets.all(20.0),
          child: new Icon(
            Icons.message,
            size: 30.0,
            color: Colors.white,
          ),
        ),
        shape: new CircleBorder(),
        fillColor: Colors.deepPurple,
      ),
    ),
    new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Text(
          'Send Messages',
          style: new TextStyle(
            fontSize: 20.0,
          ),
        )),
  ],
);

它产生这个:see screenshot

我想要这个:see second screenshot美元

推荐答案

嗨,凯瑟琳,欢迎光临!

你可以通过深入研究MaterialButton个小部件来实现你想要的.

首先,您需要Ink小部件.这提供了使用BoxDecoration的更灵活的样式.

然后,Ink可以包含识别onTap并绘制飞溅效果的InkWell窗口小部件.默认情况下,飞溅持续到包含框的边缘,但您可以通过将InkWell设置为真正大的borderRadius来使其呈圆形.

下面是一个你想要的按钮的例子:

Material(
  type: MaterialType.transparency, //Makes it usable on any background color, thanks @IanSmith
  child: Ink(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.indigoAccent, width: 4.0),
      color: Colors.indigo[900],
      shape: BoxShape.circle,
    ),
    child: InkWell(
      //This keeps the splash effect within the circle
      borderRadius: BorderRadius.circular(1000.0), //Something large to ensure a circle
      onTap: _messages,
      child: Padding(
        padding:EdgeInsets.all(20.0),
        child: Icon(
          Icons.message,
          size: 30.0,
          color: Colors.white,
        ),
      ),
    ),
  )
),

结果如下:

screenshot of Flutter app with custom styled button

Flutter相关问答推荐

如何增加容器高度?

在Flutter 中压缩图片返回空

使用自定义控制器将项插入到ListView中时行为不正确

本机调试符号包含无效的目录调试符号.目前仅支持Android ABI

如何在扩展其他小部件时访问Ref

你能go 掉Flutter 小部件测试中的样板吗?

悬停时打开Flutter 下拉按钮

如何在抖动中将PNG图像转换为WebP

Flutter Android Google Sign-in error:ApiException:10在确认软件包名称、SHA-1 fingerprint 和设置同意页面后出现异常

如何更改Flutter 中文本的混合模式?

如何在flutter中加载并显示adx锚定的自适应广告?

我的第一个 flutter 项目出错,启动时为空值?

从子集合sem中获取参考学年&&课程名称的值

graphql_flutter 错误:非抽象类GraphQLWebSocketChannel缺少实现

Flutter sliver 持久化

如何限制用户每 24 小时执行的操作数?

如何将所有行项目平等地放在一行中?Flutter

将容器扩展到安全区域 - Flutter

如何从圆角go 除背景 colored颜色

如何将 pushNamed 与 Dismissible Widget 一起使用并查看背景透明第一页