Flutter Buttons - A Comprehensive Guide

A Comprehensive Guide is a boltuix designed for developers who want to learn to implement various types of buttons in Flutter.

Text button, Elevated button, Outlined button, Toggle button, and Floating action button.

Each button type is explained in detail with examples, explanations, and code snippets and also includes a step-by-step code explanation and hashtag list for each button type.

Code Example with Comment Lines:

// Example of a Text Button
TextButton(
  onPressed: () {
    // Do something when the button is pressed.
  },
  child: Text('Text Button'),
)

// Example of an Elevated Button
ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed.
  },
  child: Text('Elevated Button'),
)

// Example of an Outlined Button
OutlinedButton(
  onPressed: () {
    // Do something when the button is pressed.
  },
  child: Text('Outlined Button'),
)

// Example of a Toggle Button
ToggleButton(
  onPressed: () {
    // Do something when the button is pressed.
  },
  child: Text('Toggle Button'),
)

// Example of a Floating Action Button
FloatingActionButton(
  onPressed: () {
    // Do something when the button is pressed.
  },
  child: Icon(Icons.add),
)

..

Flutter Material Button Collections

import 'package:flutter/material.dart';

class ButtonDemo extends StatefulWidget {
  const ButtonDemo({super.key});

  @override
  State<ButtonDemo> createState() => _ButtonDemoState();
}

class _ButtonDemoState extends State<ButtonDemo> with RestorationMixin {
  final isSelected = [
    RestorableBool(false),
    RestorableBool(true),
    RestorableBool(false),
  ];

  @override
  String get restorationId => 'toggle_button_demo';

  @override
  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
    registerForRestoration(isSelected[0], 'first_item');
    registerForRestoration(isSelected[1], 'second_item');
    registerForRestoration(isSelected[2], 'third_item');
  }

  @override
  void dispose() {
    for (final restorableBool in isSelected) {
      restorableBool.dispose();
    }
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {

    return
      Scaffold(
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(height: 20),

              //..................................Text button
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () {},
                    child: const Text('Button'),
                  ),
                  const SizedBox(width: 12),
                  TextButton.icon(
                    icon: const Icon(Icons.add, size: 18),
                    label: const Text('Button'),
                    onPressed: () {},
                  ),
                ],
              ),
              const SizedBox(height: 12),
              // Disabled buttons
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const TextButton(
                    onPressed: null,
                    child: Text('Button'),
                  ),
                  const SizedBox(width: 12),
                  TextButton.icon(
                    icon: const Icon(Icons.add, size: 18),
                    label: const Text('Button'),
                    onPressed: null,
                  ),
                ],
              ),


              //..........................................Elevated Button
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('Button'),
                  ),
                  const SizedBox(width: 12),
                  ElevatedButton.icon(
                    icon: const Icon(Icons.add, size: 18),
                    label: const Text('Button'),
                    onPressed: () {},
                  ),
                ],
              ),
              const SizedBox(height: 12),
              // Disabled buttons
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const ElevatedButton(
                    onPressed: null,
                    child: Text('Button'),
                  ),
                  const SizedBox(width: 12),
                  ElevatedButton.icon(
                    icon: const Icon(Icons.add, size: 18),
                    label: const Text('Button'),
                    onPressed: null,
                  ),
                ],
              ),

              //..........................................Outlined Button
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  OutlinedButton(
                    onPressed: () {},
                    child: const Text('Button'),
                  ),
                  const SizedBox(width: 12),
                  OutlinedButton.icon(
                    icon: const Icon(Icons.add, size: 18),
                    label: const Text('Button'),
                    onPressed: () {},
                  ),
                ],
              ),
              const SizedBox(height: 12),
              // Disabled buttons
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const OutlinedButton(
                    onPressed: null,
                    child: Text('Button'),
                  ),
                  const SizedBox(width: 12),
                  OutlinedButton.icon(
                    icon: const Icon(Icons.add, size: 18),
                    label: const Text('Button'),
                    onPressed: null,
                  ),
                ],
              ),



              //..........................................Toggle Button
              ToggleButtons(
                onPressed: (index) {
                  setState(() {
                    isSelected[index].value = !isSelected[index].value;
                  });
                },
                isSelected: isSelected.map((element) => element.value).toList(),
                children: const [
                  Icon(Icons.format_bold),
                  Icon(Icons.format_italic),
                  Icon(Icons.format_underline),
                ],
              ),
              const SizedBox(height: 12),
              // Disabled toggle buttons
              ToggleButtons(
                onPressed: null,
                isSelected: isSelected.map((element) => element.value).toList(),
                children: const [
                  Icon(Icons.format_bold),
                  Icon(Icons.format_italic),
                  Icon(Icons.format_underline),
                ],
              ),


              //..........................................FAB
              const SizedBox(height: 12),
              FloatingActionButton(
                onPressed: () {},
                tooltip: 'Create',
                child: const Icon(Icons.add),
              ),
              const SizedBox(height: 12),
              FloatingActionButton.extended(
                icon: const Icon(Icons.add),
                label: const Text('Create'),
                onPressed: () {},
              ),


            ],
          ),
        )
      );
  }
}

ButtonDemo widget that demonstrates various types of buttons available in Flutter. The widget contains a StatefulWidget and its corresponding _ButtonDemoState state class, which implements RestorationMixin for state restoration purposes.

The demo includes examples of:

• TextButton: A flat button with text and an optional icon.
• ElevatedButton: A button with a raised appearance and text and an optional icon.
• OutlinedButton: A button with a border and text and an optional icon.
• ToggleButtons: A group of buttons that can be toggled on and off.
• FloatingActionButton: A button that floats above the interface and is typically used for primary actions.

For each type of button, the demo provides examples of both enabled and disabled buttons.

 In the case of ToggleButtons, the demo uses RestorableBool to maintain the selected state of each button even when the app is closed and reopened.

The demo also includes examples of TextButton.icon, ElevatedButton.icon, and OutlinedButton.icon, which allow for the addition of an icon to the button.

Overall, this code demonstrates how to use various types of buttons in Flutter, and also provides an example of how to implement state restoration in Flutter using RestorationMixin.

..