Skip to content

Commit a26bb4d

Browse files
author
Vivek Chib
committed
added transition from html to flutter engine in index.html
1 parent 1b5fcf5 commit a26bb4d

File tree

7 files changed

+117
-45
lines changed

7 files changed

+117
-45
lines changed

‎lib/main.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_animate/flutter_animate.dart';
23
import 'package:flutter_curve_visualizer/views/widgets/screen_mode.dart';
34
import 'package:flutter_curve_visualizer/utils/theme/theme.dart';
45
import 'package:provider/provider.dart';
@@ -52,7 +53,7 @@ class MyApp extends StatelessWidget {
5253
);
5354
},
5455
),
55-
);
56+
).animate().fadeIn();
5657
},
5758
);
5859
}

‎lib/views/widgets/animated_box/animated_box_widget.dart‎

Lines changed: 62 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -32,54 +32,80 @@ class AnimatedBoxWidget extends StatelessWidget {
3232
child: Align(
3333
alignment: Alignment.center,
3434
child: switch (animationType) {
35-
/// Rotate
36-
AnimationType.rotate =>
37-
Transform.rotate(angle: animation.value * pi, child: child),
38-
39-
/// Scale
40-
AnimationType.scale => Transform.scale(
41-
scale: animation.value,
42-
child: child,
43-
),
44-
4535
/// Translate x
46-
AnimationType.translateX => Transform.translate(
47-
offset: Tween(
48-
begin: Offset((-constraints.maxWidth + boxSize) / 2, 0),
49-
end: Offset((constraints.maxHeight - boxSize) / 2, 0),
50-
).transform(animation.value),
51-
child: child,
52-
),
36+
AnimationType.translateX =>
37+
_buildTransformX(constraints, boxSize, child),
5338

5439
/// Translate Y
55-
AnimationType.translateY => Transform.translate(
56-
offset: Tween(
57-
begin: Offset(0, (-constraints.maxHeight + boxSize) / 2),
58-
end: Offset(0, (constraints.maxHeight - boxSize) / 2),
59-
).transform(animation.value),
60-
child: child,
61-
),
40+
AnimationType.translateY =>
41+
_buildTransformY(constraints, boxSize, child),
42+
43+
/// Rotate
44+
AnimationType.rotate => _buildRotate(child),
45+
46+
/// Scale
47+
AnimationType.scale => _buildScale(child),
6248

6349
/// Fade
64-
AnimationType.fade => AnimatedOpacity(
65-
duration: const Duration(milliseconds: 100),
66-
opacity: animation.value.clamp(0.0, 1.0),
67-
child: child,
68-
),
50+
AnimationType.fade => _buildFade(child),
6951

7052
/// Flip
71-
AnimationType.flip => Transform(
72-
alignment: FractionalOffset.center,
73-
transform: Matrix4.identity()
74-
..setEntry(2, 1, 0.0002)
75-
..rotateY(animation.value * pi),
76-
child: child,
77-
),
53+
AnimationType.flip => _buildFlip(child),
7854
},
7955
),
8056
);
8157
},
8258
);
8359
});
8460
}
61+
62+
Transform _buildFlip(Widget? child) {
63+
return Transform(
64+
alignment: FractionalOffset.center,
65+
transform: Matrix4.identity()
66+
..setEntry(2, 1, 0.0002)
67+
..rotateY(animation.value * pi),
68+
child: child,
69+
);
70+
}
71+
72+
AnimatedOpacity _buildFade(Widget? child) {
73+
return AnimatedOpacity(
74+
duration: const Duration(milliseconds: 100),
75+
opacity: animation.value.clamp(0.0, 1.0),
76+
child: child,
77+
);
78+
}
79+
80+
Transform _buildTransformY(
81+
BoxConstraints constraints, double boxSize, Widget? child) {
82+
return Transform.translate(
83+
offset: Tween(
84+
begin: Offset(0, (-constraints.maxHeight + boxSize) / 2),
85+
end: Offset(0, (constraints.maxHeight - boxSize) / 2),
86+
).transform(animation.value),
87+
child: child,
88+
);
89+
}
90+
91+
Transform _buildTransformX(
92+
BoxConstraints constraints, double boxSize, Widget? child) {
93+
return Transform.translate(
94+
offset: Tween(
95+
begin: Offset((-constraints.maxWidth + boxSize) / 2, 0),
96+
end: Offset((constraints.maxHeight - boxSize) / 2, 0),
97+
).transform(animation.value),
98+
child: child,
99+
);
100+
}
101+
102+
Transform _buildScale(Widget? child) {
103+
return Transform.scale(
104+
scale: animation.value,
105+
child: child,
106+
);
107+
}
108+
109+
Transform _buildRotate(Widget? child) =>
110+
Transform.rotate(angle: animation.value * pi, child: child);
85111
}

‎lib/views/widgets/graph/graph_painter.dart‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
22
import 'graph_config.dart';
33

44
class GraphPainter extends CustomPainter {
5-
GraphPainter({
5+
const GraphPainter({
66
required this.controller,
77
required this.animation,
88
required this.config,
@@ -38,7 +38,6 @@ class GraphPainter extends CustomPainter {
3838
..strokeCap = StrokeCap.round
3939
..isAntiAlias = true;
4040

41-
// Draw the circular marker
4241
canvas.drawCircle(Offset(xPos, yPos), config.pointerSize, markerPaint);
4342
}
4443

‎makefile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
BASE_HREF = '/'
22
GITHUB_REPO := https://github.com/vchib1/vchib1.github.io.git
33

4+
build:
5+
@echo "Cleaning up..."
6+
flutter clean
7+
@echo "Getting Packages..."
8+
flutter pub get
9+
@echo "Building Web..."
10+
flutter build web --wasm
11+
412
deploy:
513
@echo "Cleaning up..."
614
flutter clean

‎pubspec.lock‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,14 @@ packages:
8686
description: flutter
8787
source: sdk
8888
version: "0.0.0"
89+
flutter_animate:
90+
dependency: "direct main"
91+
description:
92+
name: flutter_animate
93+
sha256: "7befe2d3252728afb77aecaaea1dec88a89d35b9b1d2eea6d04479e8af9117b5"
94+
url: "https://pub.dev"
95+
source: hosted
96+
version: "4.5.2"
8997
flutter_lints:
9098
dependency: "direct dev"
9199
description:
@@ -94,6 +102,14 @@ packages:
94102
url: "https://pub.dev"
95103
source: hosted
96104
version: "5.0.0"
105+
flutter_shaders:
106+
dependency: transitive
107+
description:
108+
name: flutter_shaders
109+
sha256: "34794acadd8275d971e02df03afee3dee0f98dbfb8c4837082ad0034f612a3e2"
110+
url: "https://pub.dev"
111+
source: hosted
112+
version: "0.1.3"
97113
flutter_svg:
98114
dependency: "direct main"
99115
description:

‎pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ dependencies:
3838
provider: ^6.1.2
3939
url_launcher: ^6.3.1
4040
flutter_svg: ^2.0.16
41+
flutter_animate: ^4.5.2
4142

4243
dev_dependencies:
4344
flutter_test:

‎web/index.html‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@
3030
justify-content: center;
3131
align-items: center;
3232
height: 100vh;
33-
transition: opacity 4s ease-out;
3433
}
3534

3635
.colorful {
36+
transition: opacity .4s ease-out;
3737
width: 44.8px;
3838
height: 44.8px;
3939
border-radius: 50%;
@@ -75,16 +75,37 @@
7575
<div class="colorful"></div>
7676
</div>
7777
<script>
78-
{{flutter_js}}
79-
{{flutter_bootstrap_js}}
80-
78+
function delay(time) {
79+
return new Promise(resolve => setTimeout(resolve, time));
80+
}
8181
const darkThemeMode = localStorage.getItem('flutter.darkMode') || false;
8282

8383
if (darkThemeMode === 'true') {
84-
document.getElementById("loading-container").style.backgroundColor = '#18120c';
84+
document.body.style.backgroundColor = '#18120c';
8585
} else {
86-
document.getElementById("loading-container").style.backgroundColor = '#fff8f4';
86+
document.body.style.backgroundColor = '#fff8f4';
8787
}
88+
89+
window.addEventListener('load', function(ev) {
90+
{{flutter_js}}
91+
{{flutter_build_config}}
92+
93+
const loading = document.querySelector(".colorful");
94+
95+
_flutter.loader.load({
96+
serviceWorker: {
97+
serviceWorkerVersion: {{flutter_service_worker_version}},
98+
},
99+
onEntrypointLoaded: async function(engineInitializer) {
100+
engineInitializer.initializeEngine().then(async function(appRunner) {
101+
loading.style.opacity = "0";
102+
await delay(400);
103+
loading.remove();
104+
await appRunner.runApp();
105+
});
106+
}
107+
});
108+
});
88109
</script>
89110
</body>
90111
</html>

0 commit comments

Comments
 (0)