Button component using Flutter in Dart language

In this post, we will create a customizable button component in Flutter using the ElevatedButton widget. This component will allow us to create buttons with text, icon, and customize various aspects like color, text size, and button width.

import 'package:flutter/material.dart';
import '../util/constants/Colors.dart';

class Button extends StatelessWidget {
  final Color? color; // Now optional and can be null
  final Color? textColor;
  final int? textSize;
  final double? width;
  final bool? fullWidth;
  final String text;
  final IconData? icon; // Now optional and can be null
  final VoidCallback onPressed;

  const Button({
    Key? key,
    this.color, // Color is now optional
    this.textColor,
    this.textSize,
    this.width,
    this.fullWidth,
    required this.text,
    this.icon, // Icon is now optional
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: fullWidth != null && fullWidth == true
          ? double.infinity
          : null, // If fullWidth is true, button width is maximum
      height: width != null ? width : 50, // Adjust button height
      child: ElevatedButton(
        onPressed: onPressed,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            icon != null
                ? Icon(
                    icon,
                    size: 24,
                    color: textColor != null ? textColor : ColorsApp.white,
                  ) // Icon size
                : Container(), // If no icon, show an empty container
            icon != null ? SizedBox(width: 12) : SizedBox.shrink(),
            Text(
              text,
              style: TextStyle(
                fontSize: textSize != null
                    ? textSize!.toDouble()
                    : 18, // Text size
                color: Colors.white,
                fontWeight: FontWeight.bold, // Font weight
              ), // Adjust text size and weight
            ),
          ],
        ),
        style: ElevatedButton.styleFrom(
          primary: color != null ? color : ColorsApp.customColor, // Button color
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10), // Rounded button corners
          ),
        ),
      ),
    );
  }
}

Now that we have created the customizable button component, we can easily use it anywhere in our application. Below is an example of how to use it:

import 'package:flutter/material.dart';
import 'path/to/button.dart'; // Importing the button component

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Button(
          text: 'Press',
          onPressed: () {
            // Action on button press
            print('Button pressed');
          },
        ),
      ),
    );
  }
}

DevCodeLight