ElevatedButton Tutorial for Flutter

The ElevatedButton widget in Flutter is essential for producing interactive and aesthetically pleasing buttons.

For improving user experiences and increasing user engagement, these buttons are crucial. In-depth analysis of the ElevatedButton widget and examples of how to use its features to create captivating user interfaces for your Flutter applications are covered in this blog post.

Syntax

ElevatedButton(
  onPressed: () {
    // Callback function for button press event
    // Put your desired action here
  },
  onLongPress: () {
    // Callback function for button long press event
    // Put your desired action here
  },
  style: ButtonStyle(
    // Customize the button's appearance here
    // For example:
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(EdgeInsets.all(16.0)),
    elevation: MaterialStateProperty.all<double>(8.0),
    // More properties can be added here
  ),
  clipBehavior: Clip.none, // or Clip.antiAlias, Clip.antiAliasWithSaveLayer
  focusNode: myFocusNode, // If you have a FocusNode defined
  autofocus: true, // or false, depending on your preference
  child: Text('Click Me'), // The button's label or child widget
)

In this syntax, onPressed and child are required properties, while the others are optional. The style property is a powerful way to customize the button’s appearance using the ButtonStyle class.

Properties

1. onPressed: A required property that takes a callback function to be executed when the button is pressed.
2. onLongPress: An optional property that takes a callback function to be executed when the button is long-pressed.
3. style: An optional property to customize the button’s visual appearance, such as its background color, shape, padding, elevation, and more. It uses ButtonStyle as its data type.
4. clipBehavior: An optional property to define how the button’s corners should be clipped. It uses Clip enumeration with values like none, antiAlias, and antiAliasWithSaveLayer.
5. focusNode: An optional property to control the focus behavior of the button. It uses the FocusNode class.
6. autofocus: An optional property that determines whether the button should be focused automatically when the widget is first displayed.

Set Up a New Flutter Project

Ensure you have Flutter installed on your machine.

If not, follow the official installation guide. Create a new Flutter project.

Navigate to the newly created project directory and open it in your preferred code editor.

Inside the lib/main.dart file, replace the existing code with the following example:

import 'package:flutter/material.dart';

void main() => runApp(ElevatedButtonApp());

class ElevatedButtonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ElevatedButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ElevatedButtonExample(),
    );
  }
}

class ElevatedButtonExample extends StatelessWidget {
  void _onButtonPressed() {
    print('Button Pressed!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ElevatedButton Widget'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _onButtonPressed,
          child: Text('Click Me!'),
        ),
      ),
    );
  }
}

Save the changes and run the application using the following command:

flutter run

Conclusion

The ElevatedButton widget in Flutter is a versatile tool for creating engaging and interactive buttons in your app’s user interface.

By following the example provided in this blog post, you can effortlessly incorporate elevated buttons into your Flutter projects.

Explore further customization options, such as adjusting button colors, adding icons, or using onPressed events for navigation or other actions.

Elevate your user interfaces and create captivating app experiences with Flutter’s ElevatedButton widget.

Happy coding, and enjoy crafting visually stunning and interactive buttons for your Flutter applications!

Related Posts

Numeric String Validation in Flutter

Border of Container Widget in Flutter

Flutter Column Explained – Tutorial

Flutter Progress Indicators Tutorial

Flutter Center Widget Tutorial

Flutter BoxShadow Tutorial