9 unique ElevatedButton design in flutter

Hey, Flutter developers! In this blog post, we’ll look at ElevatedButton, which every app developer is familiar with.

Yes, those little buttons that users tap, click, and interact with to traverse your program. But why settle for plain old buttons when you can make things a little more interesting? In this blog article, we’ll look at the beautiful world of button designs in Flutter. We’ll cover the classics, yes, but we’ll also throw in some new ideas that will make your app stand out like never before. Consider eye-catching gradients, unconventional shapes, and animated buttons.

So, whether you’re a pro or just getting started with Flutter, grab your coding hat and join us on our adventure to make your buttons the talk of the town. Let us make your app sparkle, one tap at a time!

• 1. Simple ElevatedButton in Flutter
• 2. Simple ElevatedButton in Flutter with Icon
• 3. ElevatedButton with Icon on right side
• 4. Outline ElevatedButton in Flutter
• 5. Gradient ElevatedButton in Flutter
• 6. IconButton in Flutter
• 7. Circular IconButton in Flutter
• 8. Mordern ElevatedButton in flutter
• 9. TextButton in Flutter

1. Simple ElevatedButton in Flutter

import 'package:flutter/material.dart';

/* ------------------------- Simple ElevatedButton ------------------------- */
class ButtonOne extends StatelessWidget {
  const ButtonOne({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 50,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
        onPressed: () {},
        child: const Text(
          'Click Me',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Dart

Where can you use simple ElevatedButton?

1. Forms and Inputs: ElevatedButton is commonly used in forms where you need the user to submit their inputs. For instance, you might use it for a "Submit" button in a login form.
2. Dialogs and Alerts: When you want to confirm an action with the user, such as deleting an item, you can use an ElevatedButton in an alert dialog.
3. Navigation: ElevatedButton can be used for navigation purposes. For example, you might have a "Next" button in a multi-step process.
4. Actions in AppBar: In some cases, you might want to have buttons in the app bar for actions like saving or editing. ElevatedButton can be used for this purpose.

2. Simple ElevatedButton in Flutter with Icon

import 'package:flutter/material.dart';

/* ------------------------ ElevatedButton with Icon ------------------------ */
class ButtonTwo extends StatelessWidget {
  const ButtonTwo({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 50,
      child: ElevatedButton.icon(
        style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
        onPressed: () {},
        icon: const Icon(
          Icons.check,
          color: Colors.white,
        ),
        label: const Text(
          'Subscribe',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Dart

Where can we use ElevatedButton with icon?

1. Forms: In forms, it’s common to have buttons with icons for actions like submitting the form, adding an item, etc.
2. Navigation: Buttons with icons are used for navigation actions like going back, going to the next page, etc.
3. Toolbars: In app bars or toolbars, icons are frequently used for actions like search, settings, etc.
4. Dialogs: Buttons with icons can be used in dialogs for actions like confirming, canceling, etc.
5. Floating Action Button (FAB): While not exactly an ElevatedButton, FloatingActionButton is often used with icons for prominent actions within an app.

3. ElevatedButton with Icon on right side

import 'package:flutter/material.dart';

/* ----------------- ElevatedButton with Icon on right side ----------------- */
class ButtonThree extends StatelessWidget {
  const ButtonThree({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 50,
      child: Directionality(
        textDirection: TextDirection.rtl,
        child: ElevatedButton.icon(
          style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
          onPressed: () {},
          icon: const Icon(
            Icons.check,
            color: Colors.white,
          ),
          label: const Text(
            'Subscribe',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Dart

Want to learn how to customize the shape of an ElevatedButton? Click here.

4. Outline ElevatedButton in Flutter

import 'package:flutter/material.dart';

/* -------------------- Outline ElevatedButton in Flutter ------------------- */
class ButtonFour extends StatelessWidget {
  const ButtonFour({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 50,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
            backgroundColor: Colors.grey.shade300,
            elevation: 0,
            side: const BorderSide(
              width: 2,
              color: Colors.black87,. 
            )),
        onPressed: () {},
        child: const Text(
          'Click Me',
          style: TextStyle(color: Colors.black),
        ),
      ),
    );
  }
}

Dart

Where can we use of Outline ElevatedButton?

1. Secondary Action Button: Use Outline ElevatedButton for secondary actions in your UI, such as canceling a form submission or dismissing a dialog.
2. Form Controls: It can be used alongside form fields, providing users with options like “Cancel” or “Reset” while maintaining a less prominent appearance compared to primary action buttons.
3. Dialog Actions: Incorporate Outline ElevatedButton as actions within dialogs for options like “Cancel” or “Dismiss”, ensuring users have clear secondary choices without overwhelming them with primary actions.

5. Gradient ElevatedButton in Flutter

import 'package:flutter/material.dart';

/* ------------------- Gradient ElevatedButton in flutter ------------------- */
class ButtonFive extends StatelessWidget {
  const ButtonFive({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 50,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          gradient: const LinearGradient(colors: [
            Colors.blue,
            Colors.white,
          ])),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(backgroundColor: Colors.transparent),
        onPressed: () {},
        child: const Text(
          'Click Me',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Dart

Where can we use Gradient ElevatedButton?

1. Call-to-Action Buttons: Utilize gradient elevated buttons for primary actions in your app’s UI, such as “Sign Up”, “Subscribe”, or “Buy Now”. The gradient background can make these buttons more eye-catching and encourage user interaction.
2. Prominent Features: If your app has certain features or functionalities that you want to highlight, you can use gradient elevated buttons to draw attention to them. For example, a music streaming app might use gradient buttons for “Premium Upgrade” or “Exclusive Playlist Access”.
3. Visual Hierarchy: Gradient elevated buttons can help establish a visual hierarchy within your app’s interface. By using gradients for primary actions and solid colors or outlined buttons for secondary actions, you can guide users’ attention and emphasize important interactions.
4. Marketing and Promotions: During marketing campaigns or promotions, gradient elevated buttons can be particularly effective in drawing attention to special offers, discounts, or limited-time deals. The dynamic appearance of the gradient can convey a sense of excitement or urgency.

6. IconButton in Flutter

import 'package:flutter/material.dart';

/* -------------------------- IconButton in flutter ------------------------- */
class ButtonSix extends StatelessWidget {
  const ButtonSix({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      width: 200,
      child: IconButton(
        style: const ButtonStyle(
            backgroundColor: MaterialStatePropertyAll(Colors.blue)),
        onPressed: () {},
        icon: const Icon(
          Icons.arrow_right_alt_outlined,
          color: Colors.black,
        ),
      ),
    );
  }
}

Dart

7. Circular IconButton in Flutter

import 'package:flutter/material.dart';

/* --------------------- Circular IconButton in Flutter --------------------- */
class ButtonSeven extends StatelessWidget {
  const ButtonSeven({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.green.shade800,
      ),
      child: IconButton(
        style: ButtonStyle(
          backgroundColor: MaterialStatePropertyAll(Colors.green.shade500),
        ),
        onPressed: () {},
        icon: const Icon(
          Icons.arrow_downward_rounded,
          color: Colors.white,
        ),
      ),
    );
  }
}

Dart

Where can we use Circular IconButton?

1. Floating Action Button (FAB): Circular icon buttons are commonly used as FABs in Flutter applications. They provide quick access to primary actions within the app, such as composing a new message in a messaging app, adding a new item to a list, or initiating a new task.
2. Navigation Controls: Use circular icon buttons for navigation controls within your app, such as a button to navigate back to the previous screen or a button to open a navigation drawer or menu.
3. Media Controls: In media player applications, circular icon buttons can be used for controlling playback, including play, pause, stop, rewind, and fast forward functions.
4. Action Buttons in Toolbars: Within app toolbars, circular icon buttons can represent actions such as search, settings, share, or delete. These buttons provide a compact and intuitive way for users to access common actions without cluttering the UI with text labels.
5. Toggle Buttons: Circular icon buttons can also be used as toggle buttons to switch between different states or modes within the app. For example, a circular icon button with a star icon might toggle between adding and removing an item from favorites.
6. Interactive Elements in Maps: In map-based applications, circular icon buttons can be used to represent interactive elements such as markers, pins, or buttons to toggle different map layers or views.

8. Mordern ElevatedButton in flutter

import 'package:flutter/material.dart';

/* -------------------- Mordern ElevatedButton in flutter ------------------- */
class ButtonEight extends StatelessWidget {
  const ButtonEight({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 50,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
        onPressed: () {},
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Delete',
              style: TextStyle(color: Colors.white),
            ),
            SizedBox(height: 30.0, child: VerticalDivider(color: Colors.white)),
            Icon(Icons.close_rounded, color: Colors.white),
          ],
        ),
      ),
    );
  }
}

Dart

Explore more about ElevatedButton class in Flutter.

9. TextButton in Flutter

import 'package:flutter/material.dart';

/* -------------------------- TextButton in Flutter ------------------------- */
class ButtonNine extends StatelessWidget {
  const ButtonNine({super.key});
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {},
      child: Text(
        'Click to see more...',
        style: TextStyle(
          color: Colors.green.shade800,
        ),
      ),
    );
  }
}

Dart

Where to use TextButton?

1. Flat Button: TextButton is commonly used as a flat button when you want a button with minimal visual impact. It’s useful for actions that are less critical or don’t need to be emphasized prominently.
2. Secondary Actions: Use TextButton for secondary actions in your UI that are less important than primary actions but still need to be accessible to users. For example, a “Cancel” or “Close” button in a dialog or a “Skip” button in an onboarding flow.
3. Inline Actions: TextButton can be used for inline actions within text content, such as links or clickable tags. For instance, in a news app, you might use TextButton for article tags like “Sports,” “Technology,” or “Entertainment.”
4. Form Controls: Incorporate TextButton as part of form controls, such as a “Reset” button in a form that allows users to clear the entered values and start over.
5. Confirmation Buttons: Use TextButton for confirmation buttons alongside primary action buttons like “Save” or “Submit.” For example, in a confirmation dialog, you might have “Confirm” as the primary action and “Cancel” as a TextButton for the secondary action.
6. Navigation: TextButton can be used for navigation within the app, such as links to other screens or sections. For example, in a settings screen, you might use TextButtons for each setting category to navigate to different sections.

Thank you for taking the time to read this post! Your feedback means the world to me. I’d love to hear your thoughts — did you find it enjoyable or insightful? Feel free to comment below with your views and any topics you’d like me to delve into in future articles. Your input is the driving force behind the content I create. Looking forward to engaging with you!