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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteropen.gitbook.io/flutter-widgets/widgets-06-or-raisebutton.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.