Skip to content

Add animated logo #622

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AhmedHanafy725 merged 6 commits into from
Oct 7, 2024
Merged

Add animated logo #622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0620440
WIP: add tfloading.json to be animated
AlaaElattar Oct 3, 2024
fe85d38
Merge branch 'development_cleanup' into development_cleanup_animated_…
AlaaElattar Oct 3, 2024
71c3611
Add animated logo in main screen && remove loading spinner
AlaaElattar Oct 7, 2024
6185bf0
add animate flag
AlaaElattar Oct 7, 2024
319081d
use height and width in Lottie and remove sizedBox
AlaaElattar Oct 7, 2024
5475f63
revert style of ThreeFold Connect App text
AlaaElattar Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 201 additions & 0 deletions app/assets/tfloading.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
{
"v": "5.12.2",
"fr": 50,
"ip": 0,
"op": 70,
"w": 255,
"h": 232,
"nm": "Comp 2",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "logoTF_icon Outlines",
"tt": 3,
"tp": 1,
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [
{ "t": 0, "s": [100], "h": 1 },
{ "t": 80, "s": [0], "h": 1 }
],
"ix": 11
},
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [127, 116, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [76.5, 77, 0], "ix": 1, "l": 2 },
"s": { "a": 0, "k": [191.883, 191.883, 100], "ix": 6, "l": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [[8.4, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
"o": [[0, 0], [0, 0], [0, 0], [0, 0], [0.1, 8.401]],
"v": [[50, 14.9], [-65.3, 14.9], [-65.3, -14.9], [65.2, -14.9], [65.2, -0.4]],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [76.5, 120.4], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{ "t": 0, "s": [0, 0], "h": 1 },
{ "t": 20, "s": [100, 100], "h": 1 }
],
"ix": 3
},
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [[0, 0], [0, 0], [0, 0], [0, 0]],
"o": [[0, 0], [0, 0], [0, 0], [0, 0]],
"v": [[46.15, 14.85], [-46.15, 14.85], [-46.15, -14.85], [46.15, -14.85]],
"c": true
},
"ix": 2
},
"nm": "Path 2",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [95.65, 76.95], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{ "t": 20, "s": [0, 0], "h": 1 },
{ "t": 40, "s": [100, 100], "h": 1 }
],
"ix": 3
},
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 2",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 2,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [[8.4, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
"o": [[0, 0], [0, 0], [0, 0], [0, 0], [0.1, -8.4]],
"v": [[50, -14.9], [-65.3, -14.9], [-65.3, 14.9], [65.2, 14.9], [65.2, 0.2]],
"c": true
},
"ix": 2
},
"nm": "Path 3",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [76.5, 33.6], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{ "t": 40, "s": [0, 0], "h": 1 },
{ "t": 60, "s": [100, 100], "h": 1 }
],
"ix": 3
},
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 3",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 3,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [0.102, 0.631, 0.561, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}
],
"ip": 0,
"op": 70,
"st": 0,
"ct": 1,
"bm": 0
}
],
"markers": [],
"props": {}
}

12 changes: 1 addition & 11 deletions app/lib/screens/main_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ class _AppState extends State<MainScreen> {
children: [
const Hero(
tag: 'logo',
child: HomeLogoWidget(),
child: HomeLogoWidget(animate: true,),
),
const SizedBox(height: 50),
Container(
Expand All @@ -84,16 +84,6 @@ class _AppState extends State<MainScreen> {
const SizedBox(
height: 40,
),
Visibility(
visible: errorMessage == null,
child: Transform.scale(
scale: 0.5,
child: CircularProgressIndicator(
color: Theme.of(context).colorScheme.primary,
),
),
),
const SizedBox(height: 20),
Visibility(
maintainSize: true,
maintainAnimation: true,
Expand Down
2 changes: 1 addition & 1 deletion app/lib/screens/registered_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class _RegisteredScreenState extends State<RegisteredScreen>
),
const Hero(
tag: 'logo',
child: HomeLogoWidget(),
child: HomeLogoWidget(animate: false,),
),
],
),
Expand Down
2 changes: 1 addition & 1 deletion app/lib/screens/splash_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class _SplashScreenState extends State<SplashScreen>
body: Center(
child: Hero(
tag: 'logo',
child: HomeLogoWidget(),
child: HomeLogoWidget(animate: true,),
),
),
);
Expand Down
2 changes: 1 addition & 1 deletion app/lib/screens/unregistered_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ class _UnregisteredScreenState extends State<UnregisteredScreen>
children: <Widget>[
const Hero(
tag: 'logo',
child: HomeLogoWidget(),
child: HomeLogoWidget(animate: false,),
),
const SizedBox(height: 150),
SizedBox(
Expand Down
42 changes: 36 additions & 6 deletions app/lib/widgets/home_logo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,50 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';

class HomeLogoWidget extends StatelessWidget {
const HomeLogoWidget({super.key});
final bool animate;
const HomeLogoWidget({super.key, required this.animate});

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/TF_logo.svg',
alignment: Alignment.center,
colorFilter: ColorFilter.mode(
Theme.of(context).colorScheme.onBackground, BlendMode.srcIn),
Center(
child: animate
? Column(
children: [
Lottie.asset(
'assets/tfloading.json',
repeat: true,
animate: true,
width: 50,
height: 50,
),
const SizedBox(
height: 10,
),
Text(
'THREEFOLD',
style: Theme.of(context)
.textTheme
.headlineSmall!
.copyWith(
color: Theme.of(context).colorScheme.onBackground,
fontWeight: FontWeight.bold),
),
],
)
: SvgPicture.asset(
'assets/TF_logo.svg',
alignment: Alignment.center,
colorFilter: ColorFilter.mode(
Theme.of(context).colorScheme.onBackground,
BlendMode.srcIn,
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
Expand Down
16 changes: 16 additions & 0 deletions app/pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "6.4.1"
archive:
dependency: transitive
description:
name: archive
sha256: cb6a278ef2dbb298455e1a713bda08524a175630ec643a242c399c932a0a1f7d
url: "https://pub.dev"
source: hosted
version: "3.6.1"
args:
dependency: transitive
description:
Expand Down Expand Up @@ -610,6 +618,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.2.0"
lottie:
dependency: "direct main"
description:
name: lottie
sha256: "6a24ade5d3d918c306bb1c21a6b9a04aab0489d51a2582522eea820b4093b62b"
url: "https://pub.dev"
source: hosted
version: "3.1.2"
matcher:
dependency: transitive
description:
Expand Down
1 change: 1 addition & 0 deletions app/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ dependencies:
qr_flutter: ^4.1.0
screen_brightness: ^1.0.1
validators: ^3.0.0
lottie: ^3.1.2

dev_dependencies:
flutter_test:
Expand Down