Skip to content

Commit 0630d20

Browse files
rutvik110rutvik110
committed
added pictures stack, added colors input to striper shaders and a stripershaderbuilder
1 parent 7b9c7bd commit 0630d20

File tree

7 files changed

+494
-6
lines changed

7 files changed

+494
-6
lines changed

‎lib/flutter_design_challenges/images_stacker/images_stacker.dart‎

Lines changed: 372 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,372 @@
1+
import 'dart:math' as math;
2+
3+
import 'package:flame/extensions.dart';
4+
import 'package:flutter/material.dart';
5+
import 'package:flutter_animations/flutter_shaders/stripes_shader/stripes_shader_builder.dart';
6+
7+
class PicturesStack extends StatefulWidget {
8+
const PicturesStack({Key? key}) : super(key: key);
9+
10+
@override
11+
State<PicturesStack> createState() => _ImagesStackerState();
12+
}
13+
14+
class _ImagesStackerState extends State<PicturesStack> {
15+
final key = GlobalKey<AnimatedListState>();
16+
17+
List<Pokemon> items = [
18+
Pokemon(
19+
assetImage: "assets/images/pokemons/5.png",
20+
color1: Colors.red.toColorVector(),
21+
color2: Colors.blue.toColorVector(),
22+
),
23+
Pokemon(
24+
assetImage: "assets/images/pokemons/1.png",
25+
color1: Colors.green.toColorVector(),
26+
color2: Colors.yellow.toColorVector(),
27+
),
28+
Pokemon(
29+
assetImage: "assets/images/pokemons/2.png",
30+
color1: Colors.orange.toColorVector(),
31+
color2: Colors.pink.toColorVector(),
32+
),
33+
Pokemon(
34+
assetImage: "assets/images/pokemons/3.png",
35+
color1: Colors.purple.toColorVector(),
36+
color2: Colors.pink.toColorVector(),
37+
),
38+
Pokemon(
39+
assetImage: "assets/images/pokemons/4.png",
40+
color1: Colors.cyan.toColorVector(),
41+
color2: Colors.lightBlue.toColorVector(),
42+
),
43+
];
44+
final ScrollController scrollController = ScrollController();
45+
46+
@override
47+
Widget build(BuildContext context) {
48+
return Scaffold(
49+
backgroundColor: Colors.black,
50+
body: StripesShaderBuilder(
51+
direction: 1.0,
52+
builder: ((context, shader, uTime) {
53+
return Column(
54+
mainAxisAlignment: MainAxisAlignment.center,
55+
children: [
56+
Padding(
57+
padding: const EdgeInsets.all(20.0),
58+
child: Container(
59+
clipBehavior: Clip.hardEdge,
60+
decoration: const BoxDecoration(
61+
color: Colors.black,
62+
),
63+
padding: const EdgeInsets.symmetric(horizontal: 20),
64+
child: SizedBox(
65+
height: 400,
66+
child: AnimatedList(
67+
key: key,
68+
shrinkWrap: true,
69+
padding: const EdgeInsets.symmetric(
70+
horizontal: 20,
71+
),
72+
controller: scrollController,
73+
scrollDirection: Axis.horizontal,
74+
initialItemCount: items.length,
75+
itemBuilder: (context, index, animation) {
76+
return AnimatedBuilder(
77+
animation: animation,
78+
builder: (context, child) {
79+
return Align(
80+
widthFactor: math.max(animation.value, 0.0),
81+
child: SlideTransition(
82+
position: animation
83+
.drive(
84+
CurveTween(curve: Curves.decelerate))
85+
.drive(
86+
Tween<Offset>(
87+
begin: const Offset(1, 0),
88+
end: Offset.zero,
89+
),
90+
),
91+
child: RotationTransition(
92+
turns: animation.drive(
93+
Tween<double>(
94+
begin: (math.pi / 180) * 22.5,
95+
end: 0,
96+
),
97+
),
98+
child: child,
99+
),
100+
),
101+
);
102+
},
103+
child: Align(
104+
widthFactor: 0.7,
105+
child: DecoratedBox(
106+
decoration: BoxDecoration(
107+
borderRadius: BorderRadius.circular(140),
108+
boxShadow: const [
109+
BoxShadow(
110+
color: Color.fromARGB(202, 234, 234, 234),
111+
blurRadius: 20,
112+
spreadRadius: 0.1,
113+
),
114+
],
115+
),
116+
child: ClipOval(
117+
key: items[index].key,
118+
child: Stack(
119+
children: [
120+
ShaderMask(
121+
shaderCallback: (bounds) {
122+
return shader.shader(
123+
resolution:
124+
MediaQuery.of(context).size,
125+
uTime: uTime,
126+
tiles: 4,
127+
speed: uTime / 10,
128+
direction: 0.85,
129+
warpScale: 1.0,
130+
warpTiling: 0.6,
131+
color1: items[index].color1,
132+
color2: items[index].color2,
133+
);
134+
},
135+
child: DecoratedBox(
136+
decoration: BoxDecoration(
137+
border: Border.all(
138+
width: 30,
139+
color: Colors.white,
140+
),
141+
// image: DecorationImage(
142+
// image: AssetImage(
143+
// items[index].assetImage,
144+
// ),
145+
// ),
146+
color: Colors.black,
147+
borderRadius: BorderRadius.circular(
148+
70,
149+
),
150+
),
151+
child: const SizedBox(
152+
height: 140,
153+
width: 140,
154+
),
155+
),
156+
),
157+
CircleAvatar(
158+
radius: 70,
159+
backgroundColor: Colors.transparent,
160+
backgroundImage: AssetImage(
161+
items[index].assetImage,
162+
),
163+
),
164+
],
165+
),
166+
),
167+
),
168+
),
169+
);
170+
}),
171+
),
172+
),
173+
),
174+
Row(
175+
mainAxisAlignment: MainAxisAlignment.center,
176+
children: [
177+
ElevatedButton(
178+
onPressed: () {
179+
final index = math.Random()
180+
.nextInt(items.length < 5 ? items.length : 4) +
181+
1;
182+
final item = pokemonstList[index];
183+
setState(() {
184+
items.insert(
185+
index,
186+
item,
187+
);
188+
key.currentState?.insertItem(
189+
index,
190+
);
191+
final double jumpOffset = index * 70;
192+
if (scrollController.position.maxScrollExtent > 0) {
193+
scrollController.animateTo(
194+
jumpOffset,
195+
duration: const Duration(milliseconds: 300),
196+
curve: Curves.decelerate,
197+
);
198+
}
199+
});
200+
},
201+
child: const Text("Add"),
202+
),
203+
const SizedBox(
204+
width: 70,
205+
),
206+
ElevatedButton(
207+
onPressed: () {
208+
setState(() {
209+
final index = math.Random().nextInt(items.length - 1);
210+
final removedItem = items.removeAt(index);
211+
key.currentState?.removeItem(
212+
index,
213+
duration: const Duration(milliseconds: 300),
214+
(context, animation) {
215+
return AnimatedBuilder(
216+
animation: animation,
217+
builder: (context, child) {
218+
return Align(
219+
widthFactor: math.max(animation.value, 0.0),
220+
child: SlideTransition(
221+
position: animation.drive(
222+
Tween<Offset>(
223+
begin: const Offset(0, -1),
224+
end: Offset.zero,
225+
),
226+
),
227+
child: FadeTransition(
228+
opacity: animation,
229+
child: child,
230+
),
231+
),
232+
);
233+
},
234+
child: Align(
235+
widthFactor: 0.7,
236+
child: DecoratedBox(
237+
decoration: BoxDecoration(
238+
borderRadius: BorderRadius.circular(140),
239+
boxShadow: const [
240+
BoxShadow(
241+
color:
242+
Color.fromARGB(202, 234, 234, 234),
243+
blurRadius: 20,
244+
spreadRadius: 0.1,
245+
),
246+
],
247+
),
248+
child: ClipOval(
249+
key: removedItem.key,
250+
child: Stack(
251+
children: [
252+
ShaderMask(
253+
shaderCallback: (bounds) {
254+
return shader.shader(
255+
resolution:
256+
MediaQuery.of(context).size,
257+
uTime: uTime,
258+
tiles: 4,
259+
speed: uTime / 10,
260+
direction: 0.85,
261+
warpScale: 1.0,
262+
warpTiling: 0.6,
263+
color1: removedItem.color1,
264+
color2: removedItem.color2,
265+
);
266+
},
267+
child: DecoratedBox(
268+
decoration: BoxDecoration(
269+
border: Border.all(
270+
width: 30,
271+
color: Colors.white,
272+
),
273+
// image: DecorationImage(
274+
// image: AssetImage(
275+
// items[index].assetImage,
276+
// ),
277+
// ),
278+
color: Colors.black,
279+
borderRadius:
280+
BorderRadius.circular(
281+
70,
282+
),
283+
),
284+
child: const SizedBox(
285+
height: 140,
286+
width: 140,
287+
),
288+
),
289+
),
290+
CircleAvatar(
291+
radius: 70,
292+
backgroundColor: Colors.transparent,
293+
backgroundImage: AssetImage(
294+
removedItem.assetImage,
295+
),
296+
),
297+
],
298+
),
299+
),
300+
),
301+
),
302+
);
303+
},
304+
);
305+
final double jumpOffset = index * 70;
306+
307+
if (scrollController.position.maxScrollExtent > 0) {
308+
scrollController.animateTo(
309+
jumpOffset,
310+
duration: const Duration(milliseconds: 300),
311+
curve: Curves.decelerate,
312+
);
313+
}
314+
});
315+
},
316+
child: const Text("Remove"),
317+
)
318+
],
319+
),
320+
],
321+
);
322+
}),
323+
),
324+
);
325+
}
326+
}
327+
328+
class Pokemon {
329+
Pokemon({
330+
required this.assetImage,
331+
required this.color1,
332+
required this.color2,
333+
});
334+
final String assetImage;
335+
final Vector3 color1;
336+
final Vector3 color2;
337+
final UniqueKey key = UniqueKey();
338+
}
339+
340+
extension GetColorVector on ColorSwatch<int> {
341+
Vector3 toColorVector() {
342+
return Vector3(red / 256, green / 256, blue / 256);
343+
}
344+
}
345+
346+
List<Pokemon> pokemonstList = List.unmodifiable([
347+
Pokemon(
348+
assetImage: "assets/images/pokemons/5.png",
349+
color1: Colors.red.toColorVector(),
350+
color2: Colors.blue.toColorVector(),
351+
),
352+
Pokemon(
353+
assetImage: "assets/images/pokemons/1.png",
354+
color1: Colors.green.toColorVector(),
355+
color2: Colors.yellow.toColorVector(),
356+
),
357+
Pokemon(
358+
assetImage: "assets/images/pokemons/2.png",
359+
color1: Colors.orange.toColorVector(),
360+
color2: Colors.pink.toColorVector(),
361+
),
362+
Pokemon(
363+
assetImage: "assets/images/pokemons/3.png",
364+
color1: Colors.purple.toColorVector(),
365+
color2: Colors.pink.toColorVector(),
366+
),
367+
Pokemon(
368+
assetImage: "assets/images/pokemons/4.png",
369+
color1: Colors.cyan.toColorVector(),
370+
color2: Colors.lightBlue.toColorVector(),
371+
),
372+
]);

0 commit comments

Comments
 (0)