import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; void main() { runApp(MyApp()); } final navigationStateProvider = StateProvider((ref) => 0); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ProviderScope(...
Custom Navigation Bar 这个导航栏为你提供了一个美丽的动画底部 Pub ,它的灵感来自于一个关于运球的帖子。看看这些美丽的动画吧:Persistent Bottom Navigation Bar 使用这个包,你可以创建一个底部导航栏,它可以遍历多个子屏幕:© 猫哥 ducafecat.tech github bilibili ...
接下来实现一个自定义的导航栏传递给bottomNavigationBar 先实现一个没有做任何特殊处理的导航栏 class CustomBottomNavigationBar extends StatefulWidget { const CustomBottomNavigationBar({super.key}); @override CustomBottomNavigationBarState createState() => CustomBottomNavigationBarState(); } class CustomB...
Widgetbuild(BuildContext context){// 根据枚举类型选择显示不同的导航栏Widget navigationBar;switch(navigationType){caseNavigationType.bottomNavigationBar:navigationBar=BottomNavigationBar(...);break;caseNavigationType.customNavigationRail:navigationBar=CustomNavigationRail(...);break;}returnScaffold(...bottomNavi...
enum NavigationType { bottomNavigationBar, customNavigationRail, } 1. 2. 3. 4. 然后,在应用的各个部分,我们可以根据这个枚举类型来决定当前显示的导航栏。例如,在build方法中根据枚举类型选择显示底部导航栏还是自定义导航栏: Widget build(BuildContext context) { ...
( appBar: AppBar( title: Text('Flutter Custom Bottom Navigation Bar'), ), body: Center( child: _getPageContent(_selectedIndex), ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.shifting, currentIndex: _selectedIndex, onTap: _onItemTapped, items: [ BottomNavigation...
this.bottomNavigationBar, // 底部导航栏 this.bottomSheet, // 底部可隐藏导航栏 this.backgroundColor, // 内容区域颜色 this.resizeToAvoidBottomPadding, // 是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true。
接下来实现一个自定义的导航栏传递给bottomNavigationBar 先实现一个没有做任何特殊处理的导航栏 class CustomBottomNavigationBar extends StatefulWidget { const CustomBottomNavigationBar({super.key}); @override CustomBottomNavigationBarState createState() => ...
import'package:flutter/material.dart';import'dart:math';classCustomGradationNavigationBarextendsStatefulWidget{constCustomGradationNavigationBar({super.key});@overrideState<CustomGradationNavigationBar>createState()=>_CustomGradationNavigationBarState();}class_CustomGradationNavigationBarStateextendsState<CustomGradati...
「custom」 (使用 ConvexBottomAppBar 构建器自定义预定义的参数) 「height」 (grabbing the appbar) 「top」 (grabbing the superscripted icon) 「curveSize」 (拉伸上标图标的曲线) 「color」 (设置图标的颜色) 「backgroundColor」 (设置 appbar 背景颜色) ...