1+ import 'package:animate_do/animate_do.dart' ;
2+ import 'package:flutter/material.dart' ;
3+ 4+ class DesignTools extends StatefulWidget {
5+ const DesignTools ({ Key ? key }) : super (key: key);
6+ 7+ @override
8+ _DesignToolsState createState () => _DesignToolsState ();
9+ }
10+ 11+ class _DesignToolsState extends State <DesignTools > {
12+ int selectedTool = 0 ;
13+ 14+ List <dynamic > tools = [
15+ {
16+ 'image' : 'https://cdn-icons-png.flaticon.com/128/732/732244.png' ,
17+ 'selected_image' : 'https://cdn-icons-png.flaticon.com/128/732/732244.png' ,
18+ 'name' : 'Sketch' ,
19+ 'description' : 'The digital design platform.' ,
20+ },
21+ {
22+ 'image' : 'https://img.icons8.com/color/2x/adobe-xd.png' ,
23+ 'selected_image' : 'https://img.icons8.com/color/2x/adobe-xd--v2.gif' ,
24+ 'name' : 'Adobe XD' ,
25+ 'description' : 'Fast & powerful UI/UX design solution.' ,
26+ },
27+ {
28+ 'image' : 'https://img.icons8.com/color/2x/figma.png' ,
29+ 'selected_image' : 'https://img.icons8.com/color/2x/figma--v2.gif' ,
30+ 'name' : 'Figma' ,
31+ 'description' : 'The collaborative interface design tool.' ,
32+ }
33+ ];
34+ 35+ @override
36+ Widget build (BuildContext context) {
37+ return Scaffold (
38+ body: Container (
39+ padding: EdgeInsets .all (20 ),
40+ child: Column (
41+ crossAxisAlignment: CrossAxisAlignment .start,
42+ children: [
43+ SizedBox (height: 50 ,),
44+ FadeInDown (
45+ from: 30 ,
46+ child: Row (
47+ mainAxisAlignment: MainAxisAlignment .spaceBetween,
48+ children: [
49+ Text ("Select a Design Tool" , style: TextStyle (
50+ fontSize: 16 ,
51+ color: Colors .grey.shade800,
52+ fontWeight: FontWeight .bold
53+ ),),
54+ IconButton (
55+ onPressed: () {},
56+ icon: Icon (Icons .close)
57+ )
58+ ],
59+ ),
60+ ),
61+ SizedBox (height: 30 ,),
62+ FadeInDown (
63+ from: 50 ,
64+ child: Text ("What do you want to learn?" , style: TextStyle (
65+ color: Colors .blueGrey.shade400,
66+ fontSize: 20
67+ ),),
68+ ),
69+ SizedBox (height: 20 ,),
70+ Container (
71+ height: MediaQuery .of (context).size.height * 0.5 ,
72+ child: ListView .builder (
73+ itemCount: tools.length,
74+ itemBuilder: (context, index) {
75+ return GestureDetector (
76+ onTap: () {
77+ setState (() {
78+ selectedTool = index;
79+ });
80+ },
81+ child: FadeInUp (
82+ delay: Duration (milliseconds: index * 100 ),
83+ child: AnimatedContainer (
84+ padding: EdgeInsets .symmetric (horizontal: 20 , vertical: 10 ),
85+ margin: EdgeInsets .only (bottom: 20 ),
86+ duration: Duration (milliseconds: 500 ),
87+ decoration: BoxDecoration (
88+ color: Colors .white,
89+ borderRadius: BorderRadius .circular (8 ),
90+ border: Border .all (
91+ color: selectedTool == index ? Colors .blue : Colors .white.withOpacity (0 ),
92+ width: 2
93+ ),
94+ boxShadow: [
95+ selectedTool == index ?
96+ BoxShadow (
97+ color: Colors .blue.shade100,
98+ offset: Offset (0 , 3 ),
99+ blurRadius: 10
100+ ) : BoxShadow (
101+ color: Colors .grey.shade200,
102+ offset: Offset (0 , 3 ),
103+ blurRadius: 10
104+ )
105+ ]
106+ ),
107+ child: Row (
108+ children: [
109+ selectedTool == index ?
110+ Image .network (tools[index]['selected_image' ], width: 50 ,) :
111+ Image .network (tools[index]['image' ], width: 50 ,),
112+ SizedBox (width: 20 ,),
113+ Expanded (
114+ child: Column (
115+ crossAxisAlignment: CrossAxisAlignment .start,
116+ children: [
117+ Text (tools[index]['name' ], style: TextStyle (
118+ color: Colors .grey.shade800,
119+ fontSize: 16 ,
120+ fontWeight: FontWeight .bold
121+ ),),
122+ Text (tools[index]['description' ], style: TextStyle (
123+ color: Colors .grey.shade600,
124+ fontSize: 14 ,
125+ ),)
126+ ],
127+ ),
128+ ),
129+ Icon (Icons .check_circle, color: selectedTool == index ? Colors .blue : Colors .white,)
130+ ],
131+ ),
132+ ),
133+ ),
134+ );
135+ },
136+ ),
137+ )
138+ ],
139+ ),
140+ )
141+ );
142+ }
143+ }
0 commit comments