Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f0704fe

Browse files
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_MyHomePageStateextendsState<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)

AltStyle によって変換されたページ (->オリジナル) /