# Widgets 06 | RaiseButton

## 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.

```dart
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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWe6V_Xb03DbSSffUpn%2F-LWekLXDyQtgWIkZPoxm%2Fraise_button_01.png?alt=media\&token=4e444fd7-462d-48d0-8d1c-73d92497897e)

## Simple Use

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

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWenZyFaaDXp_EvciMc%2Fraise_button_02.png?alt=media\&token=6e97d92d-a95f-4353-abf8-832b2fed22c2)

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWeoLdRXw2dLjginfZl%2Fraise_button_03.png?alt=media\&token=92d92671-9067-4493-9bf5-c7c574abdd5b)

## Constructor

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

```dart
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.

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

Let's use it.

```dart
            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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWes0I1FP0CRoKrK0Lb%2Fraise_button_04.png?alt=media\&token=6f3a0858-21d3-4cb8-afe7-addacfa690cf)

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.

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

## colors

there are several  colors in the `RaiseButton`.

```dart
    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`.

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWf-alFQ7XFgPt6KbBr%2Fraise_button_05.png?alt=media\&token=fc666039-889c-46ba-9fa0-2c9af21a7360)

## textTheme

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

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

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

```dart
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.

```dart
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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWf8XpvQup0b_5CSOh4%2Fraise_button_06.png?alt=media\&token=0094788f-044c-4b32-9e3f-f2003f43f9ac)

## 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.

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfCLzfotU6XpLHNRff%2Fraise_button_07.png?alt=media\&token=1b538fbd-b40e-43a9-a412-4ccf62b3431f)

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

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfEC1yExO9yi6jenZq%2Fraise_button_08.png?alt=media\&token=6aa25509-2f04-4482-a1d5-79a5825214c7)

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.

```dart
 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,
          ),
        ],
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfIU8TEu5BgdQLKrla%2Fraise_button_09.png?alt=media\&token=00b3820e-7080-44ec-ac9c-8a8973a86e47)

## padding

This parameter controls the distance inside of the child. We have learned the detail of the `padding` in [Widgets 01 | Container](https://flutteropen.gitbook.io/ebook/flutter-widgets-01-container). So I just give an example.

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfL9I4b26g7igGXlI7%2Fraise_button_10.png?alt=media\&token=2534334d-ada1-4d10-93b4-0ae35ee28591)

## 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.&#x20;

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfkBNVjJ4ditMlQi6q%2Fraise_button_11.png?alt=media\&token=87bb5acd-55cf-40d2-912b-5a57a9105178)

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

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfsFXNLngw0iqdTUAt%2Fraise_button_12.png?alt=media\&token=52d2dca5-5b1d-483d-aa6c-039544e42e37)

## 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.

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWfwQMcWGlqDMI6FHOP%2Fraise_button_13.png?alt=media\&token=ffc3da5e-0395-4afe-beca-ab4b8ce81555)

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.&#x20;

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWg0w6BUuDLdMoJsSkP%2Fraise_button_14.png?alt=media\&token=cb9c2fc9-4afd-49f8-b2be-071f03d0116a)

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

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWemGBYd-PAMmLzrpJ2%2F-LWg1g0ErnKiYDfMras2%2Fraise_button_15.png?alt=media\&token=2a45c2c9-75f6-41c4-abd6-f5a0986559a7)

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](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | QQ Group  |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | 963828159 |