Widgets 06 | RaiseButton

In this tutorial, I will tell you about the RaiseButton in the flutter.

Before Start

As tutorial before, we should create a page to contain our code. Because we have so many parameters, we need many examples to describe this. So I create a page that can scroll, we just put our tutorial code in the children list. The code is below.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class RaiseButtonPage extends StatefulWidget {
  @override
  _RaiseButtonState createState() => _RaiseButtonState();
}

class _RaiseButtonState extends State<RaiseButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.RAISE_BUTTON),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            //our tutorial code.
            SizedBox(
              height: 300,
            )
          ],
        ),
      ),
    );
  }
}

It will show as follows.

Simple Use

If we want to use the RaiseButton. It is easy.

 RaisedButton(
              onPressed: () {
                print("pressed");
              },
              child: Text(
                "Click Me~~~",
                style: TextStyle(color: RED, fontSize: 40),
              ),
            ),

The onPressed parameter is necessary, its value is a function, I just put a print statement here. About the child, I put a Text here. It will show as below.If you click this button, it will print pressed in the console.

Constructor

When we want to use some widgets, don't forget to look at the constructor carefully. 

RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

We have learned how to use the onPressed, child, so I will talk about the others below.

onHighlightChanged

This parameter is a function as the onPressed parameter. If we set this parameter, when we click down or up the button, the onHighlightChanged will be called. The definition is as follows. So it is just a function with bool parameter.

typedef ValueChanged<T> = void Function(T value);

Let's use it.

            SizedBox(height: 10),
            RaisedButton(
              onPressed: () {
                print("click");
              },
              onHighlightChanged: (isHigh) {
                print("onHighlightChanged.isHigh = $isHigh");
              },
              child: Text(
                "Click Hightlight~~~",
                style: TextStyle(color: BLUE_DEEP, fontSize: 40),
              ),
            ),

It will show like this.

When we click,it will print as follows. So when we press down the isHigh = true, loose up the screen it will be false. Then will call the click event.

I/flutter ( 6333): onHighlightChanged.isHigh = true
I/flutter ( 6333): onHighlightChanged.isHigh = false
I/flutter ( 6333): click

colors

there are several colors in the RaiseButton.

    Color textColor,//When we put the child as a Text, this color will set to it.
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,

Let's set the different value to see its effect. You should know when onPressed: null,the button will be disable. So you can see the disabledColor/disabledTextColor.

 Widget _colorsButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "color:PURPLE\ntextColor: Colors.white\nhighlightColor: RED\nsplashColor: BLUE_DEEP",
              style: TextStyle(fontSize: 40),
            ),
            color: PURPLE,
            textColor: Colors.white,
            highlightColor: RED,
            splashColor: BLUE_DEEP,
          ),
          SizedBox(height: 10),
          RaisedButton(
            onPressed: null,
            child: Text(
              " onPressed: null \ndisabledColor: YELLOW,\n disabledTextColor: TEXT_BLACK,",
              style: TextStyle(fontSize: 40),
            ),
            disabledColor: YELLOW,
            disabledTextColor: TEXT_BLACK,
          ),
        ],
      );

When calling in our children list in RaiseButtonPage. You can see as follows. The first one you can press,and when you click the button, the animation color is the BLUE_DEEP, it is the splashColor . If you click the button and stain a moment, the background of the button will change to RED, it is the highlightColor. But the second will not be clicked.

textTheme

The textTheme also controls the color text, but it depends on the theme in the our app. I set like this.

 theme: ThemeData(
          primaryColor: BLUE_DEEP,
          accentColor: RED,
          brightness: Brightness.light),

About the textTheme its type is an enum. Let's look at its definition.

enum ButtonTextTheme {
  /// Button text is black or white depending on [ThemeData.brightness].
  normal,

  /// Button text is [ThemeData.accentColor].
  accent,

  /// Button text is based on [ThemeData.primaryColor].
  primary,
}

The description is easy to understand, let's see the effect.

Widget _themeButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "textTheme:normal",
              style: TextStyle(fontSize: 40),
            ),
            textTheme: ButtonTextTheme.normal,
          ),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "textTheme:accent",
              style: TextStyle(fontSize: 40),
            ),
            textTheme: ButtonTextTheme.accent,
          ),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "textTheme:primary",
              style: TextStyle(fontSize: 40),
            ),
            textTheme: ButtonTextTheme.primary,
          ),
        ],
      );

It will show as follows, but the primary doesn't show as we want. This will retain to the next time we talk about the theme to research it.

colorBrightness

If you use this parameter, you have only two choices,It will change the color of the Text. So it is easy to use. Let's look at the code.

 Widget _brightButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 30),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "colorBrightness:light",
              style: TextStyle(fontSize: 40),
            ),
            colorBrightness: Brightness.dark,
          ),
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "colorBrightness:dark",
              style: TextStyle(fontSize: 40),
            ),
            colorBrightness: Brightness.light,
          ),
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "colorBrightness:light\ntextTheme:accent",
              style: TextStyle(fontSize: 40),
            ),
            colorBrightness: Brightness.light,
            textTheme: ButtonTextTheme.accent,
          ),
        ],
      );

In the last RaiseButton, I add the textTheme parameter to compare. When we see the picture, we know that it will take precedence to show the textTheme if it is set.

I know the textColor controls the same thing in our widget. So what its priority. Let's compare these three parameters.

 Widget _compareColor() => Column(
        children: <Widget>[
          SizedBox(height: 30),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            child: Text(
              "textTheme: accent\ntextColor: BLUE\ncolorBrightness:light",
              style: TextStyle(
                fontSize: 40,
              ),
            ),
            color: BLUE_LIGHT,
            textTheme: ButtonTextTheme.accent,
            textColor: Colors.white,
            colorBrightness: Brightness.light,
          )
        ],
      );

It will show as follows.

So, about the precedence, we have the result textColor > textTheme > colorBrightness.

elevation

There are three parameters about the elevation: elevation,disabledElevation,highlightElevation. They are the same function use for different part, they all control shadow of the button. The elevation controls the normal state, disabledElevation to the disable state, highlightElevation to the highlight state. Let's look at an example.

 Widget _elevationButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {},
            child: Text(
              "elevation: 4\nhighlightElevation: 10",
              style: TextStyle(fontSize: 40),
            ),
            color: RED,
            textColor: Colors.white,
            elevation: 4,
            highlightElevation: 10,
            highlightColor: TEXT_BLACK_LIGHT,
          ),
          SizedBox(height: 10),
          RaisedButton(
            onPressed: null,
            child: Text(
              "disabledElevation: 10",
              style: TextStyle(fontSize: 40),
            ),
            color: RED,
            disabledElevation: 10,
            disabledTextColor: TEXT_BLACK,
            disabledColor: PURPLE,
          ),
        ],
      );

padding

This parameter controls the distance inside of the child. We have learned the detail of the padding in Widgets 01 | Container. So I just give an example.

 Widget _paddingButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            color: GREEN,
            child: Text(
              "padding",
              style: TextStyle(fontSize: 40),
            ),
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
          )
        ],
      );

It will show as follows.

shape

This parameter is very nice, it can change the shape of the button. We have used it before, but just a simple one in the Container, this time we will learn more detail about this parameter. We know the shape is the ShapeBorder. It is an abstract class, so we can't use it directly. So we must find its children class. Let's look at the table.These all are its subclass. But BoxBorder,InputBorder are the abstract class, their subclass is in the same line. If you want to use shape, you can use all of them,except the abstract class.

So how to use them. Let's see an example with each border.

 Widget _shapeButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            color: BLUE_LIGHT,
            child: Text(
              "StadiumBorder",
              style: TextStyle(fontSize: 40),
            ),
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
            shape: StadiumBorder(
              side: BorderSide(color: RED_LIGHT, width: 1),
            ),
          ),
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            color: RED,
            child: Text(
              "RoundedRectangleBorder",
              style: TextStyle(fontSize: 30),
            ),
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            shape: RoundedRectangleBorder(
                side: BorderSide(color: PURPLE, width: 4),
                borderRadius: BorderRadius.circular(10)),
          ),
          SizedBox(height: 10),
          RaisedButton(
            onPressed: () {
              print("click");
            },
            color: PURPLE,
            child: Text(
              "BeveledRectangleBorder",
              style: TextStyle(fontSize: 20),
            ),
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
            shape: BeveledRectangleBorder(
                side: BorderSide(color: GREEN, width: 4),
                borderRadius: BorderRadius.circular(50)),
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  print("click");
                },
                color: Colors.white,
                child: Text(
                  "Border",
                  style: TextStyle(fontSize: 20),
                ),
                padding: EdgeInsets.all(30),
                shape: Border(
                  top: BorderSide(color: RED, width: 10),
                  bottom: BorderSide(color: PURPLE, width: 10),
                  left: BorderSide(color: BLUE, width: 20),
                  right: BorderSide(color: GREEN, width: 20),
                ),
              ),
              Expanded(
                child: RaisedButton(
                  onPressed: () {
                    print("click");
                  },
                  color: GREEN,
                  child: Text(
                    "Circle\nBorder",
                    style: TextStyle(fontSize: 20),
                    textAlign: TextAlign.center,
                  ),
                  padding: EdgeInsets.all(40),
                  shape: CircleBorder(
                    side: BorderSide(color: YELLOW, width: 4),
                  ),
                ),
              ),
              RaisedButton(
                onPressed: () {
                  print("click");
                },
                color: Colors.white,
                child: Text(
                  "Border\nDirectional",
                  style: TextStyle(fontSize: 20),
                  textAlign: TextAlign.center,
                ),
                padding: EdgeInsets.all(20),
                shape: BorderDirectional(
                  top: BorderSide(color: RED, width: 10),
                  bottom: BorderSide(color: PURPLE, width: 10),
                  start: BorderSide(color: BLUE, width: 20),
                  end: BorderSide(color: GREEN, width: 20),
                ),
              ),
            ],
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  print("click");
                },
                color: Colors.white,
                child: Text(
                  "Outline\nInputBorder",
                  style: TextStyle(fontSize: 20),
                  textAlign: TextAlign.center,
                ),
                padding: EdgeInsets.all(20),
                shape: OutlineInputBorder(
                  borderSide: BorderSide(color: RED_LIGHT, width: 10),
                ),
              ),
              RaisedButton(
                onPressed: () {
                  print("click");
                },
                color: RED_LIGHT,
                child: Text(
                  "Underline\nInputBorder",
                  style: TextStyle(fontSize: 20),
                  textAlign: TextAlign.center,
                ),
                padding: EdgeInsets.all(20),
                shape: UnderlineInputBorder(
                  borderSide: BorderSide(color: GREEN, width: 10),
                ),
              ),
            ],
          )
        ],
      );

It will show as below.

clipBehavior

When the content has not enough space, then we will decide to clip some contents. So the clipBehavior will control this situation. Let's look at an example first.

 Widget _clipButton() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 10),
          Text(
            "clipBehavior: Clip.none",
            style: TextStyle(
              fontSize: 20,
              color: TEXT_BLACK,
            ),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text(
              "BeveledRectangleBordern",
              style: TextStyle(fontSize: 40),
            ),
            color: BLUE,
            shape: BeveledRectangleBorder(
                side: BorderSide(style: BorderStyle.none),
                borderRadius: BorderRadius.circular(100)),
            clipBehavior: Clip.none,
          ),
          SizedBox(height: 10),
          Text(
            "clipBehavior: Clip.hardEdge",
            style: TextStyle(
              fontSize: 20,
              color: TEXT_BLACK,
            ),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text(
              "BeveledRectangleBordern",
              style: TextStyle(fontSize: 40),
            ),
            color: BLUE,
            shape: BeveledRectangleBorder(
                side: BorderSide(style: BorderStyle.none),
                borderRadius: BorderRadius.circular(100)),
            clipBehavior: Clip.hardEdge,
          ),
          SizedBox(height: 10),
          Text(
            "clipBehavior: Clip.antiAlias",
            style: TextStyle(
              fontSize: 20,
              color: TEXT_BLACK,
            ),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text(
              "BeveledRectangleBordern",
              style: TextStyle(fontSize: 40),
            ),
            color: BLUE,
            shape: BeveledRectangleBorder(
                side: BorderSide(style: BorderStyle.none),
                borderRadius: BorderRadius.circular(100)),
            clipBehavior: Clip.antiAlias,
          ),
          SizedBox(height: 10),
          Text(
            "clipBehavior: Clip.antiAliasWithSaveLayer",
            style: TextStyle(
              fontSize: 20,
              color: TEXT_BLACK,
            ),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text(
              "BeveledRectangleBordern",
              style: TextStyle(fontSize: 40),
            ),
            color: BLUE,
            shape: BeveledRectangleBorder(
                side: BorderSide(style: BorderStyle.none),
                borderRadius: BorderRadius.circular(100)),
            clipBehavior: Clip.antiAliasWithSaveLayer,
          )
        ],
      );

It will show you as follows.

We can see that except the first one, the others will be cut the surplus part. So what difference between them? Now I will amplify the picture and show the different.The hardEdge obvious has some saw-tooth, and other two have a smooth edge.

Let's look at their main different about its speed and quality. Let's look at the following picture.

Our example shows the last two are similar, so if you want a smooth edge and consider the deal speed, we recommend you using the antiAlias.

Conclusion

Today we have learned the RaiseButton. This widget has many parameters. The main knowledge contains how to use the onPressed,color,elevation,shape. Especially, we have listed its use of all shape.

Thanks for your reading!

The end.

Whole code in GitHub,star to support.

PreviousWidgets 05 | IconNextWidgets 07 | AppBar

Last updated