Comment créer un bouton à icône circulaire dans Flutter ?

Question

Comment puis-je créer quelque chose de similaire à un FloatingActionButton ?

Answer 1

Le bouton RawMaterialButton est mieux adapté, je pense.

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

Answer 2

Mise à jour (utilisation de nouvelles ElevatedButton )

• ElevatedButton (avec moins de personnalisations)

  ElevatedButton(
    onPressed: () {},
    child: Icon(Icons.menu, color: Colors.white),
    style: ElevatedButton.styleFrom(
      shape: CircleBorder(),
      padding: EdgeInsets.all(20),
      primary: Colors.blue, // <-- Button color
      onPrimary: Colors.red, // <-- Splash color
    ),
  )

• ElevatedButton (avec plus de personnalisations)

  ElevatedButton(
    onPressed: () {},
    child: Icon(Icons.menu),
    style: ButtonStyle(
      shape: MaterialStateProperty.all(CircleBorder()),
      padding: MaterialStateProperty.all(EdgeInsets.all(20)),
      backgroundColor: MaterialStateProperty.all(Colors.blue), // <-- Button color
      overlayColor: MaterialStateProperty.resolveWith<Color?>((states) {
        if (states.contains(MaterialState.pressed)) return Colors.red; // <-- Splash color
      }),
    ),
  )

• Utilisation de InkWell

  ClipOval(
    child: Material(
      color: Colors.blue, // Button color
      child: InkWell(
        splashColor: Colors.red, // Splash color
        onTap: () {},
        child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
      ),
    ),
  )    

---

Sortie (identique pour les deux derniers) :

Answer 3

Vous pouvez utiliser InkWell pour le faire :

Une zone rectangulaire d'un matériau qui réagit au toucher.

L'exemple ci-dessous montre comment utiliser InkWell . Avis : vous n'avez pas besoin StatefulWidget pour le faire. Je l'ai utilisé pour changer l'état du compte.

Ejemplo:

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => new _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new InkWell(// this is the one you are looking for..........
        onTap: () => setState(() => _count++),
        child: new Container(
          //width: 50.0,
          //height: 50.0,
          padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
          decoration: new BoxDecoration(
            shape: BoxShape.circle,// You can use like this way or like the below line
            //borderRadius: new BorderRadius.circular(30.0),
            color: Colors.green,
          ),
          child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
        ),//............
      ),
      ),
    );
  }
}

Si vous voulez bénéficier de splashColor , highlightColor , envelopper InkWell en utilisant un Material widget avec le type de matériau cercle. Puis supprimez decoration en Container widget.

Résultat :

Answer 4

Flutter viennent avec un Bouton d'action flottant

Echantillon :

 Center(
    child: FloatingActionButton(
      backgroundColor: Colors.redAccent,
      elevation: 0,
      onPressed: () => {},
    ),
  )

Answer 5

Vous pouvez facilement faire ce qui suit :

FlatButton(
      onPressed: () {

       },
      child: new Icon(
        Icons.arrow_forward,
        color: Colors.white,
        size: 20.0,
      ),
      shape: new CircleBorder(),
      color: Colors.black12,
    )

Le résultat est