A Comprehensive Guide to Flutter Buttons: Choosing the Right One for Your App

TextButton(
  // onPressed function that gets triggered when button is pressed
  onPressed: () {
    // Add your onPressed code here!
  },
  child: const Text(
    'This is a TextButton Demo - Enabled',
  ), // Text displayed on the button
),

TextButton(
  // Button is disabled
  // as onPressed function is null
  onPressed: null,
  child: Text(
    'This is a TextButton Demo - Disabled',
  ),
),

TextButton.icon(
  // onPressed function that gets
  //triggered when button is pressed
  onPressed: () {
    // Add your onPressed code here!
  },
  icon: const Icon(
    Icons.access_alarm,
  ), // Icon displayed before the text
  label: const Text(
    'This is a TextButton Demo - TextButton.icon #1',
  ), // Text displayed on the button
),

TextButton.icon(
  style: TextButton.styleFrom(
    foregroundColor: Colors.white, // Text color
    backgroundColor: Colors.green, // Background color
  ),
  onPressed: () {}, // onPressed function that gets triggered when button is pressed
  icon: const Icon(
    Icons.access_alarm,
  ), // Icon displayed before the text
  label: const Text(
    'This is a TextButton Demo - TextButton.icon #2',
  ), // Text displayed on the button
),

TextButton(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: const BorderRadius.all(
        Radius.circular(
          20,
        ),
      ), // Border radius of the button
      side: BorderSide(
        color: Colors.lightBlue, // Border color
        width: 3, // Border width
      ),
    ),
  ),
  onPressed: () {}, // onPressed function that gets triggered when button is pressed
  child: const Text(
    'This is a TextButton Demo - TextButton #3',
  ), // Text displayed on the button
),

TextButton(
  style: TextButton.styleFrom(
    overlayColor: Colors.amber, // Color when button is pressed
  ),
  onPressed: () {}, // onPressed function that gets triggered when button is pressed
  child: const Text(
    'This is a TextButton Demo - TextButton #4',
  ), // Text displayed on the button
),

TextButton(
  style: TextButton.styleFrom(
    foregroundBuilder: (context, states, child) {
      return ShaderMask(
        shaderCallback: (Rect bounds) {
          return LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Colors.red,
              Colors.green,
            ],
          ).createShader(bounds);
        },
        blendMode: BlendMode.srcATop,
        child: child,
      );
    },
  ),
  onPressed: () {}, // onPressed function that gets triggered when button is pressed
  child: const Text(
    'This is a TextButton Demo - TextButton #5',
  ), // Text displayed on the button
),

TextButton(
  style: TextButton.styleFrom(
    foregroundBuilder: (context, states, child) {
      return DecoratedBox(
        decoration: BoxDecoration(
          border: states.contains(WidgetState.hovered)
              ? Border(
                  bottom: BorderSide(
                    color: Colors.lightBlue,
                  ),
                )
              : const Border(), // Border displayed when button is hovered
        ),
        child: child,
      );
    },
  ),
  onPressed: () {}, // onPressed function that gets triggered when button is pressed
  child: const Text(
    'This is a TextButton Demo - TextButton #6',
  ), // Text displayed on the button
),

TextButton(
  onPressed: () {}, // onPressed function that gets triggered when button is pressed
  style: TextButton.styleFrom(
    overlayColor: Colors.orange.withValues(
      alpha: 1.0,
    ), // Color when button is pressed
    backgroundBuilder: (context, states, child) {
      return AnimatedContainer(
        duration: const Duration(
          milliseconds: 500,
        ), // Duration of the animation
        decoration: (states.contains(WidgetState.pressed))
            ? BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.orange.withValues(
                      alpha: 1.0,
                    ),
                    Colors.orange.withValues(
                      alpha: 1.0,
                    ),
                  ],
                ), // Gradient when button is pressed
              )
            : BoxDecoration(
                gradient: LinearGradient(
                  colors: switch (
                      states.contains(WidgetState.hovered)) {
                    true => [
                        Colors.blue.withValues(
                          alpha: 1.0,
                        ),
                        Colors.orange.withValues(
                          alpha: 1.0,
                        )
                      ],
                    false => [
                        Colors.orange.withValues(
                          alpha: 1.0,
                        ),
                        Colors.blue.withValues(
                          alpha: 1.0,
                        ),
                      ],
                  },
                ), // Gradient when button is not pressed
              ),
        child: child,
      );
    },
  ).copyWith(
    side: WidgetStateProperty.resolveWith<BorderSide?>((states) {
      if (states.contains(WidgetState.hovered)) {
        return BorderSide(
          width: 3,
          color: Colors.yellow.withValues(
            alpha: 1.0,
          ), // Border color when button is hovered
        );
      }
      return null; // Border color when button is not hovered
    }),
  ),
  child: const Text(
    'TextButton #7',
    style: TextStyle(
      color: Colors.white,
    ),
  ), // Text displayed on the button
),

FilledButton(
  onPressed: () {
    // Define the action that should be taken when the button is pressed.
    // Currently, this is an empty function.
  },
  child: const Text(
    "This is a filled button - Mihir Pipermitwala",
  ),
),

FilledButton.tonal(
  onPressed: () {
    // Define the action that should be taken when the button is pressed.
    // Currently, this is an empty function.
  },
  child: const Text(
    "This is a filled button (tonal)",
  ),
)

ElevatedButton(
  onPressed: null,
  child: const Text(
    'Disabled',
  ),
),
ElevatedButton(
  onPressed: () {
    // Add your onPressed code here!
  },
  child: const Text(
    'Enabled',
  ),
),

OutlinedButton(
  onPressed: () {
    debugPrint(
      'Received click',
    );
  },
  child: const Text(
    'Click Me',
  ),
),

IconButton(
  icon: const Icon(Icons.filter_drama),
  onPressed: () {
    // Add your onPressed code here!
  },
),

IconButton.filled(
  onPressed: () {
    // Add your onPressed code here!
  },
  icon: const Icon(
    Icons.filter_drama,
  ),
),

IconButton.filledTonal(
  onPressed: () {
    // Add your onPressed code here!
  },
  icon: const Icon(
    Icons.filter_drama,
  ),
),

IconButton.outlined(
  onPressed: () {
    // Add your onPressed code here!
  },
  icon: const Icon(
    Icons.filter_drama,
  ),
),

FloatingActionButton.small(
  onPressed: () {
    // Add your onPressed code here!
  },
  child: const Icon(Icons.add),
),

FloatingActionButton(
  onPressed: () {
    // Add your onPressed code here!
  },
  child: const Icon(Icons.add),
),

FloatingActionButton.large(
  onPressed: () {
    // Add your onPressed code here!
  },
  child: const Icon(Icons.add),
),

FloatingActionButton.extended(
  onPressed: () {
    // Add your onPressed code here!
  },
  label: const Text('Add'),
  icon: const Icon(Icons.add),
),

const CupertinoButton(
  onPressed: null,
  child: Text('Disabled'),
),

const CupertinoButton.filled(
  onPressed: null,
  child: Text('Disabled'),
),

CupertinoButton(
  onPressed: () {
    // Define the action that should be taken when the button is pressed.
  },
  child: const Text('Enabled'),
),

CupertinoButton.filled(
  onPressed: () {
    // Define the action that should be taken when the button is pressed.
  },
  child: const Text('Enabled'),
),