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
5import 'package:flutter/material.dart';
6
7/// Flutter code sample for [BorderSide.strokeAlign].
8
9void main() => runApp(const StrokeAlignApp());
10
11class 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
20class StrokeAlignExample extends StatefulWidget {
21 const StrokeAlignExample({super.key});
22
23 @override
24 State<StrokeAlignExample> createState() => _StrokeAlignExampleState();
25}
26
27class _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
183class 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

Provided by KDAB

Privacy Policy
Learn more about Flutter for embedded and desktop on industrialflutter.com