top of page

TextButton.styleFrom() in Flutter - Tutorial

Updated: Nov 27, 2022

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




Related Posts

See All

The image sharing apps, shopping apps, etc. have image zoom functionality required to see the image in detail. Today, we will learn to implement the same with the help of a widget, InteractiveViewer.

bottom of page