Fix Bug and RiveNav

instagram/lib/models/menu.dart

+import 'package:instagram_clone/models/rive_assets.dart';
+
+class Menu{
+  String title;
+  RiveModel rive;
+
+  Menu({
+    required this.rive,
+    required this.title,
+  });
+}
+
+List<Menu> menu_list = [
+  Menu(
+    rive: RiveModel(
+      src: "assets/RiveAssets/icons.riv", 
+      artboard: "HOME", 
+      stateMachineName: "HOME_interactivity"
+    ), 
+    title: "Home"
+  ),
+
+  Menu(
+    rive: RiveModel(
+      src: "assets/RiveAssets/icons.riv", 
+      artboard: "SEARCH", 
+      stateMachineName: "SEARCH_Interactivity"
+    ), 
+    title: "SEARCH"
+  ),
+  Menu(
+    title: "Timer",
+    rive: RiveModel(
+        src: "assets/RiveAssets/icons.riv",
+        artboard: "TIMER",
+        stateMachineName: "TIMER_Interactivity"),
+  ),
+  Menu(
+    title: "Notification",
+    rive: RiveModel(
+        src: "assets/RiveAssets/icons.riv",
+        artboard: "BELL",
+        stateMachineName: "BELL_Interactivity"),
+  ),
+];
\ No newline at end of file

instagram/lib/models/rive_assets.dart

+import 'package:rive/rive.dart';
+
+class RiveModel{
+  String src, artboard, stateMachineName;
+  SMIBool? status;
+
+  RiveModel({
+    required this.src,
+    required this.artboard,
+    required this.stateMachineName,
+    this.status});
+
+  void setStatus(SMIBool newStatus){
+    this.status = status;
+  }
+}
\ No newline at end of file

instagram/lib/screens/main_screen.dart

 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/src/widgets/framework.dart';
-import 'package:flutter/src/widgets/placeholder.dart';
+import 'package:instagram_clone/models/menu.dart';
+
 import 'package:instagram_clone/screens/post_screen.dart';
 import 'package:instagram_clone/screens/profile_screen.dart';
 import 'package:instagram_clone/screens/search_screen.dart';
 import 'package:instagram_clone/screens/video_screen.dart';
+import 'package:instagram_clone/utils/rive_utils.dart';
 import 'package:instagram_clone/utils/text_utils.dart';
+import 'package:instagram_clone/widgets/btn_bottom_navigator.dart';
 
 import 'home_screen.dart';
 
@@ -18,6 +20,7 @@ class MainScreen extends StatefulWidget {
 }
 
 class _MainScreenState extends State<MainScreen> {
+  Menu selectedNavItem = menu_list.first;
   int index = 0;
   final TextUtils _textUtils = TextUtils();
   final PageController pageController = PageController(
@@ -29,9 +32,76 @@ class _MainScreenState extends State<MainScreen> {
     return Scaffold(
       backgroundColor: Colors.white,
       body: getScreen(),
-      bottomNavigationBar: bottomBarWidget(),
+      bottomNavigationBar: bottomBarRiveWidget(),
     );
   }
+  Widget bottomBarRiveWidget(){
+    return SafeArea(
+      child: Container(
+        padding: const EdgeInsets.all(12),
+        margin: const EdgeInsets.all(24),
+        decoration: BoxDecoration(
+          color: Colors.black.withOpacity(0.8),
+          borderRadius: const BorderRadius.all(Radius.circular(24)),
+          boxShadow: [
+              BoxShadow(
+              color: Colors.black.withOpacity(0.3),
+              offset: const Offset(0, 20),
+              blurRadius: 20,
+            ),
+          ]
+    
+          ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            ...List.generate(menu_list.length, (index) => 
+              BtnNavButton(
+                menu: menu_list[index], 
+                onTap: () {
+
+                  RiveUtils.changeSMIBoolState(menu_list[index].rive.status!);
+                  updateNavBtn(index, menu_list[index]);
+                }, 
+                riveOnInit: (artboard) {
+                  menu_list[index].rive.status = RiveUtils.getRiveInput(
+                    artboard, 
+                    stateMachineName: menu_list[index].rive.stateMachineName,
+                  );
+                }, 
+                activeMenu: selectedNavItem,
+              ),
+            ),
+
+            InkWell(
+            onTap: () {
+              index = 4;
+              setState(() {
+                
+              });
+            },
+            child: CircleAvatar(
+              backgroundColor: index == 4 ? Colors.black : Colors.white,
+              radius: 17,
+              child: const CircleAvatar(
+                radius: 15,
+                backgroundImage: AssetImage("assets/avaters/Avatar 1.jpg"),
+              ), 
+              ),
+          ),
+
+          ],
+        ),
+      ),
+    );
+  }
+
+  void updateNavBtn(int newIndex, Menu newNavBtn){
+    setState(() {
+      index = newIndex;
+      selectedNavItem = newNavBtn;
+    });
+  }
 
   Widget bottomBarWidget() {
     return Container(

instagram/lib/screens/story_screen.dart

@@ -40,17 +40,17 @@ class _StoryScreenState extends State<StoryScreen> with TickerProviderStateMixin
   @override
   void dispose() {
     // TODO: implement dispose
-    _pageController.dispose();
     _cancelTimer();
+    // Future.delayed(const Duration(milliseconds: 500)).then((value) {_pageController.dispose();});
+    
+    
     super.dispose();
 
   }
 
-  @override
-  
 
 
-  void _cancelTimer() {
+  void _cancelTimer() async{
     _timer?.cancel();
   }
 
@@ -80,11 +80,11 @@ class _StoryScreenState extends State<StoryScreen> with TickerProviderStateMixin
         } else {
           if (_current_page < list_image.length - 1){
             _current_page++;
-            print("Still Run");
             _pageController.animateToPage(
             _current_page, 
             duration: const Duration(milliseconds: 300), 
-            curve: Curves.easeOut);
+            curve: Curves.easeOut, 
+            );
 
             _current_timer = 0.0;
             _duration = 10000;
@@ -272,7 +272,7 @@ class _StoryScreenState extends State<StoryScreen> with TickerProviderStateMixin
   
   void returnHome() {
     _current_page = 0;
-    _pageController = PageController(initialPage: _current_page);
+    // _pageController = PageController(initialPage: _current_page);
     _duration = 10000;
     _current_timer = 0.0;
     _previous_page = _current_page;

instagram/lib/utils/rive_utils.dart

+import 'package:rive/rive.dart';
+
+class RiveUtils{
+  static SMIBool getRiveInput(Artboard artboard, {required String stateMachineName}){
+    StateMachineController? controller = StateMachineController.fromArtboard(artboard, stateMachineName);
+    artboard.addController(controller!);
+    return controller.findInput<bool>("active") as SMIBool;
+  }
+
+  static void changeSMIBoolState(SMIBool input) {
+    input.change(true);
+    Future.delayed(
+      const Duration(seconds: 1),
+      () {
+        input.change(false);
+      }
+    );
+  }
+}
\ No newline at end of file

instagram/lib/widgets/btn_bottom_navigator.dart

+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:flutter/src/widgets/placeholder.dart';
+import 'package:instagram_clone/models/menu.dart';
+import 'package:rive/rive.dart';
+
+class BtnNavButton extends StatelessWidget {
+  final Menu menu;
+  final VoidCallback onTap;
+  final ValueChanged<Artboard> riveOnInit;
+  final Menu activeMenu;
+
+
+  const BtnNavButton({super.key, required this.menu, required this.onTap, required this.riveOnInit, required this.activeMenu});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          AnimatedContainer(
+            margin: const EdgeInsets.only(bottom: 2),
+            duration: const Duration(milliseconds: 400),
+            height: 4,
+            width: activeMenu == menu ? 20: 0,
+            decoration: const BoxDecoration(
+              color: Color(0xFF81B4FF),
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+            ),
+          ),
+
+          SizedBox(
+            width: 36,
+            height: 36,
+            child: Opacity(
+              opacity: activeMenu == menu ? 1 : 0.5,
+              child: RiveAnimation.asset(
+                menu.rive.src,
+                artboard: menu.rive.artboard,
+                onInit: riveOnInit,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
\ No newline at end of file

instagram/lib/widgets/cube_widget.dart

@@ -26,6 +26,8 @@ class CubeWidget extends StatefulWidget {
 }
 
 class _CubeWidgetState extends State<CubeWidget> {
+
+
   @override
   Widget build(BuildContext context) {
     final isLeaving = (widget.index - widget.pageNotifier) <= 0;