From bbd4ab28f7bf3bcfc17c091c4c7578dda80e9a85 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 14 Jul 2024 14:28:52 +0800 Subject: [PATCH] Add bottom navigation bar item --- .../bottom_navigation_bar.dart | 6 + .../bottom_navigation_bar_item.dart | 157 +++++++++++++++++- 2 files changed, 159 insertions(+), 4 deletions(-) diff --git a/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar.dart b/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar.dart index 0d5e00153..056d8c5e3 100644 --- a/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar.dart +++ b/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar.dart @@ -1,5 +1,11 @@ +import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; +import 'package:meta/meta.dart'; + +import 'package:forui/assets.dart'; +import 'package:forui/forui.dart'; + part 'bottom_navigation_bar_item.dart'; class FBottomNavigationBar extends StatelessWidget { diff --git a/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar_item.dart b/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar_item.dart index ff0e94827..48251cc54 100644 --- a/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar_item.dart +++ b/forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar_item.dart @@ -1,12 +1,161 @@ part of 'bottom_navigation_bar.dart'; -class FBottomNavigationBarItem extends StatelessWidget { - const FBottomNavigationBarItem({super.key}); +class _FBottomNavigationBarWidget extends StatelessWidget { + final FBottomNavigationBarItem item; + + final bool active; + + const _FBottomNavigationBarWidget({ + required this.item, + required this.active, + super.key, + }); @override Widget build(BuildContext context) { - return const Placeholder(); + final style = item.style!; // TODO: fix. + + return MouseRegion( + cursor: SystemMouseCursors.click, + child: Column( + children: [ + item.icon( + height: style.iconSize, + colorFilter: ColorFilter.mode( + active ? style.activeIconColor : style.inactiveIconColor, + BlendMode.srcIn, + ), + ), + Text( + item.label, + style: active ? style.activeTextStyle : style.inactiveTextStyle, + ), + ], + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('item', item)) + ..add(FlagProperty('active', value: active, ifTrue: 'active')); } } -class FBottomNavigationBarItemStyle {} +/// A [FBottomNavigationBar] item. +class FBottomNavigationBarItem { + /// The style. + final FBottomNavigationBarItemStyle? style; + + /// The icon. + final SvgAsset icon; + + /// The label. + final String label; + + /// Creates a [FBottomNavigationBarItem]. + const FBottomNavigationBarItem({ + required this.icon, + required this.label, + this.style, + }); +} + +/// [FBottomNavigationBarItem]'s style. +class FBottomNavigationBarItemStyle with Diagnosticable { + /// The icon's color when this item is active. + final Color activeIconColor; + + /// The icon's color when this item is inactive. + final Color inactiveIconColor; + + /// The icon's size. Defaults to `24`. + final double iconSize; + + /// The text's style when this item is active. + final TextStyle activeTextStyle; + + /// The text's style when this item is inactive. + final TextStyle inactiveTextStyle; + + /// Creates a [FBottomNavigationBarItemStyle]. + FBottomNavigationBarItemStyle({ + required this.activeIconColor, + required this.inactiveIconColor, + required this.iconSize, + required this.activeTextStyle, + required this.inactiveTextStyle, + }); + + /// Creates a [FBottomNavigationBarItemStyle] that inherits its properties from the given [FColorScheme] and [FTypography]. + FBottomNavigationBarItemStyle.inherit({required FColorScheme colorScheme, required FTypography typography}) + : activeIconColor = colorScheme.primary, + inactiveIconColor = colorScheme.foreground.withOpacity(0.5), + iconSize = 24, + activeTextStyle = typography.sm.copyWith(color: colorScheme.primary), + inactiveTextStyle = typography.sm.copyWith(color: colorScheme.foreground.withOpacity(0.5)); + + /// Returns a copy of this [FBottomNavigationBarItemStyle] with the given properties replaced. + /// + /// ```dart + /// final style = FBottomNavigationBarItemStyle( + /// activeIconColor: Colors.black, + /// inactiveIconColor: Colors.white, + /// ... + /// ); + /// + /// final copy = style.copyWith( + /// inactiveIconColor: Colors.blue, + /// ); + /// + /// print(copy.activeIconColor); // black + /// print(copy.inactiveIconColor); // blue + /// ``` + @useResult + FBottomNavigationBarItemStyle copyWith({ + Color? activeIconColor, + Color? inactiveIconColor, + double? iconSize, + TextStyle? activeTextStyle, + TextStyle? inactiveTextStyle, + }) => + FBottomNavigationBarItemStyle( + activeIconColor: activeIconColor ?? this.activeIconColor, + inactiveIconColor: inactiveIconColor ?? this.inactiveIconColor, + iconSize: iconSize ?? this.iconSize, + activeTextStyle: activeTextStyle ?? this.activeTextStyle, + inactiveTextStyle: inactiveTextStyle ?? this.inactiveTextStyle, + ); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(ColorProperty('activeIconColor', activeIconColor)) + ..add(ColorProperty('inactiveIconColor', inactiveIconColor)) + ..add(DiagnosticsProperty('iconSize', iconSize)) + ..add(DiagnosticsProperty('activeTextStyle', activeTextStyle)) + ..add(DiagnosticsProperty('inactiveTextStyle', inactiveTextStyle)); + } + + @override + bool operator ==(Object other) => + identical(this, other) || + other is FBottomNavigationBarItemStyle && + runtimeType == other.runtimeType && + activeIconColor == other.activeIconColor && + inactiveIconColor == other.inactiveIconColor && + iconSize == other.iconSize && + activeTextStyle == other.activeTextStyle && + inactiveTextStyle == other.inactiveTextStyle; + + @override + int get hashCode => + activeIconColor.hashCode ^ + inactiveIconColor.hashCode ^ + iconSize.hashCode ^ + activeTextStyle.hashCode ^ + inactiveTextStyle.hashCode; +}