From 422f604546d5f4319e3d92615e19ac6fdb21ef05 Mon Sep 17 00:00:00 2001 From: Pedro Massango Date: Wed, 3 Mar 2021 02:13:54 +0100 Subject: [PATCH 1/2] Null Safety migration --- CHANGELOG.md | 5 +++ README.md | 2 +- example/pubspec.yaml | 59 +++----------------------------- lib/src/navigation_bar.dart | 27 ++++++--------- lib/src/navigation_bar_item.dart | 4 +-- pubspec.yaml | 4 +-- 6 files changed, 25 insertions(+), 76 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c95f022..fb0f457 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ + +## 5.0.0-nullsafety.0 + +* Null Safety support + ## 4.1.0 * Added support RTL TextDirection. See (#22) diff --git a/README.md b/README.md index 50ff5b0..69b686d 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Follow these steps to use this library ```yaml dependencies: ... - titled_navigation_bar: ^4.1.0 + titled_navigation_bar: ^5.0.0-nullsafety.0 ``` ### Import the package diff --git a/example/pubspec.yaml b/example/pubspec.yaml index a466ba6..6172bad 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,28 +1,17 @@ name: example description: A new Flutter project. - -# The following defines the version and build number for your application. -# A version number is three numbers separated by dots, like 1.2.43 -# followed by an optional build number separated by a +. -# Both the version and the builder number may be overridden in flutter -# build by specifying --build-name and --build-number, respectively. -# In Android, build-name is used as versionName while build-number used as versionCode. -# Read more about Android versioning at https://developer.android.com/studio/publish/versioning -# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. -# Read more about iOS versioning at -# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html version: 1.0.0+1 environment: - sdk: ">=2.1.0 <3.0.0" + sdk: ">=2.12.0-0 <3.0.0" dependencies: flutter: sdk: flutter - # The following adds the Cupertino Icons font to your application. - # Use with the CupertinoIcons class for iOS style icons. - cupertino_icons: ^0.1.2 + titled_navigation_bar: + +dependencies_overrides: titled_navigation_bar: path: ../ @@ -30,45 +19,5 @@ dev_dependencies: flutter_test: sdk: flutter - -# For information on the generic Dart part of this file, see the -# following page: https://www.dartlang.org/tools/pub/pubspec - -# The following section is specific to Flutter. flutter: - - # The following line ensures that the Material Icons font is - # included with your application, so that you can use the icons in - # the material Icons class. uses-material-design: true - - # To add assets to your application, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg - # - images/a_dot_ham.jpeg - - # An image asset can refer to one or more resolution-specific "variants", see - # https://flutter.io/assets-and-images/#resolution-aware. - - # For details regarding adding assets from package dependencies, see - # https://flutter.io/assets-and-images/#from-packages - - # To add custom fonts to your application, add a fonts section here, - # in this "flutter" section. Each entry in this list should have a - # "family" key with the font family name, and a "fonts" key with a - # list giving the asset and other descriptors for the font. For - # example: - # fonts: - # - family: Schyler - # fonts: - # - asset: fonts/Schyler-Regular.ttf - # - asset: fonts/Schyler-Italic.ttf - # style: italic - # - family: Trajan Pro - # fonts: - # - asset: fonts/TrajanPro.ttf - # - asset: fonts/TrajanPro_Bold.ttf - # weight: 700 - # - # For details regarding fonts from package dependencies, - # see https://flutter.io/custom-fonts/#from-packages diff --git a/lib/src/navigation_bar.dart b/lib/src/navigation_bar.dart index df48ed3..d35f269 100644 --- a/lib/src/navigation_bar.dart +++ b/lib/src/navigation_bar.dart @@ -8,32 +8,28 @@ import 'navigation_bar_item.dart'; class TitledBottomNavigationBar extends StatefulWidget { final bool reverse; final Curve curve; - final Color activeColor; - final Color inactiveColor; - final Color inactiveStripColor; - final Color indicatorColor; + final Color? activeColor; + final Color? inactiveColor; + final Color? inactiveStripColor; + final Color? indicatorColor; final bool enableShadow; int currentIndex; final ValueChanged onTap; final List items; TitledBottomNavigationBar({ - Key key, + Key? key, this.reverse = false, this.curve = Curves.linear, - @required this.onTap, - @required this.items, + required this.onTap, + required this.items, this.activeColor, this.inactiveColor, this.inactiveStripColor, this.indicatorColor, this.enableShadow = true, this.currentIndex = 0, - }) : assert(items != null), - assert(items.length >= 2 && items.length <= 5), - assert(onTap != null), - assert(currentIndex != null), - assert(enableShadow != null), + }) : assert(items.length >= 2 && items.length <= 5), super(key: key); @override @@ -51,15 +47,15 @@ class _TitledBottomNavigationBarState extends State { List get items => widget.items; double width = 0; - Color activeColor; + Color? activeColor; Duration duration = Duration(milliseconds: 270); double _getIndicatorPosition(int index) { var isLtr = Directionality.of(context) == TextDirection.ltr; if (isLtr) - return lerpDouble(-1.0, 1.0, index / (items.length - 1)); + return lerpDouble(-1.0, 1.0, index / (items.length - 1))!; else - return lerpDouble(1.0, -1.0, index / (items.length - 1)); + return lerpDouble(1.0, -1.0, index / (items.length - 1))!; } @override @@ -79,7 +75,6 @@ class _TitledBottomNavigationBarState extends State { : null, ), child: Stack( - overflow: Overflow.visible, children: [ Positioned( top: INDICATOR_HEIGHT, diff --git a/lib/src/navigation_bar_item.dart b/lib/src/navigation_bar_item.dart index 928be87..16ae82f 100644 --- a/lib/src/navigation_bar_item.dart +++ b/lib/src/navigation_bar_item.dart @@ -6,8 +6,8 @@ class TitledNavigationBarItem { final Color backgroundColor; TitledNavigationBarItem({ - @required this.icon, - @required this.title, + required this.icon, + required this.title, this.backgroundColor = Colors.white, }); } diff --git a/pubspec.yaml b/pubspec.yaml index 60e7b77..bcf308f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,10 +1,10 @@ name: titled_navigation_bar description: A beautiful, clean and simple bottom navigation bar with smooth animation on click. This package is high customizable, read more bellow for more details. -version: 4.1.0 +version: 5.0.0-nullsafety.0 homepage: https://github.com/pedromassango/titled_navigation_bar environment: - sdk: ">=2.2.2 <3.0.0" + sdk: ">=2.12.0-0 <3.0.0" dependencies: flutter: From 1061dfd868ad92d84d2d91df080e49af05f767dc Mon Sep 17 00:00:00 2001 From: Pedro Massango Date: Wed, 3 Mar 2021 02:46:17 +0100 Subject: [PATCH 2/2] Added some new features --- CHANGELOG.md | 3 +++ example/lib/main.dart | 12 +++++---- example/pubspec.yaml | 2 +- lib/src/navigation_bar.dart | 45 +++++++++++++++++++++++++------- lib/src/navigation_bar_item.dart | 12 ++++++++- 5 files changed, 57 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fb0f457..c017437 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## 5.0.0-nullsafety.0 * Null Safety support +* [breaking change] TitledNavigationBarItem.icon is now of type Widget rather than IconData. +* Added TitledBottomNavigationBar.height +* Added TitledBottomNavigationBar.indicatorHeight ## 4.1.0 diff --git a/example/lib/main.dart b/example/lib/main.dart index 7cb7e7b..f0cf605 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -20,11 +20,11 @@ class HomePage extends StatefulWidget { class _HomePageState extends State { final List items = [ - TitledNavigationBarItem(title: Text('Home'), icon: Icons.home), - TitledNavigationBarItem(title: Text('Search'), icon: Icons.search), - TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel), - TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart), - TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline), + TitledNavigationBarItem(title: Text('Home'), icon: Icon(Icons.home)), + TitledNavigationBarItem(title: Text('Search'), icon: Icon(Icons.search)), + TitledNavigationBarItem(title: Text('Bag'), icon: Icon(Icons.card_travel)), + TitledNavigationBarItem(title: Text('Orders'), icon: Icon(Icons.shopping_cart)), + TitledNavigationBarItem(title: Text('Profile'), icon: Icon(Icons.person_outline)), ]; bool navBarMode = false; @@ -50,6 +50,8 @@ class _HomePageState extends State { ), ), bottomNavigationBar: TitledBottomNavigationBar( + height: 60, + indicatorHeight: 2, onTap: (index) => print("Selected Index: $index"), reverse: navBarMode, curve: Curves.easeInBack, diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 6172bad..a51223f 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -11,7 +11,7 @@ dependencies: titled_navigation_bar: -dependencies_overrides: +dependency_overrides: titled_navigation_bar: path: ../ diff --git a/lib/src/navigation_bar.dart b/lib/src/navigation_bar.dart index d35f269..dafd98c 100644 --- a/lib/src/navigation_bar.dart +++ b/lib/src/navigation_bar.dart @@ -4,6 +4,11 @@ import 'package:flutter/material.dart'; import 'navigation_bar_item.dart'; +const double DEFAULT_BAR_HEIGHT = 60; + +const double DEFAULT_INDICATOR_HEIGHT = 2; + + // ignore: must_be_immutable class TitledBottomNavigationBar extends StatefulWidget { final bool reverse; @@ -14,9 +19,27 @@ class TitledBottomNavigationBar extends StatefulWidget { final Color? indicatorColor; final bool enableShadow; int currentIndex; + + /// Called when a item is tapped. + /// + /// This provide the selected item's index. final ValueChanged onTap; + + /// The items of this navigation bar. + /// + /// This should contain at least two items and five at most. final List items; + /// The selected item is indicator height. + /// + /// Defaults to [DEFAULT_INDICATOR_HEIGHT]. + final double indicatorHeight; + + /// Change the navigation bar's size. + /// + /// Defaults to [DEFAULT_BAR_HEIGHT]. + final double height; + TitledBottomNavigationBar({ Key? key, this.reverse = false, @@ -29,6 +52,8 @@ class TitledBottomNavigationBar extends StatefulWidget { this.indicatorColor, this.enableShadow = true, this.currentIndex = 0, + this.height = DEFAULT_BAR_HEIGHT, + this.indicatorHeight = DEFAULT_INDICATOR_HEIGHT, }) : assert(items.length >= 2 && items.length <= 5), super(key: key); @@ -37,8 +62,6 @@ class TitledBottomNavigationBar extends StatefulWidget { } class _TitledBottomNavigationBarState extends State { - static const double BAR_HEIGHT = 60; - static const double INDICATOR_HEIGHT = 2; bool get reverse => widget.reverse; @@ -64,7 +87,7 @@ class _TitledBottomNavigationBarState extends State { activeColor = widget.activeColor ?? Theme.of(context).indicatorColor; return Container( - height: BAR_HEIGHT + MediaQuery.of(context).viewPadding.bottom, + height: widget.height + MediaQuery.of(context).viewPadding.bottom, width: width, decoration: BoxDecoration( color: widget.inactiveStripColor ?? Theme.of(context).cardColor, @@ -77,7 +100,7 @@ class _TitledBottomNavigationBarState extends State { child: Stack( children: [ Positioned( - top: INDICATOR_HEIGHT, + top: widget.indicatorHeight, child: Row( crossAxisAlignment: CrossAxisAlignment.end, children: items.map((item) { @@ -100,7 +123,7 @@ class _TitledBottomNavigationBarState extends State { child: Container( color: widget.indicatorColor ?? activeColor, width: width / items.length, - height: INDICATOR_HEIGHT, + height: widget.indicatorHeight, ), ), ), @@ -109,7 +132,7 @@ class _TitledBottomNavigationBarState extends State { ); } - _select(int index) { + void _select(int index) { widget.currentIndex = index; widget.onTap(widget.currentIndex); @@ -117,9 +140,11 @@ class _TitledBottomNavigationBarState extends State { } Widget _buildIcon(TitledNavigationBarItem item) { - return Icon( - item.icon, - color: reverse ? widget.inactiveColor : activeColor, + return IconTheme( + data: IconThemeData( + color: reverse ? widget.inactiveColor : activeColor, + ), + child: item.icon, ); } @@ -133,7 +158,7 @@ class _TitledBottomNavigationBarState extends State { Widget _buildItemWidget(TitledNavigationBarItem item, bool isSelected) { return Container( color: item.backgroundColor, - height: BAR_HEIGHT, + height: widget.height, width: width / items.length, child: Stack( alignment: AlignmentDirectional.center, diff --git a/lib/src/navigation_bar_item.dart b/lib/src/navigation_bar_item.dart index 16ae82f..8a1bbe9 100644 --- a/lib/src/navigation_bar_item.dart +++ b/lib/src/navigation_bar_item.dart @@ -1,8 +1,18 @@ import 'package:flutter/material.dart'; class TitledNavigationBarItem { + + /// The title of this item. final Widget title; - final IconData icon; + + /// The icon of this item. + /// + /// If this is not a [Icon] widget, you must handle the color manually. + final Widget icon; + + /// The background color of this item. + /// + /// Defaults to [Colors.white]. final Color backgroundColor; TitledNavigationBarItem({