home layout

lib/pages/main_pager/main_pager.dart

@@ -0,0 +1,180 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+import 'package:stylish_bottom_bar/model/bar_items.dart';
+import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';
+
+import 'account_page.dart';
+import 'contacts_page.dart';
+import 'chats_page.dart';
+
+class MainPager extends ConsumerStatefulWidget {
+  const MainPager({super.key});
+
+  @override
+  MainPagerState createState() => MainPagerState();
+}
+
+class MainPagerState extends ConsumerState<MainPager>
+    with TickerProviderStateMixin {
+  //////////////////////////////////////////////////////////////////
+
+  final _unfocusNode = FocusNode();
+
+  final _pageController = PageController();
+  var _currentPage = 0;
+
+  final _selectedIconList = <IconData>[
+    Icons.chat,
+    Icons.contacts,
+    Icons.person
+  ];
+  // final _unselectedIconList = <IconData>[
+  //   Icons.chat_outlined,
+  //   Icons.contacts_outlined,
+  //   Icons.person_outlined
+  // ];
+  final _fabIconList = <IconData>[
+    Icons.add_comment_sharp,
+    Icons.person_add_sharp,
+    Icons.settings_sharp,
+  ];
+  final _labelList = <String>[
+    translate('pager.chats'),
+    translate('pager.contacts'),
+    translate('pager.account'),
+  ];
+  final List<Widget> _bottomBarPages = [
+    const ChatsPage(),
+    const ContactsPage(),
+    const AccountPage(),
+  ];
+
+  //////////////////////////////////////////////////////////////////
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _unfocusNode.dispose();
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  bool onScrollNotification(ScrollNotification notification) {
+    if (notification is UserScrollNotification &&
+        notification.metrics.axis == Axis.vertical) {
+      switch (notification.direction) {
+        case ScrollDirection.forward:
+          // _hideBottomBarAnimationController.reverse();
+          // _fabAnimationController.forward(from: 0);
+          break;
+        case ScrollDirection.reverse:
+          // _hideBottomBarAnimationController.forward();
+          // _fabAnimationController.reverse(from: 1);
+          break;
+        case ScrollDirection.idle:
+          break;
+      }
+    }
+    return false;
+  }
+
+  BottomBarItem buildBottomBarItem(int index) {
+    final theme = Theme.of(context);
+    return BottomBarItem(
+      title: Text(_labelList[index]),
+      icon: Icon(_selectedIconList[index],
+          color: theme.colorScheme.onPrimaryContainer),
+      selectedIcon: Icon(_selectedIconList[index],
+          color: theme.colorScheme.onPrimaryContainer),
+      backgroundColor: theme.colorScheme.onPrimaryContainer,
+      //unSelectedColor: theme.colorScheme.primaryContainer,
+      //selectedColor: theme.colorScheme.primary,
+      //badge: const Text('9+'),
+      //showBadge: true,
+    );
+  }
+
+  List<BottomBarItem> _buildBottomBarItems() {
+    final bottomBarItems = List<BottomBarItem>.empty(growable: true);
+    for (var index = 0; index < _bottomBarPages.length; index++) {
+      final item = buildBottomBarItem(index);
+      bottomBarItems.add(item);
+    }
+    return bottomBarItems;
+  }
+
+  @override
+  // ignore: prefer_expression_function_bodies
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Scaffold(
+      extendBody: true,
+      body: NotificationListener<ScrollNotification>(
+          onNotification: onScrollNotification,
+          child: PageView(
+            controller: _pageController,
+            //physics: const NeverScrollableScrollPhysics(),
+            children: List.generate(
+                _bottomBarPages.length, (index) => _bottomBarPages[index]),
+          )),
+      // appBar: AppBar(
+      //   toolbarHeight: 24,
+      //   title: Text(
+      //     'C',
+      //     style: Theme.of(context).textTheme.headlineSmall,
+      //   ),
+      // ),
+      bottomNavigationBar: StylishBottomBar(
+        backgroundColor: theme.colorScheme.primaryContainer,
+        // gradient: LinearGradient(
+        //     begin: Alignment.topCenter,
+        //     end: Alignment.bottomCenter,
+        //     colors: <Color>[
+        //       theme.colorScheme.primary,
+        //       theme.colorScheme.primaryContainer,
+        //     ]),
+        option: AnimatedBarOptions(
+          // iconSize: 32,
+          //barAnimation: BarAnimation.fade,
+          iconStyle: IconStyle.animated,
+          inkEffect: true,
+          inkColor: theme.colorScheme.primary,
+          //opacity: 0.3,
+        ),
+        items: _buildBottomBarItems(),
+        hasNotch: true,
+        fabLocation: StylishBarFabLocation.end,
+        currentIndex: _currentPage,
+        onTap: (index) async {
+          await _pageController.animateToPage(index,
+              duration: 250.ms, curve: Curves.bounceOut);
+          setState(() {
+            _currentPage = index;
+          });
+        },
+      ),
+
+      floatingActionButton: FloatingActionButton(
+        shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(14))),
+        //foregroundColor: theme.colorScheme.secondary,
+        backgroundColor: theme.colorScheme.secondaryContainer,
+        child: Icon(
+          _fabIconList[_currentPage],
+          color: theme.colorScheme.onSecondaryContainer,
+        ),
+        onPressed: () {
+          // xxx
+        },
+      ),
+      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
+    );
+  }
+}