Skip to content

Commit dd86778

Browse files
nkhanh44nkhanh44
authored
Merge pull request #60 from nimblehq/feature/54-ui-skeleton-loading-animation
[#54] [UI] As a logged in user, I can see skeleton loading animation
2 parents 23c3c80 + 5e75bd4 commit dd86778

File tree

5 files changed

+172
-12
lines changed

5 files changed

+172
-12
lines changed

‎lib/screens/home/home_screen.dart‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,63 @@ import 'package:flutter/material.dart';
22
import 'package:survey_flutter/screens/home/home_header_widget.dart';
33
import 'package:survey_flutter/screens/home/home_pages_widget.dart';
44
import 'package:survey_flutter/screens/home/home_page_indicator_widget.dart';
5+
import 'package:survey_flutter/screens/home/home_shimmer_loading.dart';
56

67
const routePathHomeScreen = '/home';
78

8-
class HomeScreen extends StatelessWidget {
9+
class HomeScreen extends StatefulWidget {
910
const HomeScreen({Key? key}) : super(key: key);
1011

12+
@override
13+
State<HomeScreen> createState() => _HomeScreenState();
14+
}
15+
16+
class _HomeScreenState extends State<HomeScreen> {
17+
bool _isLoading = true;
18+
19+
@override
20+
void initState() {
21+
super.initState();
22+
_openHomeWithShimmerLoading();
23+
}
24+
25+
Future<void> _openHomeWithShimmerLoading() async {
26+
await Future.delayed(const Duration(seconds: 1));
27+
setState(() {
28+
_isLoading = false;
29+
});
30+
}
31+
1132
@override
1233
Widget build(BuildContext context) {
13-
return Stack(
14-
children: [
15-
HomePagesWidget(),
16-
const HomeHeaderWidget(),
17-
const Align(
18-
alignment: Alignment.bottomCenter,
19-
child: Padding(
20-
padding: EdgeInsets.only(bottom: 220),
21-
child: HomePageIndicatorWidget(),
34+
return Scaffold(
35+
body: Stack(
36+
children: [
37+
HomePagesWidget(),
38+
const HomeHeaderWidget(),
39+
const Align(
40+
alignment: Alignment.bottomCenter,
41+
child: Padding(
42+
padding: EdgeInsets.only(bottom: 220),
43+
child: HomePageIndicatorWidget(),
44+
),
2245
),
23-
),
24-
],
46+
// TODO: Handle only show shimmer loading after user login
47+
if (_isLoading) _buildShimmerLoading(),
48+
],
49+
),
50+
);
51+
}
52+
53+
Widget _buildShimmerLoading() {
54+
return AnimatedOpacity(
55+
opacity: 1.0,
56+
duration: const Duration(seconds: 1),
57+
curve: Curves.easeInOut,
58+
child: Container(
59+
color: Colors.black,
60+
child: const HomeShimmerLoading(),
61+
),
2562
);
2663
}
2764
}

‎lib/screens/home/home_shimmer_loading.dart‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:shimmer/shimmer.dart';
3+
import 'package:survey_flutter/theme/app_constants.dart';
4+
5+
const double _bottomPadding = 62;
6+
const double _rectangleHeight = 20;
7+
const double _circleSize = 36;
8+
9+
class HomeShimmerLoading extends StatelessWidget {
10+
const HomeShimmerLoading({Key? key}) : super(key: key);
11+
12+
@override
13+
Widget build(BuildContext context) {
14+
final screenWidth = MediaQuery.sizeOf(context).width;
15+
16+
return Shimmer.fromColors(
17+
baseColor: Colors.white.withOpacity(0.12),
18+
highlightColor: Colors.white24,
19+
child: Column(
20+
crossAxisAlignment: CrossAxisAlignment.start,
21+
children: [
22+
_buildTopRows(screenWidth),
23+
const Spacer(),
24+
_buildBottomRows(screenWidth),
25+
],
26+
),
27+
);
28+
}
29+
30+
Widget _buildTopRows(double screenWidth) {
31+
return Row(
32+
children: [
33+
Column(
34+
crossAxisAlignment: CrossAxisAlignment.start,
35+
children: [
36+
_buildShimmerText(
37+
topPadding: 61,
38+
width: screenWidth * 0.3,
39+
),
40+
_buildShimmerText(
41+
topPadding: 10,
42+
width: screenWidth * 0.25,
43+
),
44+
],
45+
),
46+
const Spacer(),
47+
Padding(
48+
padding: const EdgeInsets.only(top: 79, right: Metrics.spacing20),
49+
child: Container(
50+
width: _circleSize,
51+
height: _circleSize,
52+
decoration: const BoxDecoration(
53+
shape: BoxShape.circle,
54+
color: Colors.black,
55+
),
56+
),
57+
),
58+
],
59+
);
60+
}
61+
62+
Widget _buildShimmerText({
63+
double? topPadding,
64+
double? bottomPadding,
65+
double? width,
66+
}) {
67+
return Padding(
68+
padding: EdgeInsets.only(
69+
left: Metrics.spacing20,
70+
top: topPadding ?? 0,
71+
right: Metrics.spacing20,
72+
bottom: bottomPadding ?? 0,
73+
),
74+
child: Container(
75+
decoration: BoxDecoration(
76+
borderRadius: BorderRadius.circular(_rectangleHeight / 2),
77+
color: Colors.black,
78+
),
79+
width: width,
80+
height: _rectangleHeight,
81+
),
82+
);
83+
}
84+
85+
Widget _buildBottomRows(double screenWidth) {
86+
return Column(
87+
crossAxisAlignment: CrossAxisAlignment.start,
88+
children: [
89+
_buildShimmerText(
90+
topPadding: 0,
91+
width: screenWidth * 0.1,
92+
),
93+
_buildShimmerText(
94+
topPadding: Metrics.spacing16,
95+
width: screenWidth * 0.67,
96+
),
97+
_buildShimmerText(
98+
topPadding: Metrics.spacing10,
99+
width: screenWidth * 0.3,
100+
),
101+
_buildShimmerText(
102+
topPadding: Metrics.spacing16,
103+
width: screenWidth * 0.84,
104+
),
105+
_buildShimmerText(
106+
topPadding: Metrics.spacing10,
107+
bottomPadding: _bottomPadding,
108+
width: screenWidth * 0.5,
109+
),
110+
],
111+
);
112+
}
113+
}

‎lib/theme/app_constants.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ class Metrics {
44
static const formFieldHeight = 56.0;
55

66
static const spacing4 = 4.0;
7+
static const spacing10 = 10.0;
78
static const spacing16 = 16.0;
89
static const spacing20 = 20.0;
910
static const spacing28 = 28.0;

‎pubspec.lock‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -732,6 +732,14 @@ packages:
732732
url: "https://pub.dev"
733733
source: hosted
734734
version: "1.0.4"
735+
shimmer:
736+
dependency: "direct main"
737+
description:
738+
name: shimmer
739+
sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
740+
url: "https://pub.dev"
741+
source: hosted
742+
version: "3.0.0"
735743
sky_engine:
736744
dependency: transitive
737745
description: flutter

‎pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ dependencies:
4848
internet_connection_checker: ^1.0.0+1
4949
page_view_dot_indicator: ^2.1.0
5050
flutter_secure_storage: ^8.0.0
51+
shimmer: ^3.0.0
5152

5253
dev_dependencies:
5354
build_runner: ^2.4.4

0 commit comments

Comments
 (0)