Introduction
This article will teach about buttons and Text widgets in a flutter. In Flutter, we have multiple types of buttons and text, and based on the requirement, we have to use that type of button or text in our project.
In the previous article, we learned basic terminology in Flutter, including widgets and their type and life cycle methods of the stateful widget.
Some important Buttons in Flutter are as follows:
Elevated Button in Flutter
The elevated Button is used for important actions, like submitting a form, confirming a choice, etc. By default, it has some background and border.
Example
ElevatedButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Elevated Button is Clicked")));
},
child: Text("Elevated Button"),
),
Text Button in Flutter
The text button is a very simple button that can be used when we want to perform some action when the user tab a label on the screen. By default, it does not have any border or elevation.
Example
TextButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Text Button is Clicked")));
},
child: Text("Text Button"),
),
Icon Button in Flutter
When the user clicks on the icon on the screen and we want to perform some operation, the icon button is a good choice in this scenario.
Example
IconButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Icon Button is Clicked")));
},
icon: Icon(Icons.add),
),
Outline Button in Flutter
This button is used when our requirement is a button with an outline border and no background. It is typically used for secondary actions, like canceling a form or clearing a search field.
Example
OutlinedButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Outline Button is Clicked")));
},
child: Text("Outline Button"),
),
Floating Action Button in Flutter
It is also called the FAB button. This button generally appears on the bottom right side of the screen. It is typically used to represent the primary action that the user can take on a screen. For example, the FAB could be used in a TODO app to add a new task.
Example
floatingActionButton:FloatingActionButton(
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("FAB Button is Clicked")));
},
child: Icon(Icons.add),
),
Some important Texts in Flutter are as follows:
Text Widget in Flutter
Text is a simple widget that displays a label on the screen. We can customize the text using the style property.
Example
Text("This is sample text",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red,
)),
Rich Text Widget in Flutter
We can create text with different font styles, sizes, colors, and backgrounds using RichText without creating multiple text widgets. We can customize the text with various styles using the TextSpan class.
Example
RichText(
text: TextSpan(children: [
TextSpan(
text: "You ",
style: TextStyle(fontSize: 14, color: Colors.green)),
TextSpan(
text: "are ",
style: TextStyle(fontSize: 14, color: Colors.green)),
TextSpan(
text: "looking ",
style: TextStyle(fontSize: 14, color: Colors.green)),
TextSpan(
text: "good",
style: TextStyle(fontSize: 20, color: Colors.red)),
])),
Output
![]()
Source Code- main.dart
import 'package:flutter/material.dart';
import 'MyHomePage.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(),
);
}
}
MyHomePage.dart
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Home Page")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Elevated Button is Clicked")));
},
child: Text("Elevated Button"),
),
SizedBox(
height: 10,
),
TextButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Text Button is Clicked")));
},
child: Text("Text Button"),
),
SizedBox(
height: 10,
),
IconButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Icon Button is Clicked")));
},
icon: Icon(Icons.add),
),
SizedBox(
height: 10,
),
OutlinedButton(
onPressed: () {
// ScaffoldMessanger is used for toast messages
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Outline Button is Clicked")));
},
child: Text("Outline Button"),
),
SizedBox(
height: 10,
),
SizedBox(
height: 10,
),
Text("This is sample text",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
)),
RichText(
text: TextSpan(children: [
TextSpan(
text: "You ",
style: TextStyle(fontSize: 14, color: Colors.green)),
TextSpan(
text: "are ",
style: TextStyle(fontSize: 14, color: Colors.green)),
TextSpan(
text: "looking ",
style: TextStyle(fontSize: 14, color: Colors.green)),
TextSpan(
text: "good",
style: TextStyle(fontSize: 20, color: Colors.red)),
])),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Icon Button is Clicked")));
},
child: Icon(Icons.add),
),
);
}
}
Conclusion
In this article, we have seen different types of buttons and texts in Flutter and how to use them. Please share your thoughts if you have any suggestions or queries on this article. Thanks for reading, and I hope you like it.
Happy learning, friends!