Working with Flutter's Built-in Widgets: Button

Flutter makes it easy to build beautiful and functional user interfaces, and one of the most essential widgets you'll find in most applications is the button. Buttons are interactive elements that can prompt actions, navigate between screens, and even display dialog boxes. In this post, we'll dive deep into working with Flutter's built-in button widgets, exploring their different types, properties, and how to implement them effectively in your apps.

There are several types of buttons available in Flutter, each designed for specific use cases. Here’s a quick rundown of the most common built-in button widgets:

To help you understand how these buttons work, let’s demonstrate each one with code snippets.

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 Examples'),
        ),
        body: Center(
          child: ButtonExamples(),
        ),
      ),
    );
  }
}

class ButtonExamples extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {
            // Your action here
          },
          child: Text('Text Button'),
        ),
        ElevatedButton(
          onPressed: () {
            // Your action here
          },
          child: Text('Elevated Button'),
        ),
        OutlinedButton(
          onPressed: () {
            // Your action here
          },
          child: Text('Outlined Button'),
        ),
      ],
    );
  }
}

 to arrange three different types of buttons vertically. Each button’s 

 property can contain the logic you want to execute when the button is pressed.

Buttons in Flutter come with a plethora of properties that control their appearance and behavior. Here are some key properties to consider:

 property. We can change colors, size, and padding, among other properties.

ElevatedButton(
  onPressed: () {
    // Your action here
  },
  child: Text('Customized Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // background
    onPrimary: Colors.white, // foreground
    minimumSize: Size(150, 50), // size
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15), // padding
  ),
),

Buttons can also have different states to indicate to the user whether an action is pending, disabled, or completed. Here’s how you can manipulate button states:

ElevatedButton(
  onPressed: null, // Button is disabled
  child: Text('Disabled Button'),
),

bool isLoading = false;

ElevatedButton(
  onPressed: isLoading ? null : () {
    // Assume a long-running operation
  },
  child: isLoading
      ? CircularProgressIndicator() // Loading indicator
      : Text('Submit'),
),

When working with buttons in Flutter, consider these best practices:

Flutter's built-in button widgets are versatile and customizable, allowing you to create rich user interfaces with ease. By understanding the different types of buttons, their properties, and best practices, you’re well-equipped to enhance the interactivity of your Flutter apps.

Experiment with different button styles, states, and interactions to see what works best for your application. Happy coding!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Working with Flutter's Built-in Widgets: Button

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript