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

Added shadows, rounded corners and more customization options. #67

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

Added shadows, rounded corners and more customization options. #67

Changes from all commits
Commits
Show all changes
2 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
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: 72 additions & 23 deletions lib/bottom_navy_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ class BottomNavyBar extends StatelessWidget {
final MainAxisAlignment mainAxisAlignment;
final double itemCornerRadius;
final double containerHeight;
final double cornerRadius;
final Color shadowColor;
final double blurRadius;
final double spreadRadius;
final double shadowOffsetX;
final double shadowOffsetY;
final double activeOpacity;
final double inactiveOpacity;
final double verticalPadding;
final double horizontalPadding;
final double verticalItemPadding;
final double horizontalItemPadding;
final Curve curve;

BottomNavyBar({
Expand All @@ -24,6 +36,18 @@ class BottomNavyBar extends StatelessWidget {
this.backgroundColor,
this.itemCornerRadius = 50,
this.containerHeight = 56,
this.cornerRadius = 0,
this.shadowColor = Colors.black,
this.blurRadius = 0,
this.spreadRadius = 0,
this.shadowOffsetX = 0,
this.shadowOffsetY = 0,
this.activeOpacity = 0.1,
this.inactiveOpacity = 1.0,
this.verticalPadding = 6,
this.horizontalPadding = 8,
this.verticalItemPadding = 10,
this.horizontalItemPadding = 4,
this.animationDuration = const Duration(milliseconds: 270),
this.mainAxisAlignment = MainAxisAlignment.spaceBetween,
@required this.items,
Expand All @@ -47,17 +71,24 @@ class BottomNavyBar extends StatelessWidget {
color: bgColor,
boxShadow: [
if (showElevation)
const BoxShadow(
color: Colors.black12,
blurRadius: 2,
BoxShadow(
color: shadowColor,
blurRadius: blurRadius,
spreadRadius: spreadRadius,
offset: Offset(shadowOffsetX, shadowOffsetY),
),
],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(cornerRadius),
topRight: Radius.circular(cornerRadius),
),
),
child: SafeArea(
child: Container(
width: double.infinity,
height: containerHeight,
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
padding: EdgeInsets.symmetric(
vertical: verticalPadding, horizontal: horizontalPadding),
child: Row(
mainAxisAlignment: mainAxisAlignment,
children: items.map((item) {
Expand All @@ -72,6 +103,10 @@ class BottomNavyBar extends StatelessWidget {
itemCornerRadius: itemCornerRadius,
animationDuration: animationDuration,
curve: curve,
activeOpacity: activeOpacity,
inactiveOpacity: inactiveOpacity,
verticalItemPadding: verticalItemPadding,
horizontalItemPadding: horizontalItemPadding,
),
);
}).toList(),
Expand All @@ -90,6 +125,10 @@ class _ItemWidget extends StatelessWidget {
final double itemCornerRadius;
final Duration animationDuration;
final Curve curve;
final double activeOpacity;
final double inactiveOpacity;
final double verticalItemPadding;
final double horizontalItemPadding;

const _ItemWidget({
Key key,
Expand All @@ -99,6 +138,10 @@ class _ItemWidget extends StatelessWidget {
@required this.animationDuration,
@required this.itemCornerRadius,
@required this.iconSize,
@required this.activeOpacity,
@required this.inactiveOpacity,
@required this.verticalItemPadding,
@required this.horizontalItemPadding,
this.curve = Curves.linear,
}) : assert(isSelected != null),
assert(item != null),
Expand All @@ -107,6 +150,7 @@ class _ItemWidget extends StatelessWidget {
assert(itemCornerRadius != null),
assert(iconSize != null),
assert(curve != null),
assert(inactiveOpacity != null),
super(key: key);

@override
Expand All @@ -120,8 +164,9 @@ class _ItemWidget extends StatelessWidget {
duration: animationDuration,
curve: curve,
decoration: BoxDecoration(
color:
isSelected ? item.activeColor.withOpacity(0.2) : backgroundColor,
color: isSelected
? item.activeColor.withOpacity(activeOpacity)
: backgroundColor,
borderRadius: BorderRadius.circular(itemCornerRadius),
),
child: SingleChildScrollView(
Expand All @@ -135,29 +180,30 @@ class _ItemWidget extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconTheme(
data: IconThemeData(
size: iconSize,
color: isSelected
? item.activeColor.withOpacity(1)
: item.inactiveColor == null
? item.activeColor
: item.inactiveColor,
Container(
child: FittedBox(
child: Opacity(
opacity: isSelected ? 1.0 : inactiveOpacity,
child: item.icon,
),
),
child: item.icon,
),
if (isSelected)
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 4),
child: DefaultTextStyle.merge(
style: TextStyle(
color: item.activeColor,
fontWeight: FontWeight.bold,
padding: EdgeInsets.symmetric(
vertical: verticalItemPadding,
horizontal: horizontalItemPadding),
Comment on lines +194 to +196
Copy link
Owner

Choose a reason for hiding this comment

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

Hi @pawelpetruch
Thanks for this amazing contibution. Those two proerties could just be a Padding object so that users will have the hability to change a veri specific padding (left only, right only, top only, etc..)

Thank you

Sorry for the later feedback!

child: FittedBox(
child: DefaultTextStyle.merge(
style: TextStyle(
color: item.activeColor,
fontWeight: FontWeight.bold,
),
maxLines: 1,
textAlign: item.textAlign,
child: item.title,
),
maxLines: 1,
textAlign: item.textAlign,
child: item.title,
),
),
),
Expand All @@ -170,6 +216,9 @@ class _ItemWidget extends StatelessWidget {
}
}

/// The BottomNavyBar's item. Used to configure each item of the navigation bar.
/// [icon] required. The widget on the left of this item.
/// [title] required. The widget on the right of this item.
class BottomNavyBarItem {
final Widget icon;
final Widget title;
Expand Down