web-dev-qa-db-fra.com

Comment créer un bouton d'icône de cercle dans Flutter?

Je ne trouve aucun exemple qui montre comment créer un cercle IconButton similaire au FloatingActionButton. Quelqu'un peut-il suggérer comment/quel est le besoin de créer un bouton personnalisé comme le FloatingActionButton?

flutter
23
Edmand Looi

le flutter vient avec un FloatingActionButton

Exemple: 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'msc',
        home: new Scaffold(
            body: new Center(
              child: new FloatingActionButton(
                backgroundColor: Colors.redAccent,
                onPressed: () => {},
              ),
            )));
  }
}

enter image description here

22
Raouf Rahiche

RawMaterialButton est mieux adapté, je pense.

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

Vous pouvez utiliser InkWell pour le faire:

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

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

Exemple:

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 souhaitez bénéficier de splashColor, highlightColor, encapsulez le widget InkWell à l'aide d'un widget Material avec un cercle de type de matériau. Et puis supprimez decoration dans le widget Container.

Résultat:

enter image description here

12
Blasanka

Vous pouvez essayer ceci, il est entièrement personnalisable.

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

Sortie:

enter image description here

4
CopsOnRoad

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 enter image description here

1
Doan Bui

Vous pouvez également utiliser un RaisedButton avec une image à l'intérieur (par exemple, pour une connexion sociale) comme ceci (sizebox avec fittebox est nécessaire pour contraster l'image sur la taille spécifiée):

FittedBox(
    fit: BoxFit.scaleDown,
    child: SizedBox(
        height: 60,
        width: 60,
        child: RaisedButton(
             child: Image.asset(
                 'assets/images/google_logo.png'),
                 shape: StadiumBorder(),
                 color: Colors.white,
                     onPressed: () {},
                 ),
             ),
         ),
0
Daniel Vilela