Comment ajouter une bordure à un bouton flottant?

Question

Je suis récemment tombé dans le flottement et je l'aime jusqu'à présent, mais je suis resté coincé sur certains changements d'interface utilisateur. Toute aide est appréciée!

Mon objectif est d'obtenir un bouton circulaire qui a une icône avec un fond bleu mais ensuite une bordure autour de l'extérieur qui est d'un bleu plus foncé. Il y a des photos jointes.

Mon approche était:

1. Obtenez un bouton bleu circulaire.
2. Mettez une icône dans ce bouton.
3. Ajoutez une bordure.

Je suis resté bloqué sur l'étape 3 car je ne sais pas comment ajouter une bordure, ou si c'est même possible compte tenu de la façon dont j'ai abordé le problème. Les couleurs spécifiques ne m'importent pas pour le moment, je changerai de thème plus tard.

Voici ce que j'ai actuellement en ce qui concerne le code:

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

Il produit ceci: voir capture d'écran

Je veux ceci: voir la deuxième capture d'écran

Answer 1

Salut Kathleen et bienvenue!

Vous pouvez réaliser ce que vous voulez en plongeant un peu plus profondément dans les widgets qui composent MaterialButton.

Vous avez d'abord besoin du widget Ink . Cela offre un style plus flexible en utilisant un BoxDecoration .

Ink peut alors contenir un widget InkWell qui reconnaît onTap et dessine l'effet splash. Par défaut, le splash continue jusqu'aux bords de la boîte contenant, mais vous pouvez le rendre circulaire en donnant à InkWell un très gros borderRadius.

Voici un exemple du bouton que vous recherchez:

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

Et voici le résultat: