[Flutter] Create a Customer widget

For example, we want to have to button, looks similar to FloatingActionButton:

But in the doc, it says to it is recommend to have only one floatingActionButton pre Application. 

So it is good idea to implement a similar one and learn how to build custom widget.

 

First thing first, since Flutter source code are very easy to read, we can check how FloatActionButton are implemented. 

Actually we can see it is implement as 'RawMateriaButton'.

 

class RoundIconButton extends StatelessWidget {
  RoundIconButton({@required this.icon, @required this.onPressed});

  final IconData icon;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Icon(icon),
      elevation: 6.0,
      onPressed: onPressed,
      shape: CircleBorder(),
      fillColor: Color(0XFF4C4F5E),
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
    );
  }
}

 

Usage:

RoundIconButton(
  icon: FontAwesomeIcons.plus,
  onPressed: () {
    setState(() {
      age++;
    });
  },
),