ElevatedButton and TextButton in Flutter - Mini App: Build & Ship

Build: Button Demo Screen

This screen shows two buttons: an ElevatedButton and a TextButton. When you tap each button, a message appears below it.

Target UI

-------------------------
| Button Demo Screen     |
|-----------------------|
| [Elevated Button]     |
|                       |
| [Text Button]         |
|                       |
| Message:              |
|                       |
-------------------------

Add an ElevatedButton with label 'Elevated Button'.

Add a TextButton with label 'Text Button'.

When ElevatedButton is tapped, show text 'ElevatedButton pressed!' below it.

When TextButton is tapped, show text 'TextButton pressed!' below it.

Use a Column to arrange buttons and message vertically with spacing.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ButtonDemoScreen extends StatefulWidget {
  @override
  State<ButtonDemoScreen> createState() => _ButtonDemoScreenState();
}

class _ButtonDemoScreenState extends State<ButtonDemoScreen> {
  String message = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Button Demo Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add ElevatedButton here
            SizedBox(height: 20),
            // TODO: Add TextButton here
            SizedBox(height: 40),
            Text('Message: ' + message),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class ButtonDemoScreen extends StatefulWidget {
  @override
  State<ButtonDemoScreen> createState() => _ButtonDemoScreenState();
}

class _ButtonDemoScreenState extends State<ButtonDemoScreen> {
  String message = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Button Demo Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  message = 'ElevatedButton pressed!';
                });
              },
              child: Text('Elevated Button'),
            ),
            SizedBox(height: 20),
            TextButton(
              onPressed: () {
                setState(() {
                  message = 'TextButton pressed!';
                });
              },
              child: Text('Text Button'),
            ),
            SizedBox(height: 40),
            Text('Message: ' + message),
          ],
        ),
      ),
    );
  }
}

We use a StatefulWidget to keep track of the message shown below the buttons. The ElevatedButton and TextButton each have an onPressed callback that updates the message string using setState. This triggers the UI to refresh and show the new message. The buttons are arranged vertically with spacing using a Column and SizedBox widgets.

Final Result

Completed Screen

-------------------------
| Button Demo Screen     |
|-----------------------|
| [Elevated Button]     |
|                       |
| [Text Button]         |
|                       |
| Message: ElevatedButton pressed! |
-------------------------

Tap Elevated Button: message changes to 'ElevatedButton pressed!'

Tap Text Button: message changes to 'TextButton pressed!'

Stretch Goal

Add a SnackBar that shows the same message when each button is pressed.

💡 Hint

Use ScaffoldMessenger.of(context).showSnackBar inside onPressed.

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