如何在边框按钮上添加边框? [英] How do I add a border to a flutter button?

问题描述

我最近才陷入困境，到目前为止，我一直很喜欢它，但是我一直在进行一些UI更改.感谢您的帮助！

I've just recently gotten into flutter and am loving it so far but I've gotten stuck on some UI changes. Any help is appreciated!

我的目标是要得到一个圆形按钮，该按钮带有蓝色背景的图标，但外面有一个较深的蓝色边框.附带图片.

My goal is to get a circular button that has an icon with a blue background but then have a border around the outside that is a darker blue. There are pictures attached.

我的方法是:

1. 获取一个圆形的蓝色按钮.
2. 在该按钮中放置一个图标.
3. 添加边框.

我陷入了第3步，因为我不知道如何添加边框，或者如果按照我解决问题的方式，是否甚至有可能添加边框.目前，具体颜色对我来说并不重要，稍后我将更改主题.

I got stuck on step 3 because I do not know how to add a border, or if it is even possible given the way I approached the problem. The specific colors do not matter to me at the moment, I will change the theme later.

这是我目前有代码明智的地方:

This is what I currently have code wise:

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

它产生以下内容:查看屏幕截图

我想要这个:查看第二张屏幕截图

推荐答案

凯瑟琳，欢迎您！

通过深入研究组成MaterialButton的小部件，可以实现所需的目标.

You can achieve what you want by diving a little deeper into the widgets that make up MaterialButton.

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

First you need the Ink widget. This offers more flexible styling using a BoxDecoration.

Ink然后可以包含一个 InkWell 小部件，该小部件可以识别onTap并绘制飞溅效果.默认情况下，飞溅会继续到包含框的边缘，但是您可以通过给InkWell很大的borderRadius使其变为圆形.

Ink can then contain an InkWell widget which recognises onTap and draws the splash effect. By default, the splash continues to the edges of the containing box, but you can make it circular by giving InkWell a really big borderRadius.

这是您要使用的按钮的一个示例:

Here's an example of the button you're after:

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

结果如下:

这篇关于如何在边框按钮上添加边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！