TextButton.styleFrom() in Flutter - Tutorial

TextButton widget in Flutter is used to provide a transparent background by default and usually adds buttons containing the Text widget.

In this tutorial, we are going to learn to style the TextButton widget using the TextButton.styleForm() option.

Parameters: We use the following parameters:

• primary: It is the text fill colour of the Button.

• onPrimary: It is the default colour or the overlay colour of the Button Text.

• onSurface: Similar to onPrimary.

• shadowColor: It is used to set the shadowColor.

• surfaceTintColor: It is used to set the surface tint colour.

• elevation: It takes a double type of value and is used to set the shadow distance.

• textStyle: It is used to set the TextStyle of the child widget if it is a TextWidget.

• padding: It is used to set the padding of the Button with its child.

• minimumSize: The minimum size the button should have.

• fixedSize: It is used to fix the size of the button.

• maximumSize: Here we need to specify the maximum size that the button could have.

• side: It is used to set the border side.

• shape: We can change the shape of the border with this field.

• enabledMouseCursor: If true, the mouse cursor can be used on it.

• disabledMouseCursor: If true, the mouse cursor is disabled.

• visualDensity: It is used to set the visual density.

• tapTargetSize: It is used to set the radius where the tap would be recognized from the button.

• animationDuration: It is used to set the duration of the animation of the splash effect.

• enableFeedback: If true, the HapticFeedback is turned on.

• alignment: It is used to set the alignment of the contents of the Button.

• splashFactory: We can set our own InkSplash with this.

Syntax: Apply the style of TextButton as follows:

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    primary: Colors.green,
  ),
  child: const Text(
    "Click ME",
  ),
),

Example: In the following example, we have some TextButtons with different primary colours.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AllAboutFlutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const TextButtonStyleFromTutorial(),
    );
  }
}

class TextButtonStyleFromTutorial extends StatelessWidget {
  const TextButtonStyleFromTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextButton.styleFrom() Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                primary: Colors.green,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Click ME",
              ),
            ),
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                primary: Colors.orange,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Click ME",
              ),
            ),
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                primary: Colors.blue,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Click ME",
              ),
            ),
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                primary: Colors.purple,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Click ME",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Example: In the following example, we have buttons of different elevations.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AllAboutFlutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const TextButtonStyleFromTutorial(),
    );
  }
}

class TextButtonStyleFromTutorial extends StatelessWidget {
  const TextButtonStyleFromTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextButton.styleFrom() Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                elevation: 0.0,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Elevation 0.0",
              ),
            ),
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                elevation: 5.0,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Elevation 5.0",
              ),
            ),
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                elevation: 10.0,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Elevation 10.0",
              ),
            ),
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                elevation: 20.0,
                textStyle: const TextStyle(fontSize: 32.0),
              ),
              child: const Text(
                "Elevation 20",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Reference: https://api.flutter.dev/flutter/material/TextButton/styleFrom.html