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.
1
import "package:flutter/material.dart";
2
import 'package:flutter_widgets/const/_const.dart';
3
​
4
class RaiseButtonPage extends StatefulWidget {
5
@override
6
_RaiseButtonState createState() => _RaiseButtonState();
7
}
8
​
9
class _RaiseButtonState extends State<RaiseButtonPage> {
10
@override
11
Widget build(BuildContext context) {
12
return Scaffold(
13
appBar: AppBar(
14
title: Text(PageName.RAISE_BUTTON),
15
),
16
body: SingleChildScrollView(
17
child: Column(
18
children: <Widget>[
19
//our tutorial code.
20
SizedBox(
21
height: 300,
22
)
23
],
24
),
25
),
26
);
27
}
28
}
Copied!
It will show as follows.
Simple Use
If we want to use the
RaiseButton. It is easy.1
RaisedButton(
2
onPressed: () {
3
print("pressed");
4
},
5
child: Text(
6
"Click Me~~~",
7
style: TextStyle(color: RED, fontSize: 40),
8
),
9
),
Copied!
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.
1
RaisedButton({
2
Key key,
3
@required VoidCallback onPressed,
4
ValueChanged<bool> onHighlightChanged,
5
ButtonTextTheme textTheme,
6
Color textColor,
7
Color disabledTextColor,
8
Color color,
9
Color disabledColor,
10
Color highlightColor,
11
Color splashColor,
12
Brightness colorBrightness,
13
double elevation,
14
double highlightElevation,
15
double disabledElevation,
16
EdgeInsetsGeometry padding,
17
ShapeBorder shape,
18
Clip clipBehavior = Clip.none,
19
MaterialTapTargetSize materialTapTargetSize,
20
Duration animationDuration,
21
Widget child,
22
})
Copied!
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.1
typedef ValueChanged<T> = void Function(T value);
Copied!
Let's use it.
1
SizedBox(height: 10),
2
RaisedButton(
3
onPressed: () {
4
print("click");
5
},
6
onHighlightChanged: (isHigh) {
7
print("onHighlightChanged.isHigh = $isHigh");
8
},
9
child: Text(
10
"Click Hightlight~~~",
11
style: TextStyle(color: BLUE_DEEP, fontSize: 40),
12
),
13
),
Copied!
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.1
I/flutter ( 6333): onHighlightChanged.isHigh = true
2
I/flutter ( 6333): onHighlightChanged.isHigh = false
3
I/flutter ( 6333): click
Copied!
colors
there are several colors in the
RaiseButton.1
Color textColor,//When we put the child as a Text, this color will set to it.
2
Color disabledTextColor,
3
Color color,
4
Color disabledColor,
5
Color highlightColor,
6
Color splashColor,
Copied!
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.1
Widget _colorsButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 10),
5
RaisedButton(
6
onPressed: () {
7
print("click");
8
},
9
child: Text(
10
"color:PURPLE\ntextColor: Colors.white\nhighlightColor: RED\nsplashColor: BLUE_DEEP",
11
style: TextStyle(fontSize: 40),
12
),
13
color: PURPLE,
14
textColor: Colors.white,
15
highlightColor: RED,
16
splashColor: BLUE_DEEP,
17
),
18
SizedBox(height: 10),
19
RaisedButton(
20
onPressed: null,
21
child: Text(
22
" onPressed: null \ndisabledColor: YELLOW,\n disabledTextColor: TEXT_BLACK,",
23
style: TextStyle(fontSize: 40),
24
),
25
disabledColor: YELLOW,
26
disabledTextColor: TEXT_BLACK,
27
),
28
],
29
);
Copied!
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.
1
theme: ThemeData(
2
primaryColor: BLUE_DEEP,
3
accentColor: RED,
4
brightness: Brightness.light),
Copied!
About the
textTheme its type is an enum. Let's look at its definition.1
enum ButtonTextTheme {
2
/// Button text is black or white depending on [ThemeData.brightness].
3
normal,
4
​
5
/// Button text is [ThemeData.accentColor].
6
accent,
7
​
8
/// Button text is based on [ThemeData.primaryColor].
9
primary,
10
}
Copied!
The description is easy to understand, let's see the effect.
1
Widget _themeButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 10),
5
RaisedButton(
6
onPressed: () {
7
print("click");
8
},
9
child: Text(
10
"textTheme:normal",
11
style: TextStyle(fontSize: 40),
12
),
13
textTheme: ButtonTextTheme.normal,
14
),
15
RaisedButton(
16
onPressed: () {
17
print("click");
18
},
19
child: Text(
20
"textTheme:accent",
21
style: TextStyle(fontSize: 40),
22
),
23
textTheme: ButtonTextTheme.accent,
24
),
25
RaisedButton(
26
onPressed: () {
27
print("click");
28
},
29
child: Text(
30
"textTheme:primary",
31
style: TextStyle(fontSize: 40),
32
),
33
textTheme: ButtonTextTheme.primary,
34
),
35
],
36
);
Copied!
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.1
Widget _brightButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 30),
5
RaisedButton(
6
onPressed: () {
7
print("click");
8
},
9
child: Text(
10
"colorBrightness:light",
11
style: TextStyle(fontSize: 40),
12
),
13
colorBrightness: Brightness.dark,
14
),
15
SizedBox(height: 10),
16
RaisedButton(
17
onPressed: () {
18
print("click");
19
},
20
child: Text(
21
"colorBrightness:dark",
22
style: TextStyle(fontSize: 40),
23
),
24
colorBrightness: Brightness.light,
25
),
26
SizedBox(height: 10),
27
RaisedButton(
28
onPressed: () {
29
print("click");
30
},
31
child: Text(
32
"colorBrightness:light\ntextTheme:accent",
33
style: TextStyle(fontSize: 40),
34
),
35
colorBrightness: Brightness.light,
36
textTheme: ButtonTextTheme.accent,
37
),
38
],
39
);
Copied!
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.1
Widget _compareColor() => Column(
2
children: <Widget>[
3
SizedBox(height: 30),
4
RaisedButton(
5
onPressed: () {
6
print("click");
7
},
8
child: Text(
9
"textTheme: accent\ntextColor: BLUE\ncolorBrightness:light",
10
style: TextStyle(
11
fontSize: 40,
12
),
13
),
14
color: BLUE_LIGHT,
15
textTheme: ButtonTextTheme.accent,
16
textColor: Colors.white,
17
colorBrightness: Brightness.light,
18
)
19
],
20
);
Copied!
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.1
Widget _elevationButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 10),
5
RaisedButton(
6
onPressed: () {},
7
child: Text(
8
"elevation: 4\nhighlightElevation: 10",
9
style: TextStyle(fontSize: 40),
10
),
11
color: RED,
12
textColor: Colors.white,
13
elevation: 4,
14
highlightElevation: 10,
15
highlightColor: TEXT_BLACK_LIGHT,
16
),
17
SizedBox(height: 10),
18
RaisedButton(
19
onPressed: null,
20
child: Text(
21
"disabledElevation: 10",
22
style: TextStyle(fontSize: 40),
23
),
24
color: RED,
25
disabledElevation: 10,
26
disabledTextColor: TEXT_BLACK,
27
disabledColor: PURPLE,
28
),
29
],
30
);
Copied!
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.1
Widget _paddingButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 10),
5
RaisedButton(
6
onPressed: () {
7
print("click");
8
},
9
color: GREEN,
10
child: Text(
11
"padding",
12
style: TextStyle(fontSize: 40),
13
),
14
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
15
)
16
],
17
);
Copied!
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.
1
Widget _shapeButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 10),
5
RaisedButton(
6
onPressed: () {
7
print("click");
8
},
9
color: BLUE_LIGHT,
10
child: Text(
11
"StadiumBorder",
12
style: TextStyle(fontSize: 40),
13
),
14
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
15
shape: StadiumBorder(
16
side: BorderSide(color: RED_LIGHT, width: 1),
17
),
18
),
19
SizedBox(height: 10),
20
RaisedButton(
21
onPressed: () {
22
print("click");
23
},
24
color: RED,
25
child: Text(
26
"RoundedRectangleBorder",
27
style: TextStyle(fontSize: 30),
28
),
29
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
30
shape: RoundedRectangleBorder(
31
side: BorderSide(color: PURPLE, width: 4),
32
borderRadius: BorderRadius.circular(10)),
33
),
34
SizedBox(height: 10),
35
RaisedButton(
36
onPressed: () {
37
print("click");
38
},
39
color: PURPLE,
40
child: Text(
41
"BeveledRectangleBorder",
42
style: TextStyle(fontSize: 20),
43
),
44
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
45
shape: BeveledRectangleBorder(
46
side: BorderSide(color: GREEN, width: 4),
47
borderRadius: BorderRadius.circular(50)),
48
),
49
SizedBox(height: 10),
50
Row(
51
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
52
children: <Widget>[
53
RaisedButton(
54
onPressed: () {
55
print("click");
56
},
57
color: Colors.white,
58
child: Text(
59
"Border",
60
style: TextStyle(fontSize: 20),
61
),
62
padding: EdgeInsets.all(30),
63
shape: Border(
64
top: BorderSide(color: RED, width: 10),
65
bottom: BorderSide(color: PURPLE, width: 10),
66
left: BorderSide(color: BLUE, width: 20),
67
right: BorderSide(color: GREEN, width: 20),
68
),
69
),
70
Expanded(
71
child: RaisedButton(
72
onPressed: () {
73
print("click");
74
},
75
color: GREEN,
76
child: Text(
77
"Circle\nBorder",
78
style: TextStyle(fontSize: 20),
79
textAlign: TextAlign.center,
80
),
81
padding: EdgeInsets.all(40),
82
shape: CircleBorder(
83
side: BorderSide(color: YELLOW, width: 4),
84
),
85
),
86
),
87
RaisedButton(
88
onPressed: () {
89
print("click");
90
},
91
color: Colors.white,
92
child: Text(
93
"Border\nDirectional",
94
style: TextStyle(fontSize: 20),
95
textAlign: TextAlign.center,
96
),
97
padding: EdgeInsets.all(20),
98
shape: BorderDirectional(
99
top: BorderSide(color: RED, width: 10),
100
bottom: BorderSide(color: PURPLE, width: 10),
101
start: BorderSide(color: BLUE, width: 20),
102
end: BorderSide(color: GREEN, width: 20),
103
),
104
),
105
],
106
),
107
SizedBox(height: 10),
108
Row(
109
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
110
children: <Widget>[
111
RaisedButton(
112
onPressed: () {
113
print("click");
114
},
115
color: Colors.white,
116
child: Text(
117
"Outline\nInputBorder",
118
style: TextStyle(fontSize: 20),
119
textAlign: TextAlign.center,
120
),
121
padding: EdgeInsets.all(20),
122
shape: OutlineInputBorder(
123
borderSide: BorderSide(color: RED_LIGHT, width: 10),
124
),
125
),
126
RaisedButton(
127
onPressed: () {
128
print("click");
129
},
130
color: RED_LIGHT,
131
child: Text(
132
"Underline\nInputBorder",
133
style: TextStyle(fontSize: 20),
134
textAlign: TextAlign.center,
135
),
136
padding: EdgeInsets.all(20),
137
shape: UnderlineInputBorder(
138
borderSide: BorderSide(color: GREEN, width: 10),
139
),
140
),
141
],
142
)
143
],
144
);
Copied!
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.1
Widget _clipButton() => Column(
2
mainAxisAlignment: MainAxisAlignment.center,
3
children: <Widget>[
4
SizedBox(height: 10),
5
Text(
6
"clipBehavior: Clip.none",
7
style: TextStyle(
8
fontSize: 20,
9
color: TEXT_BLACK,
10
),
11
),
12
RaisedButton(
13
onPressed: () {},
14
child: Text(
15
"BeveledRectangleBordern",
16
style: TextStyle(fontSize: 40),
17
),
18
color: BLUE,
19
shape: BeveledRectangleBorder(
20
side: BorderSide(style: BorderStyle.none),
21
borderRadius: BorderRadius.circular(100)),
22
clipBehavior: Clip.none,
23
),
24
SizedBox(height: 10),
25
Text(
26
"clipBehavior: Clip.hardEdge",
27
style: TextStyle(
28
fontSize: 20,
29
color: TEXT_BLACK,
30
),
31
),
32
RaisedButton(
33
onPressed: () {},
34
child: Text(
35
"BeveledRectangleBordern",
36
style: TextStyle(fontSize: 40),
37
),
38
color: BLUE,
39
shape: BeveledRectangleBorder(
40
side: BorderSide(style: BorderStyle.none),
41
borderRadius: BorderRadius.circular(100)),
42
clipBehavior: Clip.hardEdge,
43
),
44
SizedBox(height: 10),
45
Text(
46
"clipBehavior: Clip.antiAlias",
47
style: TextStyle(
48
fontSize: 20,
49
color: TEXT_BLACK,
50
),
51
),
52
RaisedButton(
53
onPressed: () {},
54
child: Text(
55
"BeveledRectangleBordern",
56
style: TextStyle(fontSize: 40),
57
),
58
color: BLUE,
59
shape: BeveledRectangleBorder(
60
side: BorderSide(style: BorderStyle.none),
61
borderRadius: BorderRadius.circular(100)),
62
clipBehavior: Clip.antiAlias,
63
),
64
SizedBox(height: 10),
65
Text(
66
"clipBehavior: Clip.antiAliasWithSaveLayer",
67
style: TextStyle(
68
fontSize: 20,
69
color: TEXT_BLACK,
70
),
71
),
72
RaisedButton(
73
onPressed: () {},
74
child: Text(
75
"BeveledRectangleBordern",
76
style: TextStyle(fontSize: 40),
77
),
78
color: BLUE,
79
shape: BeveledRectangleBorder(
80
side: BorderSide(style: BorderStyle.none),
81
borderRadius: BorderRadius.circular(100)),
82
clipBehavior: Clip.antiAliasWithSaveLayer,
83
)
84
],
85
);
Copied!
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.
Facebook Page
Twitter
GitHub
QQ Group
​
Last modified 2yr ago