Customise Button Flutter: Chat App – Step Two

How to create a custom button in Flutter? How do we customise our button in Flutter so that the Chat App will look great?

To make a custom button, we don’t have to work hard. On the contrary, we can create a custom button quite easily. In addition, we can use that button in our Chat App that we’ve been building.

How can we do that?

All we need to do is to create a custom widget that will return a Material Button Widget.

Firstly, the Material Button is a utility class for building Material buttons. However, this class depends on ButtonTheme and Theme class in Flutter.

Secondly, while we build our custom Button we need to remember a few things.

The “Flat Button”, “Raised Button”, and “Outline Button” are now obsolete. The “Text Button”, “Elevated Button”, and “Outlined Button” have replaced them respectively.

Therefore, finally, we can design our own buttons.

How do we create the custom button?

The first question that comes to our mind is what does a button need?

A button needs a Text that will tell the purpose of the button. The button must have a color and a Void Call back or a void Function.

Why?

So that a user can press the button. Right?

During our creation of the custom button Widget, we may pass these values through its constructor.

As an outcome, it looks like the following image.

The above image shows the welcome page where our custom button clearly indicates what to do.

But, what will the user do?

If she is new, she can register. Else she can login, if she has already registered.

To clarify, we can customise these properties. Our custom button Widget looks as follows.

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {
  const RoundedButton({
    Key? key,
    required this.colour,
    required this.title,
    required this.onPressed,
  }) : super(key: key);

  final Color colour;
  final String title;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
        elevation: 5.0,
        color: colour,
        borderRadius: BorderRadius.circular(30.0),
        child: MaterialButton(
          onPressed: onPressed,
          minWidth: 200.0,
          height: 42.0,
          child: Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

What is the advantage of building a custom button? Many.

Certainly, we can change the Text, color on the fly. As a result, in different pages, we can use different color and Text style.

As we build the Chat app, we’ll see how we can use our custom button.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter