Как добавить границу к кнопке флаттера?

Question

Я только недавно начал трепетать, и мне это очень нравится, но я застрял на некоторых изменениях пользовательского интерфейса. Любая помощь приветствуется!

Моя цель - получить круглую кнопку со значком на синем фоне, а затем с внешней границей темно-синего цвета. Прилагаются картинки.

Мой подход был:

1. Получите круглую синюю кнопку.
2. Поместите значок в эту кнопку.
3. Добавить рамку.

Я застрял на шаге 3, потому что я не знаю, как добавить границу, или если это вообще возможно, учитывая то, как я подошел к проблеме. Конкретные цвета не имеют значения для меня на данный момент, я буду менять тему позже.

Это то, что у меня в настоящее время есть мудрый код:

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

Это производит это: см. Скриншот

Я хочу это: см. Второй скриншот

Answer 1

Привет, Кэтлин, и добро пожаловать!

Вы можете достичь того, что хотите, окунувшись немного глубже в виджеты, которые составляют MaterialButton.

Сначала вам понадобятся Чернила виджет.Это предлагает более гибкий стиль с использованием BoxDecoration .

Ink, а затем может содержать виджет InkWell , который распознает onTap и рисует эффект всплеска.По умолчанию всплеск продолжается до краев вмещающего блока, но вы можете сделать его круглым, задав InkWell действительно большой borderRadius.

Вот пример кнопки, которую вы ищете:

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

И вот результат: