Button And Text Widget In Flutter Day - 3

Abhishek Singhal
1y
3.8k
0
1

Article

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.