Skip to content

Commit 6572ddc

Browse files
rayliverifiedrayliverified
committed
Create Example App
*Create example app with loading indicators.
1 parent e76e50e commit 6572ddc

File tree

1 file changed

+162
-42
lines changed

1 file changed

+162
-42
lines changed

‎example/lib/main.dart

Lines changed: 162 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,183 @@
1+
import 'dart:ui';
2+
13
import 'package:flutter/cupertino.dart';
24
import 'package:flutter/material.dart';
5+
import 'package:flutter/rendering.dart';
6+
import 'package:loading_gifs/loading_gifs.dart';
37

4-
void main() {
5-
runApp(MyApp());
6-
}
8+
void main() => runApp(MyApp());
79

810
class MyApp extends StatelessWidget {
911
@override
1012
Widget build(BuildContext context) {
11-
return MaterialApp(
13+
return CupertinoApp(
1214
title: 'Loading GIFS',
13-
home: MyHomePage(),
15+
home: CupertinoPageScaffold(
16+
child: Material(
17+
child: CustomScrollView(
18+
slivers: <Widget>[
19+
CupertinoSliverNavigationBar(
20+
largeTitle: Text(
21+
"Loading GIFs",
22+
style: TextStyle(color: Color(0xFF1C1C1E)),
23+
),
24+
backgroundColor: Colors.transparent,
25+
border: Border.all(style: BorderStyle.none),
26+
automaticallyImplyLeading: false,
27+
),
28+
SliverList(
29+
delegate: SliverChildListDelegate.fixed(<Widget>[
30+
subHeaderText("Cupertino", subtitle: "iOS"),
31+
SingleChildScrollView(
32+
scrollDirection: Axis.horizontal,
33+
child: Padding(
34+
padding: EdgeInsets.fromLTRB(6, 0, 6, 0),
35+
child: Row(
36+
children: <Widget>[
37+
for (double i = 1; i <= 10; i++)
38+
ShowcaseCard(
39+
child: Image.asset(cupertinoActivityIndicator,
40+
scale: i),
41+
label: "Size ${i.round()}",
42+
),
43+
],
44+
),
45+
),
46+
),
47+
subHeaderText("Material", subtitle: "Android"),
48+
SingleChildScrollView(
49+
scrollDirection: Axis.horizontal,
50+
child: Padding(
51+
padding: EdgeInsets.fromLTRB(6, 0, 6, 8),
52+
child: Row(
53+
children: <Widget>[
54+
for (double i = 1; i <= 10; i++)
55+
ShowcaseCard(
56+
child: Image.asset(circularProgressIndicator,
57+
scale: i),
58+
label: "Size ${i.round()}",
59+
),
60+
],
61+
),
62+
),
63+
),
64+
]),
65+
),
66+
],
67+
),
68+
)),
69+
debugShowCheckedModeBanner: false,
1470
);
1571
}
1672
}
1773

18-
class MyHomePage extends StatefulWidget {
19-
MyHomePage({Key key}) : super(key: key);
20-
21-
@override
22-
_MyHomePageState createState() => _MyHomePageState();
74+
Widget subHeaderText(String title, {String subtitle}) {
75+
return Padding(
76+
padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
77+
child: Column(
78+
crossAxisAlignment: CrossAxisAlignment.start,
79+
children: <Widget>[
80+
if (subtitle != null)
81+
Text(
82+
subtitle.toUpperCase(),
83+
style: TextStyle(
84+
color: Color(0xFF8E8E93),
85+
fontSize: 12,
86+
fontWeight: FontWeight.bold),
87+
),
88+
Text(
89+
title,
90+
style: TextStyle(
91+
color: Color(0xFF3A3A3C),
92+
fontWeight: FontWeight.bold,
93+
fontSize: 24),
94+
),
95+
],
96+
),
97+
);
2398
}
2499

25-
class _MyHomePageState extends State<MyHomePage> {
100+
class ShowcaseCard extends StatelessWidget {
101+
final Widget child;
102+
final double width;
103+
final String caption;
104+
final String label;
105+
106+
const ShowcaseCard(
107+
{Key key,
108+
@required this.child,
109+
this.width = 200,
110+
this.caption,
111+
this.label})
112+
: super(key: key);
113+
26114
@override
27115
Widget build(BuildContext context) {
28-
double screenWidth = MediaQuery.of(context).size.width;
29-
return Scaffold(
30-
appBar: AppBar(
31-
title: Text(
32-
"Loading GIFs",
33-
style: TextStyle(color: Colors.black),
34-
),
35-
centerTitle: true,
36-
backgroundColor: Colors.white,
37-
),
38-
body: SingleChildScrollView(
39-
child: Column(
40-
children: <Widget>[
41-
Padding(
42-
padding: const EdgeInsets.all(16),
43-
child: Container(
44-
width: screenWidth - 32,
45-
height: screenWidth - 32,
46-
child: FittedBox(child: CupertinoActivityIndicator()),
47-
),
116+
return Column(
117+
mainAxisSize: MainAxisSize.min,
118+
mainAxisAlignment: MainAxisAlignment.center,
119+
children: <Widget>[
120+
if (label != null)
121+
Container(
122+
width: width,
123+
margin: EdgeInsets.only(bottom: 4),
124+
child: Align(
125+
alignment: Alignment.centerLeft,
126+
child: Text(
127+
label,
128+
style: TextStyle(
129+
fontSize: 14,
130+
color: Color(0xFF3A3A3C),
131+
fontWeight: FontWeight.bold),
48132
),
49-
Padding(
50-
padding: const EdgeInsets.all(16),
51-
child: Container(
52-
width: screenWidth - 32,
53-
height: screenWidth - 32,
54-
child: FittedBox(
55-
child: CircularProgressIndicator(),
133+
),
134+
),
135+
Card(
136+
margin: EdgeInsets.fromLTRB(12, 4, 12, 24),
137+
elevation: 12,
138+
shape:
139+
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
140+
shadowColor: Colors.black45,
141+
child: Container(
142+
width: width,
143+
height: width,
144+
child: Stack(
145+
alignment: Alignment.center,
146+
children: <Widget>[
147+
child,
148+
if (caption != null)
149+
Positioned(
150+
left: 0,
151+
bottom: 0,
152+
child: ClipRRect(
153+
borderRadius:
154+
BorderRadius.vertical(bottom: Radius.circular(10)),
155+
child: BackdropFilter(
156+
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
157+
child: Container(
158+
width: width,
159+
height: 30,
160+
color: Colors.white30,
161+
padding: EdgeInsets.symmetric(horizontal: 16),
162+
child: Align(
163+
alignment: Alignment.centerLeft,
164+
child: Text(
165+
caption,
166+
style: TextStyle(
167+
fontSize: 12,
168+
color: Color(0xFF8E8E93),
169+
fontStyle: FontStyle.italic),
170+
),
171+
),
172+
),
173+
),
174+
),
56175
),
57-
),
58-
),
59-
],
176+
],
177+
),
60178
),
61-
));
179+
),
180+
],
181+
);
62182
}
63183
}

0 commit comments

Comments
 (0)