Skip to content

Commit 04b475a

Browse files
FilledStacksFilledStacks
authored
Updates web templates (#3)
* feat: Adds updated splash loader to the html * feat: Adds flutter into animation to avoid jump from splash when running web app
1 parent e26b5d5 commit 04b475a

File tree

5 files changed

+218
-43
lines changed

5 files changed

+218
-43
lines changed

‎lib/src/templates/app/web/lib/main.dart.stk‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:{{packageName}}/{{{relativeLocatorFilePath}}}';
66
import 'package:{{packageName}}/{{{relativeRouterFilePath}}}';
77
import 'package:{{packageName}}/ui/common/app_colors.dart';
88
import 'package:url_strategy/url_strategy.dart';
9+
import 'package:flutter_animate/flutter_animate.dart';
910

1011
void main() {
1112
setPathUrlStrategy();
@@ -34,6 +35,16 @@ class MyApp extends StatelessWidget {
3435
),
3536
routerDelegate: stackedRouter.delegate(),
3637
routeInformationParser: stackedRouter.defaultRouteParser(),
38+
).animate()
39+
.moveY(end: 0, begin: 35)
40+
.fadeIn(
41+
duration: const Duration(milliseconds: 500),
42+
delay: const Duration(milliseconds: 50),
43+
)
44+
.scale(
45+
begin: const Offset(0.9, 0.9),
46+
end: const Offset(1, 1),
47+
curve: Curves.easeInOut,
3748
),
3849
);
3950
}

‎lib/src/templates/app/web/pubspec.yaml.stk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ dependencies:
3939
stacked_services: ^1.0.0
4040
url_strategy: ^0.2.0
4141
responsive_builder: ^0.6.0
42+
flutter_animate: ^4.1.0
4243

4344
dev_dependencies:
4445
flutter_test:

‎lib/src/templates/app/web/web/index.html.stk‎

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<!--
56
If you are serving your web app in a path other than the root, change the
@@ -18,7 +19,7 @@
1819

1920
<meta charset="UTF-8">
2021
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
21-
<meta name="description" content="Stacke Application">
22+
<meta name="description" content="Learn Flutter Web the Right way">
2223

2324
<!-- iOS meta tags & icons -->
2425
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -27,14 +28,12 @@
2728
<link rel="apple-touch-icon" href="icons/Icon-192.png">
2829

2930
<!-- Favicon -->
30-
<link rel="icon" type="image/png" href="favicon.png"/>
31+
<link rel="icon" type="image/png" href="favicon.png" />
3132

3233
<!-- Fonts -->
3334
<link rel="preconnect" href="https://fonts.googleapis.com">
3435
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3536

36-
<!-- Import the Open Sans Font from Google Fonts -->
37-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap" rel="stylesheet">
3837

3938
<title>My Stacked Application</title>
4039
<link rel="manifest" href="manifest.json">
@@ -46,12 +45,21 @@
4645
<!-- This script adds the flutter initialization JS code -->
4746
<script src="flutter.js" defer></script>
4847
</head>
48+
4949
<body>
5050
<style>
51+
5152
body {
5253
background-color: #0A0A0A;
5354
height: 100vh;
5455
width: 100vw;
56+
position: fixed;
57+
inset: 0px;
58+
overflow: hidden;
59+
padding: 0px;
60+
margin: 0px;
61+
user-select: none;
62+
touch-action: none;
5563
}
5664

5765
.main-content {
@@ -60,34 +68,104 @@
6068
display: flex;
6169
align-items: center;
6270
justify-content: center;
71+
transition: opacity .4s ease-out;
6372
}
6473

6574
img {
6675
width: 100px;
6776
height: 100px;
77+
position: absolute;
6878
}
6979

7080
p {
7181
color: #fff;
7282
}
7383

84+
85+
.loader {
86+
position: relative;
87+
width: 250px;
88+
height: 250px;
89+
border-radius: 50%;
90+
background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
91+
animation: animate 1.2s linear infinite;
92+
}
93+
94+
@keyframes animate {
95+
0% {
96+
transform: rotate(0deg);
97+
}
98+
99+
100% {
100+
transform: rotate(360deg);
101+
}
102+
}
103+
104+
.loader span {
105+
position: absolute;
106+
width: 100%;
107+
height: 100%;
108+
border-radius: 60%;
109+
background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
110+
}
111+
112+
.loader span:nth-child(1) {
113+
filter: blur(5px);
114+
}
115+
116+
.loader span:nth-child(2) {
117+
filter: blur(10px);
118+
}
119+
120+
.loader span:nth-child(3) {
121+
filter: blur(25px);
122+
}
123+
124+
.loader span:nth-child(4) {
125+
filter: blur(50px);
126+
}
127+
128+
.loader:after {
129+
content: '';
130+
position: absolute;
131+
top: 10px;
132+
left: 10px;
133+
right: 10px;
134+
bottom: 10px;
135+
background: #191919;
136+
border-radius: 50%;
137+
}
74138
</style>
75139
<script>
76-
window.addEventListener('load', function(ev) {
140+
function delay(time) {
141+
return new Promise(resolve => setTimeout(resolve, time));
142+
}
143+
144+
window.addEventListener('load', function (ev) {
145+
var loaderContent = document.querySelector('#loader-content');
77146
// Download main.dart.js
78147
_flutter.loader.loadEntrypoint({
79148
serviceWorker: {
80149
serviceWorkerVersion: serviceWorkerVersion,
81150
}
82-
}).then(function(engineInitializer) {
151+
}).then(function (engineInitializer) {
83152
return engineInitializer.initializeEngine();
84-
}).then(function(appRunner) {
85-
return appRunner.runApp();
153+
}).then(async function (appRunner) {
154+
loaderContent.style.opacity = "0";
155+
await delay(400);
156+
await appRunner.runApp();
86157
});
87158
});
88159
</script>
89-
<div class="main-content">
160+
<div class="main-content" id="loader-content">
161+
<div class="loader">
162+
<span></span>
163+
<span></span>
164+
<span></span>
165+
<span></span>
166+
</div>
90167
<img src="main-icon.png" />
91168
</div>
92169
</body>
93-
</html>
170+
171+
</html>

0 commit comments

Comments
 (0)