Flutter Widget之Material

Widget:https://flutter.io/docs/development/ui/widgets
Material:https://docs.flutter.io/flutter/material/Material-class.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import 'package:flutter/material.dart';

class MaterialDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _MaterialDemoPagePageState();
}

class _MaterialDemoPagePageState extends State<MaterialDemoPage> {
@override
void initState() {
super.initState();
}

Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text('Material Demo'),
),
body: new Column(
children: <Widget>[
new Center(
child: new Material(
color: Colors.blueAccent,
shape: new BeveledRectangleBorder( //斜角矩形边框
side:new BorderSide(
width: 1.0,
color: Colors.blueAccent,
style: BorderStyle.none,
),
borderRadius:new BorderRadius.circular(50.0),
),
child: new Container(
padding: EdgeInsets.all(20.0),
child: new Text('斜角矩形边框'),
),
),
),
new Center(
child: new Material(
color: Colors.blueAccent,
shape: new BeveledRectangleBorder( //斜角矩形边框
side:new BorderSide(
width: 1.0,
color: Colors.blueAccent,
style: BorderStyle.none,
),
borderRadius:new BorderRadius.circular(10.0),
),
child: new Container(
padding: EdgeInsets.all(20.0),
child: new Text('斜角矩形边框'),
),
),
),
new Center(
child: new Material(
color: Colors.blueAccent,
shape:new BorderDirectional(
start: new BorderSide(
color: Colors.yellow,
width: 10.0,
),
top: new BorderSide(
color: Colors.deepOrange,
width: 10.0,
),
end: new BorderSide(
color: Colors.black87,
width: 10.0,
),
bottom: new BorderSide(
color: Colors.purpleAccent,
width: 10.0,
)
),
child:new Container(
padding: EdgeInsets.all(30.0),
child: new Text('多彩边框'),
),
),
),
new Center(
child: new Material(
color: Colors.blueAccent,
shape: new CircleBorder(
side: new BorderSide(
color: Colors.yellow,
width: 10.0,
)
),
child: new Container(
padding: EdgeInsets.all(50.0),
child: new Text('圆形边框'),
),
),
),
new Center(
child: new Material(
color: Colors.blueAccent,
shape: new RoundedRectangleBorder(
side: new BorderSide(
color: Colors.purpleAccent,
width: 5.0,
),
borderRadius:new BorderRadius.circular(20.0), //如果[borderRadius]被指定,那么[type]属性不能是 [MaterialType.circle]
),
child: new Container(
padding: EdgeInsets.all(30.0),
child: new Text('圆角矩形'),
),
),
),
new Center(
child: new Material(
color: Colors.purpleAccent,
elevation: 10.0,
shadowColor: Colors.yellow,
shape: new StadiumBorder(
side: new BorderSide(
color: Colors.brown,
width: 5.0,
)
),
child: new Container(
padding: EdgeInsets.all(30.0),
child: new Text('体育场形状'),
),
),
)
],
)
);
}
}

Flutter Widget GridView

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :