ElevatedButton and TextButton in Flutter

Introduction

Buttons let users tap to do things in your app. ElevatedButton and TextButton are two common button styles you can use.

When you want a button that stands out with a shadow and background color (ElevatedButton).

When you want a simple button with just text and no background (TextButton).

When you want to show a clear call to action on a form or screen.

When you want consistent, easy-to-use buttons that follow platform style.

When you want to handle taps and run code when the user presses a button.

Syntax

Flutter

ElevatedButton(
  onPressed: () { /* action */ },
  child: Text('Button Text'),
)

TextButton(
  onPressed: () { /* action */ },
  child: Text('Button Text'),
)

onPressed is required to make the button tappable.

child is usually a Text widget showing the button label.

Examples

A raised button with shadow and background color that prints a message when tapped.

Flutter

ElevatedButton(
  onPressed: () {
    print('Elevated button tapped');
  },
  child: Text('Elevated'),
)

A flat button with just text that prints a message when tapped.

Flutter

TextButton(
  onPressed: () {
    print('Text button tapped');
  },
  child: Text('Text'),
)

A disabled ElevatedButton that cannot be tapped.

Flutter

ElevatedButton(
  onPressed: null,
  child: Text('Disabled'),
)

Sample App

This app shows two buttons in the center: an ElevatedButton and a TextButton. Tapping each prints a message in the console.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Buttons Example')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                onPressed: () {
                  print('ElevatedButton pressed');
                },
                child: const Text('ElevatedButton'),
              ),
              const SizedBox(height: 20),
              TextButton(
                onPressed: () {
                  print('TextButton pressed');
                },
                child: const Text('TextButton'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

If you set onPressed to null, the button becomes disabled and looks faded.

You can customize button colors and styles using style property.

Use ElevatedButton for important actions and TextButton for less prominent actions.

Summary

ElevatedButton is a button with background and shadow.

TextButton is a flat button with just text.

Both need onPressed to work and show a label inside child.

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