Exploring Various Button Widgets (Elevated, Text, Outlined) and Customization in Flutter

Buttons are fundamental UI elements in any Flutter application. They enable users to interact with the app by triggering actions and navigating through different sections. Flutter provides a rich set of button widgets, including Elevated Buttons, Text Buttons, Outlined Buttons, and more, each serving different purposes. Moreover, Flutter’s flexibility allows extensive customization to meet specific design requirements. This comprehensive guide explores these various button widgets and their customization options in Flutter.

Understanding Flutter Buttons

Flutter offers several types of button widgets that can be categorized based on their appearance and behavior:

• ElevatedButton: A button with a filled background that elevates upon press, providing a visual depth effect.
• TextButton: A button without a background or border, primarily used for less emphasized actions.
• OutlinedButton: A button with a transparent background and a visible border, suitable for secondary actions.

ElevatedButton

ElevatedButton is the go-to widget for primary actions due to its clear visibility and interaction cues.

Creating an ElevatedButton

The basic ElevatedButton requires an onPressed callback and a child widget, usually a Text widget.

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('ElevatedButton Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Elevated Button Pressed');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

Customizing ElevatedButton

ElevatedButton can be extensively customized using the style property, which accepts ButtonStyle.

• Background Color:

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
  ),
)

• Text Color:

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me', style: TextStyle(color: Colors.white)),
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.white, // Use foregroundColor for text color
    backgroundColor: Colors.blue,
  ),
)

• Padding:

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  ),
)

• Elevation:

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    elevation: 5,
  ),
)

• Shape:

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

• Shadow Color:

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    shadowColor: Colors.green,
  ),
)

• Side (Border):

ElevatedButton(
  onPressed: () {
    print('Elevated Button Pressed');
  },
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    side: BorderSide(color: Colors.black, width: 2),
  ),
)

TextButton

TextButton, often called a flat button, presents actions in a subtle, non-intrusive manner.

Creating a TextButton

Similar to ElevatedButton, TextButton requires an onPressed callback and a child widget.

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('TextButton Example'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {
              print('Text Button Pressed');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

Customizing TextButton

TextButton also supports customization through the style property with ButtonStyle.

• Text Color:

TextButton(
  onPressed: () {
    print('Text Button Pressed');
  },
  child: Text('Click Me'),
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue, // Use foregroundColor for text color
  ),
)

• Padding:

TextButton(
  onPressed: () {
    print('Text Button Pressed');
  },
  child: Text('Click Me'),
  style: TextButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  ),
)

• Shape:

TextButton(
  onPressed: () {
    print('Text Button Pressed');
  },
  child: Text('Click Me'),
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

• Background Color (Overlay Color):

TextButton(
  onPressed: () {
    print('Text Button Pressed');
  },
  child: Text('Click Me'),
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue.withOpacity(0.1),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

OutlinedButton

OutlinedButton is used for actions that require visual separation from the background but are not as primary as those represented by ElevatedButtons.

Creating an OutlinedButton

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('OutlinedButton Example'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              print('Outlined Button Pressed');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

Customizing OutlinedButton

Like other buttons, OutlinedButton can be styled via the style property.

• Text Color:

OutlinedButton(
  onPressed: () {
    print('Outlined Button Pressed');
  },
  child: Text('Click Me'),
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.blue,
  ),
)

• Padding:

OutlinedButton(
  onPressed: () {
    print('Outlined Button Pressed');
  },
  child: Text('Click Me'),
  style: OutlinedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  ),
)

• Shape:

OutlinedButton(
  onPressed: () {
    print('Outlined Button Pressed');
  },
  child: Text('Click Me'),
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

• Side (Border):

OutlinedButton(
  onPressed: () {
    print('Outlined Button Pressed');
  },
  child: Text('Click Me'),
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: Colors.black, width: 2),
  ),
)

Button Styling Best Practices

When styling buttons in Flutter, keep the following best practices in mind:

• Consistency: Maintain consistent styling across all buttons to provide a uniform user experience.
• Accessibility: Ensure that buttons are easily visible and tappable, with sufficient contrast between the text and background.
• Platform Awareness: Consider platform-specific design guidelines (e.g., Material Design for Android, Cupertino for iOS).
• State Management: Clearly indicate button states (e.g., pressed, disabled) with appropriate visual cues.

Custom Button Widget

To encapsulate all customization into a single button widget, create custom button widget which extends StatelessWidget or StatefulWidget as desired.

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color backgroundColor;
  final Color textColor;

  CustomButton({
    required this.text,
    required this.onPressed,
    this.backgroundColor = Colors.blue,
    this.textColor = Colors.white,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor,
        padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
        textStyle: TextStyle(fontSize: 18),
      ),
      child: Text(
        text,
        style: TextStyle(color: textColor),
      ),
    );
  }
}

//Usage
CustomButton(
  text: 'Click Me',
  onPressed: () {
    print('Custom Button Pressed');
  },
  backgroundColor: Colors.green,
)

Conclusion

Flutter provides extensive options for creating and customizing button widgets. Elevated Buttons, Text Buttons, and Outlined Buttons each offer unique styles that cater to different design needs. By leveraging the style property and following best practices, you can create buttons that are both visually appealing and functionally robust. Mastering these buttons ensures a smooth and engaging user experience in your Flutter applications.