flutter-tutorial

Flutter Buttons

Buttons are graphical control elements that allow a user to perform tasks such as executing actions, making decisions, looking for items, and so on. They can be used in any part of our user interface, including dialogues, forms, cards, toolbars, and so on.

Flutter widgets, which are part of the material design library, are buttons. Flutter offers a variety of button kinds with varying forms, designs, and features.

Features of Buttons

The following are the standard features of a button in Flutter:

  • Themes may be applied to buttons, shapes, colour, animation, and behaviour with ease.
  • We may also customise the button’s icons and content.
  • Buttons can be made up of various child widgets with various properties.

Types of Flutter Buttons

There are mainly three types of buttons:

  • Flat Button
  • Raised Button
  • Floating Button

1. Flat Button

It’s a plain text label button that doesn’t have much ornamentation and isn’t elevated. Two properties are required for the flat button: child and onPressed (). It’s typically found in toolbars, dialogue boxes, and inline with other material. The flat button has no colour and black text by default. However, we may utilise the colour and textColor attributes to add colour to the button and text, respectively.

Example:

Open the https://dartpad.dev and write the below code.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Learn Code Zone'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.all(25),
              child: FlatButton(
                child: Text(
                  'SignUp',
                  style: TextStyle(fontSize: 20.0),
                ),
                onPressed: () {},
              ),
            ),
            Container(
              margin: EdgeInsets.all(25),
              child: FlatButton(
                child: Text(
                  'LogIn',
                  style: TextStyle(fontSize: 20.0),
                ),
                color: Colors.blueAccent,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ),
          ]))),
    );
  }
}

Output:

If we run this app, we will see the following screen:

2. Raised Button

It’s a rectangle button with a rectangular body that’s based on the material widget. It seems like a flat button, but it has a slight elevation that rises as the button is pressed. Along the Z-axis, it gives the UI more depth. It has a number of characteristics, like text colour, shape, padding, button colour, disabled button colour, animation time, elevation, and so on.

This button has two callback functions.

  • onPressed(): It is triggered when the button is pressed.
  • onLongPress(): It is triggered when the button is long pressed.

Example:

Open the https://dartpad.dev and write the below code.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String msg = 'Flutter RaisedButton Example';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Learn Code Zone'),
        ),
        body: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  msg,
                  style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),
                ),
                RaisedButton(
                  child: Text(
                    "Click Here",
                    style: TextStyle(fontSize: 20),
                  ),
                  onPressed: _changeText,
                  color: Colors.red,
                  textColor: Colors.yellow,
                  padding: EdgeInsets.all(8.0),
                  splashColor: Colors.grey,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  _changeText() {
    setState(() {
      if (msg.startsWith('F')) {
        msg = 'We have learned FlutterRaised button example.';
      } else {
        msg = 'Flutter RaisedButton Example';
      }
    });
  }
}

Output:

When we run this example, it will give the below screenshot. If we click on the “Click Here” button, it will change the text message. Show the second screenshot.

3. Floating Action Button

A FAB button is a circular icon button that initiates our application’s main activity. In today’s applications, it is the most often utilized button. This button can be used to add, refresh, or share the content. Flutter recommends only utilising one FAB button per screen. A Floating Action Button can be one of two types:

FloatingActionButton: This widget provides a simple circular floating button that contains a child widget. To display a widget, it must contain a child parameter.

FloatingActionButton.extended: This method produces a large floating button with an icon and a label. It employs labels and icon parameters instead of a child.

Example:

Open the https://dartpad.dev and write the below code.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Learn Code. Zone"),
          backgroundColor: Colors.blue,
          actions: <Widget>[
            IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}),
            IconButton(icon: Icon(Icons.account_circle), onPressed: () => {})
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.navigation),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
          onPressed: () => {},
        ),
      ),
    );
  }
}

Output:

Run the application in android emulator, and it will give the UI similar to the following screenshot.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *