Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Simplified customizations on padding / itemPadding / corners for the main container / activeOpacity / shadows #82

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Simplified customizations on padding / itemPadding / corners for the main container / activeOpacity / shadows #82

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
714b6f6
Added shadows, rounded corners and more customization options.
Aug 22, 2020
94a2bc7
Changes as requested.
pawelpetruch Dec 21, 2020
4c1c973
corners for main container
viktar-d Jun 13, 2021
34e428d
add elevation customization for items
viktar-d Jun 13, 2021
190aeaf
add periods to comments, change default for itemPadding, simplify cor…
viktar-d Jul 2, 2021
34a7e54
Merge remote-tracking branch 'pedro/master'
viktar-d Jul 2, 2021
92cbc01
allow to draw a border around a container when required
viktar-d Jul 8, 2021
938e2b8
allow to draw a border around an item when required, group item param…
viktar-d Jul 8, 2021
5c9998c
allow to draw a border around an active item when required
viktar-d Jul 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 79 additions & 16 deletions lib/bottom_navy_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,25 @@ class BottomNavyBar extends StatelessWidget {
Key? key,
this.selectedIndex = 0,
this.showElevation = true,
this.showItemElevation = false,
this.iconSize = 24,
this.backgroundColor,
this.itemCornerRadius = 50,
this.itemBorder,
this.activeItemBorder,
this.containerHeight = 56,
this.barBorder,
this.barBorderRadius = BorderRadius.zero,
this.barElevationShadow = const BoxShadow(
color: Colors.black12,
blurRadius: 2,
),
this.itemElevationShadow = const BoxShadow(
color: Colors.black12,
blurRadius: 2,
),
this.padding = const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
this.itemPadding = const EdgeInsets.symmetric(horizontal: 4),
this.animationDuration = const Duration(milliseconds: 270),
this.mainAxisAlignment = MainAxisAlignment.spaceBetween,
required this.items,
Expand Down Expand Up @@ -56,9 +71,36 @@ class BottomNavyBar extends StatelessWidget {
/// The [items] corner radius, if not set, it defaults to 50.
final double itemCornerRadius;

/// Whether the [items] should be elevated. Defaults to false.
final bool showItemElevation;

/// The shadow to be rendered when elevated for each of [items].
final BoxShadow itemElevationShadow;

/// The border to show around each of [items].
final Border? itemBorder;

/// The border to show around selected [items].
final Border? activeItemBorder;

/// The shadow to be rendered when elevated.
final BoxShadow barElevationShadow;

/// Defines the bottom navigation bar height. Defaults to 56.
final double containerHeight;

/// Defines corners for container, if not set, it defaults to 0.
final BorderRadius barBorderRadius;

/// Defines border for container.
final Border? barBorder;

/// Defines padding for the container, defaults to EdgeInsets.symmetric(vertical: 6, horizontal: 8).
final EdgeInsets padding;

/// Defines padding for the item in a container, defaults to EdgeInsets.symmetric(vertical: 10, horizontal: 4).
final EdgeInsets itemPadding;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comments must end with a period!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's easy, will do


/// Used to configure the animation curve. Defaults to [Curves.linear].
final Curve curve;

Expand All @@ -70,32 +112,35 @@ class BottomNavyBar extends StatelessWidget {
decoration: BoxDecoration(
color: bgColor,
boxShadow: [
if (showElevation)
const BoxShadow(
color: Colors.black12,
blurRadius: 2,
),
if (showElevation) barElevationShadow,
],
borderRadius: barBorderRadius,
border: barBorder,
),
child: SafeArea(
child: Container(
width: double.infinity,
height: containerHeight,
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
padding: padding,
child: Row(
mainAxisAlignment: mainAxisAlignment,
children: items.map((item) {
var index = items.indexOf(item);
return GestureDetector(
onTap: () => onItemSelected(index),
child: _ItemWidget(
item: item,
iconSize: iconSize,
isSelected: index == selectedIndex,
backgroundColor: bgColor,
itemCornerRadius: itemCornerRadius,
animationDuration: animationDuration,
curve: curve,
item: item,
iconSize: iconSize,
isSelected: index == selectedIndex,
backgroundColor: bgColor,
itemCornerRadius: itemCornerRadius,
animationDuration: animationDuration,
curve: curve,
itemPadding: itemPadding,
showItemElevation: showItemElevation,
itemElevationShadow: itemElevationShadow,
itemBorder: itemBorder,
activeItemBorder: activeItemBorder,
),
);
}).toList(),
Expand All @@ -114,6 +159,11 @@ class _ItemWidget extends StatelessWidget {
final double itemCornerRadius;
final Duration animationDuration;
final Curve curve;
final EdgeInsets itemPadding;
final bool showItemElevation;
final BoxShadow itemElevationShadow;
final Border? itemBorder;
final Border? activeItemBorder;

const _ItemWidget({
Key? key,
Expand All @@ -123,7 +173,12 @@ class _ItemWidget extends StatelessWidget {
required this.animationDuration,
required this.itemCornerRadius,
required this.iconSize,
required this.itemPadding,
required this.showItemElevation,
required this.itemElevationShadow,
this.curve = Curves.linear,
this.itemBorder,
this.activeItemBorder,
}) : super(key: key);

@override
Expand All @@ -137,9 +192,12 @@ class _ItemWidget extends StatelessWidget {
duration: animationDuration,
curve: curve,
decoration: BoxDecoration(
color:
isSelected ? item.activeColor.withOpacity(0.2) : backgroundColor,
color: isSelected ? item.activeBackgroundColor : backgroundColor,
borderRadius: BorderRadius.circular(itemCornerRadius),
border: isSelected ? activeItemBorder : itemBorder,
boxShadow: [
if (showItemElevation) itemElevationShadow,
],
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
Expand All @@ -166,7 +224,7 @@ class _ItemWidget extends StatelessWidget {
if (isSelected)
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 4),
padding: itemPadding,
Comment on lines -169 to +227
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to make sure to not break any UI with those changes. So far, removing the horizontal padding may break some existing users

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll change the defaults for itemPadding to be EdgeInsets.symmetric(horizontal: 4), that way it won't break anyone's apps

child: DefaultTextStyle.merge(
style: TextStyle(
color: item.activeColor,
Expand All @@ -193,6 +251,7 @@ class BottomNavyBarItem {
required this.icon,
required this.title,
this.activeColor = Colors.blue,
this.activeBackgroundColor = const Color(0x332196F3),
this.textAlign,
this.inactiveColor,
});
Expand All @@ -207,6 +266,10 @@ class BottomNavyBarItem {
/// to [Colors.blue].
final Color activeColor;

/// The [icon] and [title] color defined when this item is selected. Defaults
/// to [Colors.blue].
final Color activeBackgroundColor;

/// The [icon] and [title] color defined when this item is not selected.
final Color? inactiveColor;

Expand Down