ElevatedButton and TextButton in Flutter - Deep Dive

Overview - ElevatedButton and TextButton

What is it?

ElevatedButton and TextButton are two types of buttons in Flutter used to let users interact with the app. ElevatedButton looks raised with a shadow, making it stand out, while TextButton is flat and blends with the background. Both buttons can detect taps and trigger actions like opening a new screen or submitting a form.

Why it matters

Buttons are the main way users tell the app what to do. Without clear buttons, users would struggle to navigate or use features. ElevatedButton and TextButton help create clear, easy-to-use interfaces by showing which actions are important and which are less so.

Where it fits

Before learning these buttons, you should know basic Flutter widgets and how to build simple layouts. After this, you can learn about customizing buttons, handling user input, and managing app navigation.

Mental Model

Core Idea

ElevatedButton is a raised button that draws attention, while TextButton is a flat button for less prominent actions, both letting users tap to trigger app behavior.

Think of it like...

Think of ElevatedButton as a physical button on a keyboard that sticks out and invites pressing, while TextButton is like a word in a book you can tap quietly without drawing much attention.

┌───────────────┐   ┌───────────────┐
│ ElevatedButton│   │  TextButton   │
│  (Raised)     │   │  (Flat)       │
│  Shadow + BG  │   │  Transparent  │
│  Tap action   │   │  Tap action   │
└───────────────┘   └───────────────┘

Build-Up - 6 Steps

1

Foundation

What is ElevatedButton?

Concept: Introduces ElevatedButton as a raised button widget in Flutter.

ElevatedButton is a widget that looks like a button raised above the surface with a shadow. It is used to show important actions. You create it by calling ElevatedButton with a child widget (usually Text) and an onPressed function. Example: ElevatedButton( onPressed: () { print('Pressed'); }, child: Text('Click Me'), )

Result

A button appears with a shadow and the label 'Click Me'. When tapped, it prints 'Pressed' in the console.

Understanding ElevatedButton helps you create buttons that stand out and invite user interaction for key actions.

2

Foundation

What is TextButton?

Concept: Introduces TextButton as a flat button widget in Flutter.

TextButton is a widget that looks like plain text that can be tapped. It has no shadow or background by default. It is used for less important or secondary actions. Example: TextButton( onPressed: () { print('Tapped'); }, child: Text('Tap Here'), )

Result

A flat text button labeled 'Tap Here' appears. When tapped, it prints 'Tapped' in the console.

Knowing TextButton lets you add subtle interactive elements that don't distract from main actions.

3

Intermediate

Customizing Button Appearance

🤔Before reading on: do you think you can change button colors and shapes easily? Commit to yes or no.

Concept: Shows how to change colors, shapes, and sizes of ElevatedButton and TextButton.

Both buttons can be customized using the style property with ButtonStyle. You can change background color, text color, shape, padding, and more. Example: ElevatedButton( onPressed: () {}, style: ElevatedButton.styleFrom( backgroundColor: Colors.green, // background color shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), ), child: Text('Green Button'), ) TextButton( onPressed: () {}, style: TextButton.styleFrom( foregroundColor: Colors.red, // text color ), child: Text('Red Text'), )

Result

The ElevatedButton appears green with rounded corners. The TextButton text appears red.

Knowing how to style buttons lets you match your app’s look and guide users visually.

4

Intermediate

When to Use ElevatedButton vs TextButton

🤔Before reading on: do you think both buttons are interchangeable? Commit to yes or no.

Concept: Explains the design purpose and usage scenarios for each button type.

Use ElevatedButton for main actions that need user attention, like submitting a form or confirming choices. Use TextButton for less important actions, like canceling or secondary options. This helps users focus on what matters most. Example: Row( children: [ ElevatedButton(onPressed: () {}, child: Text('Save')), TextButton(onPressed: () {}, child: Text('Cancel')), ], )

Result

The 'Save' button stands out as the main action, while 'Cancel' is less prominent but still tappable.

Understanding button roles improves user experience by clearly showing priority actions.

5

Advanced

Handling Disabled and Loading States

🤔Before reading on: do you think buttons automatically show disabled states? Commit to yes or no.

Concept: Shows how to disable buttons and indicate loading to prevent multiple taps.

You can disable buttons by setting onPressed to null. This changes the button’s appearance to show it’s inactive. Example: ElevatedButton( onPressed: null, // disables button child: Text('Disabled'), ) For loading, you can replace the child with a CircularProgressIndicator or change the label. Example: ElevatedButton( onPressed: () {}, child: Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2), ), SizedBox(width: 8), Text('Loading...'), ], ), )

Result

Disabled button looks faded and cannot be tapped. Loading button shows a spinner and text.

Knowing how to manage button states prevents user confusion and accidental repeated actions.

6

Expert

Button Theming and Global Styles

🤔Before reading on: do you think you must style every button individually? Commit to yes or no.

Concept: Explains how to use Flutter’s theme system to style all buttons consistently across the app.

Flutter lets you define button styles globally in ThemeData. This means you set colors, shapes, and text styles once, and all ElevatedButton and TextButton widgets follow it. Example: MaterialApp( theme: ThemeData( elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom(backgroundColor: Colors.blue), ), textButtonTheme: TextButtonThemeData( style: TextButton.styleFrom(foregroundColor: Colors.orange), ), ), home: Scaffold(...), ) This keeps your app consistent and easier to maintain.

Result

All ElevatedButtons appear blue and all TextButtons appear orange without individual styling.

Using theming saves time and ensures a consistent look, which is crucial for professional apps.

Under the Hood

ElevatedButton and TextButton are built on Flutter’s Material design system. ElevatedButton uses a Material widget with elevation to create a shadow, while TextButton uses a transparent Material with no elevation. Both listen for tap gestures and call the onPressed callback when tapped. Styling is applied via ButtonStyle objects that control colors, shapes, and animations.

Why designed this way?

Flutter follows Google’s Material Design guidelines to create consistent, accessible UI components. ElevatedButton’s elevation helps users identify primary actions by making buttons appear raised. TextButton’s flat style is for less prominent actions. This separation improves usability and visual hierarchy.

┌─────────────────────────────┐
│ ElevatedButton Widget        │
│ ┌─────────────────────────┐ │
│ │ Material (elevation > 0) │ │
│ │ GestureDetector          │ │
│ │ ButtonStyle             │ │
│ └─────────────────────────┘ │
└─────────────┬───────────────┘
              │
┌─────────────▼───────────────┐
│ TextButton Widget            │
│ ┌─────────────────────────┐ │
│ │ Material (elevation = 0) │ │
│ │ GestureDetector          │ │
│ │ ButtonStyle             │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Myth Busters - 3 Common Misconceptions

Quick: do you think ElevatedButton and TextButton look the same by default? Commit to yes or no.

Common Belief: Many think ElevatedButton and TextButton are just different names for the same button.

Reality: They have distinct appearances and purposes: ElevatedButton is raised with shadow, TextButton is flat and transparent.

Why it matters: Using the wrong button type can confuse users about which actions are important.

Quick: do you think setting onPressed to null disables the button visually and functionally? Commit to yes or no.

Common Belief: Some believe buttons stay active even if onPressed is null.

Reality: Setting onPressed to null disables the button and changes its style to show it’s inactive.

Why it matters: Failing to disable buttons properly can lead to user frustration and app errors.

Quick: do you think you must style every button individually for consistent design? Commit to yes or no.

Common Belief: Many think global theming is unnecessary and styling per button is best.

Reality: Flutter’s theming system allows global styles that keep apps consistent and easier to maintain.

Why it matters: Ignoring theming leads to inconsistent UI and more work updating styles.

Expert Zone

1

ElevatedButton’s elevation can be animated smoothly when pressed, giving tactile feedback beyond just color changes.

2

TextButton can be combined with icons using TextButton.icon for clearer meaning without extra layout work.

3

ButtonStyle supports MaterialState properties that let you customize appearance for hover, focus, pressed, and disabled states separately.

When NOT to use

Avoid using ElevatedButton for too many actions on one screen as it overwhelms users; use TextButton or OutlinedButton for secondary actions. For highly customized buttons, consider building your own widget instead of forcing styles on these buttons.

Production Patterns

In production apps, ElevatedButton is often used for primary calls to action like 'Submit' or 'Buy', while TextButton is used for navigation links or cancel actions. Global theming ensures brand colors and shapes are consistent. Loading states are handled by swapping button content or disabling buttons to prevent duplicate actions.

Connections

Material Design

ElevatedButton and TextButton implement Material Design principles for buttons.

Understanding Material Design helps you grasp why these buttons look and behave the way they do.

User Experience (UX) Design

Button prominence guides user attention and action priority in UX design.

Knowing UX principles helps you choose the right button type to improve app usability.

Graphic Design - Visual Hierarchy

ElevatedButton and TextButton create visual hierarchy through elevation and color contrast.

Recognizing visual hierarchy in graphic design helps you design clearer interfaces with these buttons.

Common Pitfalls

#1 Using ElevatedButton for every action, making the UI cluttered and confusing.

Wrong approach:

Column(
children: [
ElevatedButton(onPressed: () {}, child: Text('Save')),
ElevatedButton(onPressed: () {}, child: Text('Cancel')),
ElevatedButton(onPressed: () {}, child: Text('Delete')),
],
)

Correct approach:

Column(
children: [
ElevatedButton(onPressed: () {}, child: Text('Save')),
TextButton(onPressed: () {}, child: Text('Cancel')),
TextButton(onPressed: () {}, child: Text('Delete')),
],
)

Root cause:

Misunderstanding button roles and visual hierarchy leads to poor user experience.

#2 Not disabling buttons during loading, allowing multiple taps and duplicate actions.

Wrong approach:

ElevatedButton(
onPressed: () async {
await submitData();
},
child: Text('Submit'),
)

Correct approach:

bool isLoading = false;
ElevatedButton(
onPressed: isLoading ? null : () async {
isLoading = true;
await submitData();
isLoading = false;
},
child: isLoading ? CircularProgressIndicator() : Text('Submit'),
)

Root cause:

Ignoring button state management causes user confusion and backend errors.

#3 Styling each button individually without using theming, causing inconsistent UI.

Wrong approach:

ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.red), ...)
TextButton(style: TextButton.styleFrom(foregroundColor: Colors.green), ...)
// repeated in many places

Correct approach:

MaterialApp(
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(foregroundColor: Colors.blue),
),
),
home: Scaffold(...),
)

Root cause:

Lack of understanding of Flutter’s theming system leads to maintenance headaches.

Key Takeaways

ElevatedButton and TextButton are distinct Flutter widgets designed for different button roles: raised for primary actions and flat for secondary ones.

Customizing buttons with styles and themes helps create visually consistent and user-friendly apps.

Managing button states like disabled and loading prevents user errors and improves app responsiveness.

Using Flutter’s global theming system saves time and ensures consistent button appearance across the app.

Choosing the right button type based on user experience principles guides users clearly through app actions.

Practice

1. Which Flutter button widget shows a background color and shadow by default?

easy

A. FlatButton

B. TextButton

C. IconButton

D. ElevatedButton

Solution

1. Step 1: Understand button types in Flutter

   ElevatedButton has a background and shadow, TextButton is flat with no background.

2. Step 2: Identify the button with background and shadow

   ElevatedButton is designed to have elevation and background color by default.

3. Final Answer:

   ElevatedButton -> Option D

4. Quick Check:

   ElevatedButton = background + shadow [OK]

Hint: ElevatedButton has elevation; TextButton is flat [OK]

Common Mistakes:

• Confusing TextButton as having background
• Thinking IconButton has background by default
• Using deprecated FlatButton

2. Which of the following is the correct syntax to create a TextButton with label 'Click' and a print action on press?

easy

A. TextButton(onClick: () => print('Clicked'), child: Text('Click'))

B. TextButton(child: Text('Click'), onTap: () => print('Clicked'))

C. TextButton(onPressed: () => print('Clicked'), child: Text('Click'))

D. TextButton(onPressed: print('Clicked'), child: 'Click')

Solution

1. Step 1: Check correct property names

   TextButton uses onPressed for tap events and child for its label widget.

2. Step 2: Verify syntax correctness

   TextButton(onPressed: () => print('Clicked'), child: Text('Click')) correctly uses onPressed with a lambda and child with Text widget.

3. Final Answer:

   TextButton(onPressed: () => print('Clicked'), child: Text('Click')) -> Option C

4. Quick Check:

   onPressed + child: Text = correct syntax [OK]

Hint: Use onPressed and child: Text for buttons [OK]

Common Mistakes:

• Using onClick instead of onPressed
• Passing string directly as child instead of Text widget
• Calling print inside onPressed instead of passing a function

3. What will be the visual difference when running this Flutter code?

ElevatedButton(onPressed: () {}, child: Text('Press'))
TextButton(onPressed: () {}, child: Text('Press'))

medium

A. ElevatedButton has background and shadow; TextButton is flat with only text

B. Both buttons look the same with background and shadow

C. TextButton has background; ElevatedButton is flat

D. Both buttons are invisible because onPressed is empty

Solution

1. Step 1: Understand default styles of ElevatedButton and TextButton

   ElevatedButton shows background color and shadow; TextButton is flat with no background.

2. Step 2: Analyze the given code

   Both have onPressed defined, so both are enabled and visible; their styles differ as per their types.

3. Final Answer:

   ElevatedButton has background and shadow; TextButton is flat with only text -> Option A

4. Quick Check:

   ElevatedButton = raised, TextButton = flat [OK]

Hint: ElevatedButton raised, TextButton flat text only [OK]

Common Mistakes:

• Thinking empty onPressed disables button
• Assuming TextButton has background by default
• Confusing visual styles of both buttons

4. Identify the error in this Flutter button code:

ElevatedButton(
  onPressed: print('Clicked'),
  child: Text('Tap me'),
)

medium

A. child should be a string, not Text widget

B. onPressed should be a function, not a function call

C. ElevatedButton does not accept onPressed property

D. Missing semicolon after ElevatedButton

Solution

1. Step 1: Check onPressed assignment

   onPressed expects a function to call when pressed, not the result of a function call.

2. Step 2: Identify the mistake

   print('Clicked') is called immediately; should be wrapped in a lambda like () => print('Clicked').

3. Final Answer:

   onPressed should be a function, not a function call -> Option B

4. Quick Check:

   onPressed = function, not function call [OK]

Hint: Pass function to onPressed, not call it directly [OK]

Common Mistakes:

• Calling print inside onPressed instead of passing a function
• Using string instead of Text widget for child
• Assuming ElevatedButton lacks onPressed

5. You want a button that looks flat but disables itself when pressed. Which Flutter widget and property combination achieves this best?

hard

A. TextButton with onPressed set to null after press

B. ElevatedButton with onPressed set to null after press

C. TextButton with onPressed always non-null

D. ElevatedButton with child set to null

Solution

1. Step 1: Understand button disabling in Flutter

   Setting onPressed to null disables the button visually and functionally.

2. Step 2: Choose button style and disabling method

   TextButton is flat; disabling it by setting onPressed to null after press fits the requirement.

3. Step 3: Eliminate incorrect options

   ElevatedButton is raised, not flat; child cannot disable button; onPressed non-null keeps button enabled.

4. Final Answer:

   TextButton with onPressed set to null after press -> Option A

5. Quick Check:

   Disable button by onPressed = null [OK]

Hint: Disable button by setting onPressed to null [OK]

Common Mistakes:

• Thinking child null disables button
• Using ElevatedButton for flat style
• Not setting onPressed to null to disable