フラッターボタンに境界線を追加するにはどうすればよいですか？

Question

私はつい最近フラッターになり、それを愛していますが、UIの変更にこだわっています。どんな助けも大歓迎です！

私の目標は、青色の背景のアイコンを持つ円形ボタンを取得することですが、外側の周囲には濃い青色の境界線があります。写真が添付されています。

私のアプローチは：

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

これが生成されます： スクリーンショットを参照

これが欲しい： 2番目のスクリーンショットを見る

Answer 1

こんにちはキャスリーン、ようこそ！

MaterialButtonを構成するウィジェットを少し深く掘り下げることで、目的を達成できます。

最初に Ink ウィジェットが必要です。これにより、 BoxDecoration を使用したより柔軟なスタイル設定が可能になります。

Inkは、onTapを認識してスプラッシュ効果を描画する InkWell ウィジェットを含むことができます。デフォルトでは、スプラッシュは収容ボックスの端まで続きますが、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,
        ),
      ),
    ),
  )
),

結果は次のとおりです。