Most Popular Buttons in Flutter

In Flutter there are multiple options to add button in your application, in this example we have implemented most popular and useful button in Flutter applications

import 'package:flutter/material.dart';

class RoundedButtonByResearchThinker extends StatefulWidget {
  const RoundedButtonByResearchThinker({Key? key}) : super(key: key);

  @override
  State<RoundedButtonByResearchThinker> createState() =>
      _RoundedButtonByResearchThinkerState();
}

class _RoundedButtonByResearchThinkerState
    extends State<RoundedButtonByResearchThinker> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ResearchThinker"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                // Button pressed action
              },
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              child: Text(
                'Elevated Button',
                style: TextStyle(fontSize: 25),
              ),
            ),



            TextButton(
              onPressed: () {
                // Button pressed action
              },
              style: TextButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              child: Text(
                'Text Button',
                style: TextStyle(fontSize: 25),
              ),
            ),



            GestureDetector(
              onTap: () {
                // Button pressed action
              },
              child: Container(
                padding: EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: Colors.green,
                ),
                child: Text(
                  'Container with BoxDecoration Button',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),



            InkWell(
              onTap: () {
                // Button pressed action
              },
              borderRadius: BorderRadius.circular(20.0),
              child: Container(
                padding: EdgeInsets.all(10.0),
                color: Colors.green,
                child: Text(
                  'InkWell with BorderRadius Button',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),



            Divider(
              thickness: 1,
            ),


            CustomButton(

              onPressed: () {
// Button pressed action
              },
              text: 'Custom Button',
            ),


            Divider(
              thickness: 1,
            ),

            ElevatedButton(
              onPressed: () {
                // Button pressed action
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.green, // background color
                onPrimary: Colors.white, // text color
                elevation: 5, // button elevation
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0), // rounded corners
                ),
              ),
              child: Text(
                'Styled ElevatedButton Button',
                style: TextStyle(fontSize: 18),
              ),
            ),


            ElevatedButton.icon(
              onPressed: () {
                // Button pressed action
              },
              icon: Icon(Icons.add),
              label: Text(
                'ElevatedButton with Icon',
                style: TextStyle(fontSize: 15),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

//This is custom Button Class you can add more parameters according to your requirements

class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String text;

  const CustomButton({required this.onPressed, required this.text});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
      child: Text(text),
    );
  }
}