1 | // Copyright 2014 The Flutter Authors. All rights reserved. |
2 | // Use of this source code is governed by a BSD-style license that can be |
3 | // found in the LICENSE file. |
4 | |
5 | import 'package:flutter/material.dart'; |
6 | |
7 | /// Flutter code sample for [BorderSide.strokeAlign]. |
8 | |
9 | void main() => runApp(const StrokeAlignApp()); |
10 | |
11 | class StrokeAlignApp extends StatelessWidget { |
12 | const StrokeAlignApp({super.key}); |
13 | |
14 | @override |
15 | Widget build(BuildContext context) { |
16 | return const MaterialApp(home: StrokeAlignExample()); |
17 | } |
18 | } |
19 | |
20 | class StrokeAlignExample extends StatefulWidget { |
21 | const StrokeAlignExample({super.key}); |
22 | |
23 | @override |
24 | State<StrokeAlignExample> createState() => _StrokeAlignExampleState(); |
25 | } |
26 | |
27 | class _StrokeAlignExampleState extends State<StrokeAlignExample> with TickerProviderStateMixin { |
28 | late final AnimationController animation; |
29 | |
30 | @override |
31 | void initState() { |
32 | super.initState(); |
33 | animation = AnimationController(vsync: this, duration: const Duration(seconds: 1)); |
34 | animation.repeat(reverse: true); |
35 | animation.addListener(_markDirty); |
36 | } |
37 | |
38 | @override |
39 | void dispose() { |
40 | animation.dispose(); |
41 | super.dispose(); |
42 | } |
43 | |
44 | void _markDirty() { |
45 | setState(() {}); |
46 | } |
47 | |
48 | static const double borderWidth = 10; |
49 | static const double cornerRadius = 10; |
50 | static const Color borderColor = Color(0x8000b4fc); |
51 | |
52 | @override |
53 | Widget build(BuildContext context) { |
54 | return Material( |
55 | child: Center( |
56 | child: Column( |
57 | mainAxisAlignment: MainAxisAlignment.spaceAround, |
58 | children: <Widget>[ |
59 | BorderedBox( |
60 | shape: StadiumBorder( |
61 | side: BorderSide( |
62 | color: borderColor, |
63 | width: borderWidth, |
64 | strokeAlign: (animation.value * 2) - 1, |
65 | ), |
66 | ), |
67 | ), |
68 | Row( |
69 | mainAxisAlignment: MainAxisAlignment.spaceAround, |
70 | children: <Widget>[ |
71 | BorderedBox( |
72 | shape: CircleBorder( |
73 | side: BorderSide( |
74 | color: borderColor, |
75 | width: borderWidth, |
76 | strokeAlign: (animation.value * 2) - 1, |
77 | ), |
78 | ), |
79 | ), |
80 | BorderedBox( |
81 | shape: OvalBorder( |
82 | side: BorderSide( |
83 | color: borderColor, |
84 | width: borderWidth, |
85 | strokeAlign: (animation.value * 2) - 1, |
86 | ), |
87 | ), |
88 | ), |
89 | ], |
90 | ), |
91 | Row( |
92 | mainAxisAlignment: MainAxisAlignment.spaceAround, |
93 | children: <Widget>[ |
94 | BorderedBox( |
95 | shape: BeveledRectangleBorder( |
96 | side: BorderSide( |
97 | color: borderColor, |
98 | width: borderWidth, |
99 | strokeAlign: (animation.value * 2) - 1, |
100 | ), |
101 | ), |
102 | ), |
103 | BorderedBox( |
104 | shape: BeveledRectangleBorder( |
105 | borderRadius: BorderRadius.circular(cornerRadius), |
106 | side: BorderSide( |
107 | color: borderColor, |
108 | width: borderWidth, |
109 | strokeAlign: (animation.value * 2) - 1, |
110 | ), |
111 | ), |
112 | ), |
113 | ], |
114 | ), |
115 | Row( |
116 | mainAxisAlignment: MainAxisAlignment.spaceAround, |
117 | children: <Widget>[ |
118 | BorderedBox( |
119 | shape: RoundedRectangleBorder( |
120 | side: BorderSide( |
121 | color: borderColor, |
122 | width: borderWidth, |
123 | strokeAlign: (animation.value * 2) - 1, |
124 | ), |
125 | ), |
126 | ), |
127 | BorderedBox( |
128 | shape: RoundedRectangleBorder( |
129 | borderRadius: BorderRadius.circular(cornerRadius), |
130 | side: BorderSide( |
131 | color: borderColor, |
132 | width: borderWidth, |
133 | strokeAlign: (animation.value * 2) - 1, |
134 | ), |
135 | ), |
136 | ), |
137 | ], |
138 | ), |
139 | Row( |
140 | mainAxisAlignment: MainAxisAlignment.spaceAround, |
141 | children: <Widget>[ |
142 | BorderedBox( |
143 | shape: StarBorder( |
144 | side: BorderSide( |
145 | color: borderColor, |
146 | width: borderWidth, |
147 | strokeAlign: (animation.value * 2) - 1, |
148 | ), |
149 | ), |
150 | ), |
151 | BorderedBox( |
152 | shape: StarBorder( |
153 | pointRounding: 1, |
154 | innerRadiusRatio: 0.5, |
155 | points: 8, |
156 | side: BorderSide( |
157 | color: borderColor, |
158 | width: borderWidth, |
159 | strokeAlign: (animation.value * 2) - 1, |
160 | ), |
161 | ), |
162 | ), |
163 | BorderedBox( |
164 | shape: StarBorder.polygon( |
165 | sides: 6, |
166 | pointRounding: 0.5, |
167 | side: BorderSide( |
168 | color: borderColor, |
169 | width: borderWidth, |
170 | strokeAlign: (animation.value * 2) - 1, |
171 | ), |
172 | ), |
173 | ), |
174 | ], |
175 | ), |
176 | ], |
177 | ), |
178 | ), |
179 | ); |
180 | } |
181 | } |
182 | |
183 | class BorderedBox extends StatelessWidget { |
184 | const BorderedBox({super.key, required this.shape}); |
185 | |
186 | final ShapeBorder shape; |
187 | |
188 | @override |
189 | Widget build(BuildContext context) { |
190 | return Container( |
191 | width: 100, |
192 | height: 50, |
193 | decoration: ShapeDecoration(color: const Color(0xff012677), shape: shape), |
194 | ); |
195 | } |
196 | } |
197 | |