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.