There are 3 type of buttons. 1) TextButton , 2) ElevatedButton and 3) OutlinedButton

1. TextButton

Syntax

TextButton(
          child: Text(
            "CLICK HERE",            
          ),
          onPressed: () async {
            
          },
        )
 

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Example'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {
              // Handle button press
              print('Button Pressed!');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}

Styling

TextButton(
              child: Text(
                _buttonText,
                style: TextStyle(fontSize: 25),
              ),
              onPressed: () {},
              style: TextButton.styleFrom(
                  foregroundColor: Colors.red,
                  elevation: 2,
                  backgroundColor: Colors.amber),
            ),

          

2. ElevatedButton

Syntax

              ElevatedButton(
                onPressed: () {
                  print('Button Pressed');
                },
                child: const Text('Button with OnPressed'),
              )
              

Example

              import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // Handle button press
              print('Button Pressed!');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}

Styling

ElevatedButton(
      onPressed: () {},
      child: const Text('Fluttering Button'),
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
        shadowColor: MaterialStateProperty.all<Color>(Colors.grey),
        elevation: MaterialStateProperty.resolveWith<double>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) return 10;
            return 5; // default elevation
          },
        ),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
        ),
        animationDuration: Duration(milliseconds: 200)
      ),
    )

      

3. OutlinedButton:

Syntax

OutlinedButton(
          child: Text('Outlined Button'),
          onPressed: () => Navigator.of(context)
)

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Example'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              // Handle button press
              print('Button Pressed!');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}

Styling

OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
              backgroundColor: Colors.green,
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
              shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)))),
          onPressed: () => Navigator.of(context)
              
        )

              import 'package:flutter/material.dart';

              class MyButtonDemo extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                  return Scaffold(
                    appBar: AppBar(title: Text('Button Demo')),
                    body: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          ElevatedButton(
                            onPressed: () {
                              // Add onPressed action here
                            },
                            child: Text('Elevated Button'),
                          ),
                          SizedBox(height: 20),
                          TextButton(
                            onPressed: () {
                              // Add onPressed action here
                            },
                            child: Text('Text Button'),
                          ),
                          SizedBox(height: 20),
                          OutlinedButton(
                            onPressed: () {
                              // Add onPressed action here
                            },
                            child: Text('Outlined Button'),
                          ),
                        ],
                      ),
                    ),
                  );
                }
              }

              

1. Column Layout

             Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      // Add onPressed action here
                    },
                    child: Text('Button 1'),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      // Add onPressed action here
                    },
                    child: Text('Button 2'),
                  ),
                ],
              )

              

2. Row Layout

              Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ElevatedButton(
                      onPressed: () {
                        // Add onPressed action here
                      },
                      child: Text('Button 1'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        // Add onPressed action here
                      },
                      child: Text('Button 2'),
                    ),
                  ],
                )

                

3. Grid Layout

                GridView.count(
  crossAxisCount: 2,
  children: [
    ElevatedButton(
      onPressed: () {
        // Add onPressed action here
      },
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {
        // Add onPressed action here
      },
      child: Text('Button 2'),
    ),
    // Add more buttons as needed
  ],
)

4. Wrap Layout

Wrap(
  spacing: 10.0,
  runSpacing: 10.0,
  children: [
    ElevatedButton(
      onPressed: () {
        // Add onPressed action here
      },
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {
        // Add onPressed action here
      },
      child: Text('Button 2'),
    ),
    // Add more buttons as needed
  ],
)

Custom class

              import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color? color;
  final Color? textColor;
  final double borderRadius;
  final double padding;

  const CustomButton({
    Key? key,
    required this.text,
    required this.onPressed,
    this.color,
    this.textColor,
    this.borderRadius = 8.0,
    this.padding = 16.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        primary: color ?? Theme.of(context).primaryColor,
        onPrimary: textColor ?? Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        padding: EdgeInsets.all(padding),
      ),
      child: Text(text),
    );
  }
}

Usage

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomButton(
          text: 'Press me',
          onPressed: () {
            // Add onPressed action here
          },
          color: Colors.blue,
          textColor: Colors.white,
          borderRadius: 10.0,
          padding: 20.0,
        ),
      ),
    );
  }
}