Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I add a border to a flutter button?

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.

My approach was:

  1. Get a circular blue button.
  2. Put an icon in that button.
  3. Add a border.

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

It produces this: see screenshot

I want this:see second screenshot

like image 206
Kathleen Levi Avatar asked Sep 12 '18 20:09

Kathleen Levi


People also ask

How do I change the button border in Flutter?

To change the outline button border color, add the side property and assign the BorderSide widget with the color and width parameter.

How do you make a border on Flutter?

Steps to add border to container in Flutter:Step 1: Go to the Container in which you want to add a border. Step 2: Add the decoration parameter and assign the BoxDecoration class. Inside the BoxDecoration add the parameter border and set it to Border. all().

How do you put a border color on a button in Flutter?

textColor : Used to set button text color. RoundedRectangleBorder : Used to set border around button. color : Used to set Border Color. width : Used to set button border width.


1 Answers

Hi Kathleen and welcome!

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

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

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

And here's the result:

screenshot of Flutter app with custom styled button

like image 183
Xander Avatar answered Sep 28 '22 00:09

Xander