Skip to content

Commit f0704fe

Browse files
afgprogrammerafgprogrammer
committed
Add home page
1 parent 361691b commit f0704fe

File tree

2 files changed

+268
-91
lines changed

2 files changed

+268
-91
lines changed

‎lib/main.dart‎

Lines changed: 265 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,290 @@
1+
import 'package:animate_do/animate_do.dart';
12
import 'package:flutter/material.dart';
3+
import 'package:iconsax/iconsax.dart';
24

35
void main() {
4-
runApp(const MyApp());
6+
runApp(const MaterialApp(
7+
home: HomePage(),
8+
debugShowCheckedModeBanner: false,
9+
));
510
}
611

7-
class MyApp extends StatelessWidget {
8-
const MyApp({Key? key}) : super(key: key);
12+
class HomePage extends StatefulWidget {
13+
const HomePage({ Key? key }) : super(key: key);
914

10-
// This widget is the root of your application.
1115
@override
12-
Widget build(BuildContext context) {
13-
return MaterialApp(
14-
title: 'Flutter Demo',
15-
theme: ThemeData(
16-
// This is the theme of your application.
17-
//
18-
// Try running your application with "flutter run". You'll see the
19-
// application has a blue toolbar. Then, without quitting the app, try
20-
// changing the primarySwatch below to Colors.green and then invoke
21-
// "hot reload" (press "r" in the console where you ran "flutter run",
22-
// or simply save your changes to "hot reload" in a Flutter IDE).
23-
// Notice that the counter didn't reset back to zero; the application
24-
// is not restarted.
25-
primarySwatch: Colors.blue,
26-
),
27-
home: const MyHomePage(title: 'Flutter Demo Home Page'),
28-
);
29-
}
16+
_HomePageState createState() => _HomePageState();
3017
}
3118

32-
class MyHomePage extends StatefulWidget {
33-
const MyHomePage({Key? key, required this.title}) : super(key: key);
19+
class _HomePageState extends State<HomePage> {
20+
late ScrollController _scrollController;
21+
bool _isScrolled = false;
3422

35-
// This widget is the home page of your application. It is stateful, meaning
36-
// that it has a State object (defined below) that contains fields that affect
37-
// how it looks.
23+
List<dynamic> _services = [
24+
['Transfer', Iconsax.export_1, Colors.blue],
25+
['Top-up', Iconsax.import, Colors.pink],
26+
['Bill', Iconsax.wallet_3, Colors.orange],
27+
['More', Iconsax.more, Colors.green],
28+
];
3829

39-
// This class is the configuration for the state. It holds the values (in this
40-
// case the title) provided by the parent (in this case the App widget) and
41-
// used by the build method of the State. Fields in a Widget subclass are
42-
// always marked "final".
43-
44-
final String title;
30+
List<dynamic> _transactions = [
31+
['Amazon', 'https://img.icons8.com/color/2x/amazon.png', '6:25pm', '\$8.90'],
32+
['Cash from ATM', 'https://img.icons8.com/external-kiranshastry-lineal-color-kiranshastry/2x/external-atm-banking-and-finance-kiranshastry-lineal-color-kiranshastry.png', '5:50pm', '\$200.00'],
33+
['Netflix', 'https://img.icons8.com/color-glass/2x/netflix.png', '2:22pm', '\$13.99'],
34+
['Apple Store', 'https://img.icons8.com/color/2x/mac-os--v2.gif', '6:25pm', '\$4.99'],
35+
['Cash from ATM', 'https://img.icons8.com/external-kiranshastry-lineal-color-kiranshastry/2x/external-atm-banking-and-finance-kiranshastry-lineal-color-kiranshastry.png', '5:50pm', '\$200.00'],
36+
['Netflix', 'https://img.icons8.com/color-glass/2x/netflix.png', '2:22pm', '\$13.99']
37+
];
4538

4639
@override
47-
State<MyHomePage> createState() => _MyHomePageState();
48-
}
40+
void initState() {
41+
_scrollController = ScrollController();
42+
_scrollController.addListener(_listenToScrollChange);
4943

50-
class _MyHomePageState extends State<MyHomePage> {
51-
int _counter = 0;
44+
super.initState();
45+
}
5246

53-
void _incrementCounter() {
54-
setState(() {
55-
// This call to setState tells the Flutter framework that something has
56-
// changed in this State, which causes it to rerun the build method below
57-
// so that the display can reflect the updated values. If we changed
58-
// _counter without calling setState(), then the build method would not be
59-
// called again, and so nothing would appear to happen.
60-
_counter++;
61-
});
47+
void _listenToScrollChange() {
48+
if (_scrollController.offset >= 100.0) {
49+
setState(() {
50+
_isScrolled = true;
51+
});
52+
} else {
53+
setState(() {
54+
_isScrolled = false;
55+
});
56+
}
6257
}
6358

6459
@override
6560
Widget build(BuildContext context) {
66-
// This method is rerun every time setState is called, for instance as done
67-
// by the _incrementCounter method above.
68-
//
69-
// The Flutter framework has been optimized to make rerunning build methods
70-
// fast, so that you can just rebuild anything that needs updating rather
71-
// than having to individually change instances of widgets.
7261
return Scaffold(
73-
appBar: AppBar(
74-
// Here we take the value from the MyHomePage object that was created by
75-
// the App.build method, and use it to set our appbar title.
76-
title: Text(widget.title),
77-
),
78-
body: Center(
79-
// Center is a layout widget. It takes a single child and positions it
80-
// in the middle of the parent.
81-
child: Column(
82-
// Column is also a layout widget. It takes a list of children and
83-
// arranges them vertically. By default, it sizes itself to fit its
84-
// children horizontally, and tries to be as tall as its parent.
85-
//
86-
// Invoke "debug painting" (press "p" in the console, choose the
87-
// "Toggle Debug Paint" action from the Flutter Inspector in Android
88-
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
89-
// to see the wireframe for each widget.
90-
//
91-
// Column has various properties to control how it sizes itself and
92-
// how it positions its children. Here we use mainAxisAlignment to
93-
// center the children vertically; the main axis here is the vertical
94-
// axis because Columns are vertical (the cross axis would be
95-
// horizontal).
96-
mainAxisAlignment: MainAxisAlignment.center,
97-
children: <Widget>[
98-
const Text(
99-
'You have pushed the button this many times:',
62+
backgroundColor: Colors.grey.shade100,
63+
body: CustomScrollView(
64+
controller: _scrollController,
65+
slivers: [
66+
SliverAppBar(
67+
expandedHeight: 250.0,
68+
elevation: 0,
69+
pinned: true,
70+
stretch: true,
71+
toolbarHeight: 80,
72+
backgroundColor: Colors.white,
73+
leading: IconButton(
74+
icon: Icon(Iconsax.menu, color: Colors.grey.shade700),
75+
onPressed: () {},
76+
),
77+
actions: [
78+
IconButton(
79+
icon: Icon(Iconsax.notification, color: Colors.grey.shade700),
80+
onPressed: () {},
81+
),
82+
IconButton(
83+
icon: Icon(Iconsax.more, color: Colors.grey.shade700),
84+
onPressed: () {},
85+
),
86+
],
87+
shape: RoundedRectangleBorder(
88+
borderRadius: BorderRadius.only(
89+
bottomLeft: Radius.circular(40),
90+
bottomRight: Radius.circular(40),
91+
),
92+
),
93+
centerTitle: true,
94+
title: AnimatedOpacity(
95+
opacity: _isScrolled ? 1.0 : 0.0,
96+
duration: const Duration(milliseconds: 500),
97+
child: Column(
98+
children: [
99+
Text(
100+
'\$ 1,840.00',
101+
style: TextStyle(
102+
color: Colors.black,
103+
fontSize: 22,
104+
fontWeight: FontWeight.bold,
105+
),
106+
),
107+
SizedBox(height: 20,),
108+
Container(
109+
width: 30,
110+
height: 4,
111+
decoration: BoxDecoration(
112+
color: Colors.grey.shade800,
113+
borderRadius: BorderRadius.circular(10),
114+
),
115+
),
116+
],
117+
),
118+
),
119+
flexibleSpace: FlexibleSpaceBar(
120+
collapseMode: CollapseMode.pin,
121+
titlePadding: const EdgeInsets.only(left: 20, right: 20),
122+
title: AnimatedOpacity(
123+
duration: const Duration(milliseconds: 500),
124+
opacity: _isScrolled ? 0.0 : 1.0,
125+
child: Column(
126+
mainAxisAlignment: MainAxisAlignment.end,
127+
children: [
128+
FadeIn(
129+
duration: const Duration(milliseconds: 500),
130+
child: Row(
131+
mainAxisAlignment: MainAxisAlignment.center,
132+
crossAxisAlignment: CrossAxisAlignment.start,
133+
children: [
134+
Text('\$', style: TextStyle(color: Colors.grey.shade800, fontSize: 22),),
135+
SizedBox(width: 3,),
136+
Text('1,840.00',
137+
style: TextStyle(
138+
fontSize: 28,
139+
fontWeight: FontWeight.bold,
140+
color: Colors.black,
141+
),
142+
),
143+
],
144+
),
145+
),
146+
SizedBox(height: 10,),
147+
FadeIn(
148+
duration: const Duration(milliseconds: 500),
149+
child: MaterialButton(
150+
height: 30,
151+
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
152+
onPressed: () {},
153+
child: Text('Add Money', style: TextStyle(color: Colors.black, fontSize: 10),),
154+
color: Colors.transparent,
155+
elevation: 0,
156+
shape: RoundedRectangleBorder(
157+
side: BorderSide(color: Colors.grey.shade300, width: 1),
158+
borderRadius: BorderRadius.circular(30),
159+
),
160+
),
161+
),
162+
SizedBox(height: 10,),
163+
Container(
164+
width: 30,
165+
height: 3,
166+
decoration: BoxDecoration(
167+
color: Colors.grey.shade800,
168+
borderRadius: BorderRadius.circular(10),
169+
),
170+
),
171+
SizedBox(height: 8,),
172+
],
173+
),
174+
),
100175
),
101-
Text(
102-
'$_counter',
103-
style: Theme.of(context).textTheme.headline4,
176+
),
177+
SliverList(
178+
delegate: SliverChildListDelegate([
179+
SizedBox(height: 20,),
180+
Container(
181+
padding: EdgeInsets.only(left: 20, top: 20),
182+
height: 115,
183+
width: double.infinity,
184+
child: ListView.builder(
185+
scrollDirection: Axis.horizontal,
186+
itemCount: _services.length,
187+
itemBuilder: (context, index) {
188+
return FadeInDown(
189+
duration: Duration(milliseconds: (index + 1) * 100),
190+
child: AspectRatio(
191+
aspectRatio: 1,
192+
child: Container(
193+
child: Column(
194+
children: [
195+
Container(
196+
width: 60,
197+
height: 60,
198+
decoration: BoxDecoration(
199+
color: Colors.grey.shade900,
200+
borderRadius: BorderRadius.circular(20),
201+
),
202+
child: Center(
203+
child: Icon(_services[index][1], color: Colors.white, size: 25,),
204+
),
205+
),
206+
SizedBox(height: 10,),
207+
Text(_services[index][0], style: TextStyle(color: Colors.grey.shade800, fontSize: 12),),
208+
],
209+
),
210+
),
211+
),
212+
);
213+
},
214+
),
215+
),
216+
])
217+
),
218+
SliverFillRemaining(
219+
child: Container(
220+
padding: EdgeInsets.only(left: 20, right: 20, top: 30),
221+
child: Column(
222+
children: [
223+
FadeInDown(
224+
duration: Duration(milliseconds: 500),
225+
child: Row(
226+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
227+
children: [
228+
Text('Today', style: TextStyle(color: Colors.grey.shade800, fontSize: 14, fontWeight: FontWeight.w600),),
229+
SizedBox(width: 10,),
230+
Text('\$ 1,840.00', style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w700,)),
231+
]
232+
),
233+
),
234+
Expanded(
235+
child: ListView.builder(
236+
padding: EdgeInsets.only(top: 20),
237+
physics: NeverScrollableScrollPhysics(),
238+
itemCount: _transactions.length,
239+
itemBuilder: (context, index) {
240+
return FadeInDown(
241+
duration: Duration(milliseconds: 500),
242+
child: Container(
243+
margin: EdgeInsets.only(bottom: 10),
244+
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
245+
decoration: BoxDecoration(
246+
color: Colors.white,
247+
borderRadius: BorderRadius.circular(15),
248+
boxShadow: [
249+
BoxShadow(
250+
color: Colors.grey.shade200,
251+
blurRadius: 5,
252+
spreadRadius: 1,
253+
offset: Offset(0, 6),
254+
),
255+
],
256+
),
257+
child: Row(
258+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
259+
children: [
260+
Row(
261+
children: [
262+
Image.network(_transactions[index][1], width: 50, height: 50,),
263+
SizedBox(width: 15,),
264+
Column(
265+
crossAxisAlignment: CrossAxisAlignment.start,
266+
children: [
267+
Text(_transactions[index][0], style: TextStyle(color: Colors.grey.shade900, fontWeight: FontWeight.w500, fontSize: 14),),
268+
SizedBox(height: 5,),
269+
Text(_transactions[index][2], style: TextStyle(color: Colors.grey.shade500, fontSize: 12),),
270+
],
271+
),
272+
],
273+
),
274+
Text(_transactions[index][3], style: TextStyle(color: Colors.grey.shade800, fontSize: 16, fontWeight: FontWeight.w700),),
275+
],
276+
),
277+
),
278+
);
279+
},
280+
),
281+
)
282+
],
283+
),
104284
),
105-
],
106-
),
107-
),
108-
floatingActionButton: FloatingActionButton(
109-
onPressed: _incrementCounter,
110-
tooltip: 'Increment',
111-
child: const Icon(Icons.add),
112-
), // This trailing comma makes auto-formatting nicer for build methods.
285+
)
286+
]
287+
)
113288
);
114289
}
115290
}

‎pubspec.yaml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ dependencies:
3434
# The following adds the Cupertino Icons font to your application.
3535
# Use with the CupertinoIcons class for iOS style icons.
3636
cupertino_icons: ^1.0.2
37-
37+
iconsax: ^0.0.8
38+
animate_do: ^2.0.0
39+
3840
dev_dependencies:
3941
flutter_test:
4042
sdk: flutter

0 commit comments

Comments
 (0)