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.