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.