import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  
  Widget circleIconView(IconData icon, Function() onTap) {

    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(25.0)),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withOpacity(0.25),
                blurRadius: 2.0,
                offset: Offset(1, 2),
            ),
          ],
        ),
        child: Center(
          child: Icon(icon),
        ),
      ),
    );
  }

  Widget rippleCircleIconView(IconData icon, Function() onTap) {

    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(25.0)),
        boxShadow: [
          BoxShadow(
              color: Colors.black.withOpacity(0.25),
              blurRadius: 2.0,
              offset: Offset(1, 2)
          ),
        ],
      ),
      child: Material(
        clipBehavior: Clip.antiAlias,
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(25.0)),
        child: InkWell(
          onTap: onTap,
          child: Container(
            width: 50,
            height: 50,
            child: Center(
              child: Icon(icon),
            ),
          ),
        ),
      ),
    );
  }

  Widget elevatedCircleButton(IconData icon, Function() onTap) {

    return ElevatedButton(
      style: ElevatedButton.styleFrom(
          shape: CircleBorder(),
          primary: Colors.white,
      ),
      child: Container(
        padding: const EdgeInsets.all(12),
        alignment: Alignment.center,
        decoration: BoxDecoration(shape: BoxShape.circle),
        child: Icon(
          icon,
          size: 24,
          color: Colors.black,
        ),
      ),
      onPressed: onTap,
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
            Text('Circle Icon'),
            SizedBox(height: 8,),
            circleIconView(Icons.menu, () {
              print('tapped: menu');
            }),

            SizedBox(height: 16,),
            Text('Ripple Circle Icon'),
            SizedBox(height: 8,),
            rippleCircleIconView(Icons.history, () {
              print('tapped: rippleCircleIconView');
            }),

            SizedBox(height: 16,),
            Text('Elevated Circle'),
            SizedBox(height: 8,),
            elevatedCircleButton(Icons.history, () {}),
          ],
        ),
      ),// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}