Skip to content

Commit 76be12a

Browse files
nb312nb312
authored
Merge pull request FlutterOpen#47 from FlutterOpen/dev
Add the customPaint,clip collection that you can custom your own shape.
2 parents 388325b + 5f94c1a commit 76be12a

File tree

7 files changed

+201
-2
lines changed

7 files changed

+201
-2
lines changed

‎lib/const/page_item_const.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,4 +287,9 @@ const PAGE_ITEMS = [
287287
"img": PageImage.FLUTTER_OPEN,
288288
"click": PageName.ASYNC_STREAM_BUILDER,
289289
},
290+
{
291+
"title": PageName.PAINT_OPACITY,
292+
"img": PageImage.FLUTTER_OPEN,
293+
"click": PageName.PAINT_OPACITY,
294+
},
290295
];

‎lib/const/page_name_const.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,5 @@ class PageName {
6363
static const INTER_NAV = "Navigator";
6464
static const ASYNC_FUTURE = "FutureBuilder";
6565
static const ASYNC_STREAM_BUILDER = "StreamBuilder";
66+
static const PAINT_OPACITY = "Opacity";
6667
}

‎lib/main.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ class FlutterOpenApp extends StatelessWidget {
7676
PageName.INTER_NAV: (context) => NavigatorPage(),
7777
PageName.ASYNC_FUTURE: (context) => FuturePage(),
7878
PageName.ASYNC_STREAM_BUILDER: (context) => StreamBuilderPage(),
79+
PageName.PAINT_OPACITY: (context) => PaintingPage(),
7980
},
8081
);
8182
}

‎lib/page/_page.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,4 @@ export 'assets/_assets.dart';
3838
export 'anim/_anim.dart';
3939
export 'interation/_interaction.dart';
4040
export 'async/_async.dart';
41+
export 'painting/_painting.dart';

‎lib/page/interation/NavigatorPage.dart‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import 'package:flutter_widgets/const/_const.dart';
88
import 'NavPage.dart';
99

1010
class NavigatorPage extends StatefulWidget {
11-
Key _key = GlobalKey<_NavigatorState>();
12-
1311
@override
1412
_NavigatorState createState() => _NavigatorState();
1513
}

‎lib/page/painting/PaintingPage.dart‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
///
2+
/// Created by NieBin on 2019/6/15
3+
/// Github: https://github.com/nb312
4+
/// Email: [email protected]
5+
///
6+
import "package:flutter/material.dart";
7+
import 'package:flutter_widgets/const/_const.dart';
8+
import 'dart:math';
9+
10+
class PaintingPage extends StatefulWidget {
11+
@override
12+
_OpacityState createState() => _OpacityState();
13+
}
14+
15+
class _OpacityState extends State<PaintingPage> {
16+
Widget _opacity() => Container(
17+
constraints: BoxConstraints.expand(height: 100),
18+
child: Opacity(
19+
opacity: 0.7,
20+
child: Text(
21+
"Opacity",
22+
style: TextStyle(color: TEXT_BLACK),
23+
),
24+
),
25+
color: RED_LIGHT,
26+
);
27+
28+
Widget _transform() => Container(
29+
constraints: BoxConstraints.expand(height: 100),
30+
child: Transform.rotate(
31+
angle: pi / 2,
32+
child: Center(
33+
child: Text("Transform"),
34+
),
35+
),
36+
color: BLUE_LIGHT,
37+
);
38+
39+
Widget _decorated() => Container(
40+
constraints: BoxConstraints.expand(height: 100),
41+
child: DecoratedBox(
42+
position: DecorationPosition.foreground,
43+
decoration: ShapeDecoration(
44+
shape: StadiumBorder(
45+
side: BorderSide(color: TEXT_BLACK, width: 10),
46+
),
47+
),
48+
child: Container(
49+
color: PURPLE,
50+
child: Center(
51+
child: Text("DecoratedBox"),
52+
),
53+
)));
54+
55+
Widget _fraction() => Container(
56+
constraints: BoxConstraints.expand(height: 100),
57+
child: FractionalTranslation(
58+
translation: Offset(0.3, 0.1),
59+
child: Container(
60+
color: BLUE_LIGHT,
61+
),
62+
),
63+
);
64+
65+
Widget _rotation() => Container(
66+
constraints: BoxConstraints.expand(height: 100),
67+
child: RotatedBox(
68+
quarterTurns: 3,
69+
child: Container(
70+
color: GREEN,
71+
child: Center(
72+
child: Text("RotatedBox"),
73+
),
74+
),
75+
),
76+
);
77+
78+
Widget _clipOval() => Container(
79+
constraints: BoxConstraints.expand(height: 100),
80+
child: ClipOval(
81+
clipper: MyClipper(),
82+
child: Container(
83+
color: RED_LIGHT,
84+
),
85+
),
86+
);
87+
88+
Widget _clipPath() => Container(
89+
constraints: BoxConstraints.expand(height: 100),
90+
child: ClipPath(
91+
clipper: MPathClipper(),
92+
child: Container(color: PURPLE),
93+
),
94+
);
95+
96+
Widget _clipRect() => Container(
97+
constraints: BoxConstraints.expand(height: 100),
98+
child: ClipRect(
99+
clipper: MyClipper(),
100+
child: Container(
101+
color: BLUE_DEEP,
102+
),
103+
),
104+
);
105+
106+
Widget _custom() => Container(
107+
constraints: BoxConstraints.expand(height: 200),
108+
child: CustomPaint(
109+
painter: MCustomPainter(),
110+
child: Center(
111+
child: Text("CustomPaint"),
112+
),
113+
),
114+
);
115+
116+
@override
117+
Widget build(BuildContext context) {
118+
return Scaffold(
119+
appBar: AppBar(
120+
title: Text("Hello world"),
121+
),
122+
body: SingleChildScrollView(
123+
child: Column(
124+
children: <Widget>[
125+
_opacity(),
126+
_transform(),
127+
_decorated(),
128+
_fraction(),
129+
_rotation(),
130+
_clipOval(),
131+
_clipPath(),
132+
_clipRect(),
133+
_custom(),
134+
],
135+
),
136+
),
137+
);
138+
}
139+
}
140+
141+
class MCustomPainter extends CustomPainter {
142+
@override
143+
void paint(Canvas canvas, Size size) {
144+
canvas.drawCircle(
145+
Offset(size.width / 2, size.height / 2),
146+
100,
147+
Paint()
148+
..color = RED_LIGHT
149+
..isAntiAlias = true
150+
..strokeWidth = 10);
151+
}
152+
153+
@override
154+
bool shouldRepaint(CustomPainter oldDelegate) {
155+
return true;
156+
}
157+
}
158+
159+
class MPathClipper extends CustomClipper<Path> {
160+
@override
161+
Path getClip(Size size) {
162+
return Path()
163+
..moveTo(100.0, 50.0)
164+
..addArc(
165+
Rect.fromCenter(
166+
center: Offset(100.0, 50.0), height: 50.0, width: 50.0),
167+
0,
168+
pi / 2);
169+
}
170+
171+
@override
172+
bool shouldReclip(CustomClipper<Path> oldClipper) {
173+
return true;
174+
}
175+
}
176+
177+
class MyClipper extends CustomClipper<Rect> {
178+
@override
179+
Rect getClip(Size size) {
180+
return Rect.fromCenter(
181+
center: Offset(50.0, 50.0), height: 100.0, width: 50.0);
182+
}
183+
184+
@override
185+
bool shouldReclip(CustomClipper<Rect> oldClipper) {
186+
return true;
187+
}
188+
}

‎lib/page/painting/_painting.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
///
2+
/// Created by NieBin on 2019/6/15
3+
/// Github: https://github.com/nb312
4+
/// Email: [email protected]
5+
export "PaintingPage.dart";

0 commit comments

Comments
 (0)