5 Formas de Crear Boton Circular con Icono en Flutter

Con Flutter podemos hacer uso de una infinidad de widgets o combinarlos para lograr el diseño deseado. Aqui hay 5 formas para crear botones circulares con icono en su interior.

#1: Usando ElevatedButton + Icon (recomendado)

      ElevatedButton(
        style: ElevatedButton.styleFrom(
            shape: const CircleBorder(), padding: const EdgeInsets.all(30)),
        child: const Icon(
          Icons.add,
          size: 50,
        ),
        onPressed: () {},
      ),

#2: Usando MaterialButton

      MaterialButton(
        shape: const CircleBorder(),
        color: Colors.red,
        padding: const EdgeInsets.all(20),
        onPressed: () {},
        child: const Icon(
          Icons.star,
          size: 50,
          color: Colors.yellow,
        ),
      ),

#3: Combinando ClipOval + Material + InkWell + Padding + Icon

      ClipOval(
        child: Material(
          color: Colors.blue,
          child: InkWell(
            onTap: () {},
            child: const Padding(
              padding: EdgeInsets.all(20),
              child: Icon(
                Icons.plus_one,
                size: 50,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),

#4: Combinando IconButton + CircleAvatar

      CircleAvatar(
        radius: 50,
        backgroundColor: Colors.amber,
        child: IconButton(
            color: Colors.black,
            padding: const EdgeInsets.all(20),
            iconSize: 50,
            icon: const Icon(Icons.shop),
            onPressed: () {
              // do something
            }),
      ),

#5: Combinando Ink + IconButton

      Ink(
        decoration:
            const ShapeDecoration(shape: CircleBorder(), color: Colors.purple),
        child: IconButton(
          icon: const Icon(Icons.arrow_back),
          iconSize: 30,
          color: Colors.white,
          onPressed: () {},
        ),
      )

Descargar proyecto desde nuestro repositorio Github.com listo para probar.

Fuente: kindacode.com