How to Disable TextButton in Flutter

Flutter has so many Button widgets and the TextButton is one of them. Sometimes, we may want to disable a button. In this Flutter tutorial, let us check how to disable a TextButton.

Disabling TextButton is pretty easy. All you need is to pass a null value to the onPressed property. See the code snippet given below.

TextButton(
            style: TextButton.styleFrom(
                padding: const EdgeInsets.all(10),
                foregroundColor: Colors.red,
                textStyle: const TextStyle(fontSize: 20)),
            onPressed: null,
            child: const Text('Disabled TextButton'),
          ),

The color of the TextButton becomes grey when it is disabled. The output is given below.

flutter textbutton disable

Following is the complete code for reference.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            'Flutter TextButton Disable',
          ),
        ),
        body: Center(
          child: TextButton(
            style: TextButton.styleFrom(
                padding: const EdgeInsets.all(10),
                foregroundColor: Colors.red,
                textStyle: const TextStyle(fontSize: 20)),
            onPressed: null,
            child: const Text('Disabled TextButton'),
          ),
        ));
  }
}

That’s how you disable TextButton in Flutter.

Leave a Comment