Skip to content

[Flutter] Use TextButton to Create a Text Button

Last Updated on 2022-01-14 by Clay

There are many methods to create a button for user in Flutter application, but I think the TextButton is the easiest one. It is a simple button can display any text, and click it can trigger the function.


How to use TextButton

In this article I do not record how to call a function, but you just need to write the function into onPressed right side. (Or you can refer other tutorial)

The article mainly record how to display a TextButton, enable and disable the button appearance, follow the official tutorial to list the gradient background effect.

The gradient background is actually stacking the gradient Container element with the TextButton element using the Stack layout. For information on Stack and Gradient Container, please refer to the link at the end of this article.

The following is a sample code, just need to research the three TextButton components.

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  String _title = "TextButton Demo";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: MyTextButtonPage(),
      ),
    );
  }
}


class MyTextButtonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Ceter
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // TextButton_Disable
          TextButton(
            onPressed: null,
            child: Text("TextButton_Disable"),
          ),

          // TextButton_Enable
          TextButton(
            onPressed: () {},
            child: Text('TextButton_Enable')
          ),

          // TextButton_Style
          ClipRRect(
            // Put the TextButton on the Gradient Container
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                // Container
                Positioned.fill(
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Colors.pink,
                          Colors.red,
                          Colors.orange,
                        ],
                      ),
                    ),
                  ),
                ),

                // TextButton_Gradient
                TextButton(
                  onPressed: () {},
                  child: Text('TextButton_Gradient'),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}


Output:

TextButton is very simple and can be customized very easily.


References


Read More

Tags:

Leave a Reply