How do I add a border to a flutter button?

Question

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:

I want this:

Answer 1

Just wrap an IconButton into a Container and set its decoration as following:

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 4),
    color: Colors.yellow,
    shape: BoxShape.circle,
  ),
  child: IconButton(
    iconSize: 56,
    icon: Icon(Icons.check),
    onPressed: () {},
  ),
),

Answer 2

Can Using FloatingActionButton with Border :

   FloatingActionButton(
                              mini: false,
                              backgroundColor: Colors.blue.shade900,
                              splashColor: Colors.black,
                              onPressed: () {
                                logOutDialog(context);
                              },
                              hoverElevation: 1.5,
                              shape: StadiumBorder(
                                  side: BorderSide(
                                      color: Colors.blue, width: 4)),
                              elevation: 1.5,
                              child: Icon(
                                Icons.logout,
                                color: _foregroundColor,
                              ),
                            )

Answer 3

In Flutter 2 there is TextButton:

TextButton(
  style: ButtonStyle(
   side: RedSelectedBorderSide(),
  ),
  child: Text(
    "Button"
  ),
  onPressed: (){}
);

Where RedSelectedBorderSide() is:

class RedSelectedBorderSide extends MaterialStateBorderSide {
  @override
  BorderSide resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return BorderSide(
        width: 2,
        color: Colors.red,
      ); // 
    }
    return null;// Defer to default value on the theme or widget.
  }
}

Answer 4

For TextButton

inside style use side with MaterialStateProperty with BorderSide.

TextButton(
  style: ButtonStyle(
   side: MaterialStateProperty.all(
     BorderSide(width: 1, color: Colors.black),
   ),
  ),
  child: Text(
    "My Button"
  ),
  onPressed: (){}
);