import 'package:flutter/material.dart';

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

class MyWidget extends StatelessWidget {

  Widget circleIconWithTextView(IconData icon, String text, Function() onTap) {

    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 50,
        width: 120,
        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: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon),
            SizedBox(width: 8,),
            Text(text),
          ],
        ),
      ),
    );
  }

  Widget rippleIconWithTextView(IconData icon, String text, 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(
            height: 50,
            width: 120,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(25.0)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(icon),
                SizedBox(width: 8,),
                Text(text),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget elevatedIconWithTextView(IconData icon, String text, Function() onTap) {

    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25.0),
        ),
        primary: Colors.white,
      ),
      child: Container(
        height: 50,
        width: 100,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, color: Colors.black,),
            SizedBox(width: 8,),
            Text(
              text,
              style: TextStyle(
                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 with Text View'),
            SizedBox(height: 8,),
            circleIconWithTextView(Icons.history, 'Icon', () {
              print('tapped: circleIconWithTextView');
            }),
            SizedBox(height: 16,),
            
            Text('Ripple Circle Icon with Text View'),
            SizedBox(height: 8,),
            rippleIconWithTextView(Icons.history, 'Icon', () {
              print('tapped: rippleIconWithTextView');
            }),
            SizedBox(height: 16,),
            
            Text('Elevated Circle Icon with Text View'),
            SizedBox(height: 8,),
            elevatedIconWithTextView(Icons.history, 'Icon', () {
              print('tapped: rippleIconWithTextView');
            }),
          ],
        ),
      ),// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}