> For the complete documentation index, see [llms.txt](https://flutteropen.gitbook.io/flutter-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteropen.gitbook.io/flutter-widgets/widgets-06-or-raisebutton.md).

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

![](/files/-LWekLXDyQtgWIkZPoxm)

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

![](/files/-LWenZyFaaDXp_EvciMc)

![](/files/-LWeoLdRXw2dLjginfZl)

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

![](/files/-LWes0I1FP0CRoKrK0Lb)

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.

![](/files/-LWf-alFQ7XFgPt6KbBr)

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

![](/files/-LWf8XpvQup0b_5CSOh4)

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

![](/files/-LWfCLzfotU6XpLHNRff)

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.

![](/files/-LWfEC1yExO9yi6jenZq)

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

![](/files/-LWfIU8TEu5BgdQLKrla)

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

![](/files/-LWfL9I4b26g7igGXlI7)

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

![](/files/-LWfkBNVjJ4ditMlQi6q)

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.

![](/files/-LWfsFXNLngw0iqdTUAt)

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

![](/files/-LWfwQMcWGlqDMI6FHOP)

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;

![](/files/-LWg0w6BUuDLdMoJsSkP)

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

![](/files/-LWg1g0ErnKiYDfMras2)

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 |