Skip to content

Commit

Permalink
bottom navigator animation icon set
Browse files Browse the repository at this point in the history
  • Loading branch information
@abuanwar072
abuanwar072 committed Dec 5, 2022
1 parent c9ce674 commit 4093863
Show file tree
Hide file tree
Showing 3 changed files with 247 additions and 78 deletions.
3 changes: 2 additions & 1 deletion lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:rive_animation/screens/entry_point.dart';
import 'package:rive_animation/screens/onboding/onboding_screen.dart';

void main() {
Expand Down Expand Up @@ -26,7 +27,7 @@ class MyApp extends StatelessWidget {
errorBorder: defaultInputBorder,
),
),
home: const OnbodingScreen(),
home: const EntryPoint(),
);
}
}
Expand Down
149 changes: 149 additions & 0 deletions lib/screens/entry_point.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
import 'package:rive_animation/constants.dart';

class EntryPoint extends StatefulWidget {
const EntryPoint({super.key});

@override
State<EntryPoint> createState() => _EntryPointState();
}

class _EntryPointState extends State<EntryPoint> {
late SMIBool chat;
late SMIBool search;
late SMIBool timer;
late SMIBool bell;
late SMIBool user;

SMIBool getRiveInput(Artboard artboard, {required String stateMachineName}) {
StateMachineController? controller =
StateMachineController.fromArtboard(artboard, stateMachineName);

artboard.addController(controller!);

return controller.findInput<bool>("active") as SMIBool;
}

void chnageState(SMIBool input) {
input.change(true);
Future.delayed(
const Duration(seconds: 1),
() {
input.change(false);
},
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: SafeArea(
child: Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
color: backgroundColor2.withOpacity(0.8),
borderRadius: const BorderRadius.all(Radius.circular(24)),
boxShadow: [
BoxShadow(
color: backgroundColor2.withOpacity(0.3),
offset: const Offset(0, 20),
blurRadius: 20,
),
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
chnageState(chat);
},
child: SizedBox(
height: 36,
width: 36,
child: RiveAnimation.asset(
"assets/RiveAssets/icons.riv",
artboard: "CHAT",
onInit: (artboard) {
chat = getRiveInput(artboard,
stateMachineName: "CHAT_Interactivity");
},
),
),
),
GestureDetector(
onTap: () {
chnageState(search);
},
child: SizedBox(
height: 36,
width: 36,
child: RiveAnimation.asset(
"assets/RiveAssets/icons.riv",
artboard: "SEARCH",
onInit: (artboard) {
search = getRiveInput(artboard,
stateMachineName: "SEARCH_Interactivity");
},
),
),
),
GestureDetector(
onTap: () {
chnageState(timer);
},
child: SizedBox(
height: 36,
width: 36,
child: RiveAnimation.asset(
"assets/RiveAssets/icons.riv",
artboard: "TIMER",
onInit: (artboard) {
timer = getRiveInput(artboard,
stateMachineName: "TIMER_Interactivity");
},
),
),
),
GestureDetector(
onTap: () {
chnageState(bell);
},
child: SizedBox(
height: 36,
width: 36,
child: RiveAnimation.asset(
"assets/RiveAssets/icons.riv",
artboard: "BELL",
onInit: (artboard) {
bell = getRiveInput(artboard,
stateMachineName: "BELL_Interactivity");
},
),
),
),
GestureDetector(
onTap: () {
chnageState(user);
},
child: SizedBox(
height: 36,
width: 36,
child: RiveAnimation.asset(
"assets/RiveAssets/icons.riv",
artboard: "USER",
onInit: (artboard) {
user = getRiveInput(artboard,
stateMachineName: "USER_Interactivity");
},
),
),
),
],
),
),
),
);
}
}
173 changes: 96 additions & 77 deletions lib/screens/onboding/components/sign_in_form.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:rive/rive.dart';
import 'package:rive_animation/screens/entry_point.dart';

class SignInForm extends StatefulWidget {
const SignInForm({
Expand Down Expand Up @@ -40,6 +41,51 @@ class _SignInFormState extends State<SignInForm> {
confetti = controller.findInput<bool>("Trigger explosion") as SMITrigger;
}

void singIn(BuildContext context) {
// confetti.fire();
setState(() {
isShowConfetti = true;
isShowLoading = true;
});
Future.delayed(
const Duration(seconds: 1),
() {
if (_formKey.currentState!.validate()) {
success.fire();
Future.delayed(
const Duration(seconds: 2),
() {
setState(() {
isShowLoading = false;
});
confetti.fire();
// Navigate & hide confetti
Future.delayed(Duration(seconds: 1), () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EntryPoint(),
),
);
});
},
);
} else {
error.fire();
Future.delayed(
const Duration(seconds: 2),
() {
setState(() {
isShowLoading = false;
});
reset.fire();
},
);
}
},
);
}

@override
Widget build(BuildContext context) {
return Stack(
Expand Down Expand Up @@ -100,52 +146,20 @@ class _SignInFormState extends State<SignInForm> {
padding: const EdgeInsets.only(top: 8, bottom: 24),
child: ElevatedButton.icon(
onPressed: () {
// confetti.fire();
setState(() {
isShowConfetti = true;
isShowLoading = true;
});
Future.delayed(
const Duration(seconds: 1),
() {
if (_formKey.currentState!.validate()) {
success.fire();
Future.delayed(
const Duration(seconds: 2),
() {
setState(() {
isShowLoading = false;
});
confetti.fire();
// Navigate & hide confetti
},
);
} else {
error.fire();
Future.delayed(
const Duration(seconds: 2),
() {
setState(() {
isShowLoading = false;
});
reset.fire();
},
);
}
},
);
singIn(context);
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFF77D8E),
minimumSize: const Size(double.infinity, 56),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(25),
bottomRight: Radius.circular(25),
bottomLeft: Radius.circular(25),
),
)),
backgroundColor: const Color(0xFFF77D8E),
minimumSize: const Size(double.infinity, 56),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(25),
bottomRight: Radius.circular(25),
bottomLeft: Radius.circular(25),
),
),
),
icon: const Icon(
CupertinoIcons.arrow_right,
color: Color(0xFFFE0037),
Expand All @@ -157,47 +171,52 @@ class _SignInFormState extends State<SignInForm> {
),
),
isShowLoading
? Positioned.fill(
child: Column(
children: [
const Spacer(),
SizedBox(
height: 100,
width: 100,
child: RiveAnimation.asset(
'assets/RiveAssets/check.riv',
fit: BoxFit.cover,
onInit: _onCheckRiveInit,
),
),
const Spacer(flex: 2)
],
? CustomPositioned(
child: RiveAnimation.asset(
'assets/RiveAssets/check.riv',
fit: BoxFit.cover,
onInit: _onCheckRiveInit,
),
)
: const SizedBox(),
isShowConfetti
? Positioned.fill(
child: Column(
children: [
const Spacer(),
SizedBox(
height: 100,
width: 100,
child: Transform.scale(
scale: 6,
child: RiveAnimation.asset(
"assets/RiveAssets/confetti.riv",
onInit: _onConfettiRiveInit,
fit: BoxFit.cover,
),
),
),
const Spacer(flex: 2),
],
? CustomPositioned(
scale: 6,
child: RiveAnimation.asset(
"assets/RiveAssets/confetti.riv",
onInit: _onConfettiRiveInit,
fit: BoxFit.cover,
),
)
: const SizedBox(),
],
);
}
}

class CustomPositioned extends StatelessWidget {
const CustomPositioned({super.key, this.scale = 1, required this.child});

final double scale;
final Widget child;

@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Column(
children: [
const Spacer(),
SizedBox(
height: 100,
width: 100,
child: Transform.scale(
scale: scale,
child: child,
),
),
const Spacer(flex: 2),
],
),
);
}
}

0 comments on commit 4093863

Please sign in to comment.