Flutter create Custom button

In Flutter, creating a custom button involves defining a custom widget that encapsulates the appearance and behavior of the button. Below is a basic example of how you can create a custom button in Flutter:

import 'package:flutter/material.dart';

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

  // Constructor to initialize the button text and onPressed callback
  CustomButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
      style: ElevatedButton.styleFrom(
        // Customize the button appearance here
        primary: Colors.blue, // Button color
        textStyle: TextStyle(fontSize: 16), // Text style
        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24), // Button padding
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Button Example'),
        ),
        body: Center(
          child: CustomButton(
            text: 'Click me!',
            onPressed: () {
              // Add your custom button's onPressed logic here
              print('Button clicked!');
            },
          ),
        ),
      ),
    );
  }
}

Flutter custom button with style optional :

import 'package:flutter/material.dart';

class ButtonStyles {
  static ButtonStyle defaultStyle = ElevatedButton.styleFrom(
    primary: Colors.blue, // Default button color
    textStyle: TextStyle(fontSize: 16), // Default text style
    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24), // Default button padding
  );
}

import 'package:flutter/material.dart';
import 'styles.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final ButtonStyle? style;

  // Constructor to initialize the button text, onPressed callback, and style (optional)
  CustomButton({required this.text, required this.onPressed, this.style});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
      style: style ?? ButtonStyles.defaultStyle,
    );
  }
}

usage :

import 'package:flutter/material.dart';
import 'custom_button.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Button Example'),
        ),
        body: Center(
          child: CustomButton(
            text: 'Click me!',
            onPressed: () {
              // Add your custom button's onPressed logic here
              print('Button clicked!');
            },
            // Optional: Pass a custom style
            style: ElevatedButton.styleFrom(
              primary: Colors.green, // Custom button color
              textStyle: TextStyle(fontSize: 18), // Custom text style
              padding: EdgeInsets.symmetric(vertical: 14, horizontal: 28), // Custom button padding
            ),
          ),
        ),
      ),
    );
  }
}

Now, the default button style is defined in the ButtonStyles class, and you can optionally pass a custom style when creating an instance of the CustomButton widget. If no custom style is provided, the default style will be used.