Add sliding_clipped_nav_bar:
to your pubspec.yaml
dependencies then run flutter pub get
Add from git [Latest and experimental version]
dependencies:
sliding_clipped_nav_bar:
git:
url: https://github.com/watery-desert/sliding_clipped_nav_bar
Add from pub [Stable]
dependencies:
sliding_clipped_nav_bar:
Then import the package to use
import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';
Add SlidingClippedNavBar()
to bottomNavigationBar
property of Scaffold()
and add PageView()
to body
with NeverScrollableScrollPhysics()
don't try to upate the seleted index from onPageChanged
or will see some weird behaviour. You can use Stack()
or AnimatedSwitcher()
for custom page transition animation.
API reference
barItems → List<BarItem>
selectedIndex → int
iconSize → double
fontSize → double
fontWeight → FontWeight
fontStyle → FontStyle
activeColor → Color
inactiveColor → Color?
onButtonPressed → OnButtonPressCallback
backgroundColor → Color
Toolbar icons animation by Cuberto
Don't make icon size too big.
Using SlidingClippedNavBar()
when you want global active and inactive color.
return Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: controller,
...
),
bottomNavigationBar: SlidingClippedNavBar(
backgroundColor: Colors.white,
onButtonPressed: (index) {
setState(() {
selectedIndex = index;
});
controller.animateToPage(selectedIndex,
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutQuad);
},
iconSize: 30,
activeColor: Color(0xFF01579B),
selectedIndex: selectedIndex,
barItems: [
BarItem(
icon: Icons.event,
title: 'Events',
),
BarItem(
icon: Icons.search_rounded,
title: 'Search',
),
/// Add more BarItem if you want
],
),
);
SlidingClippedNavBar.colorful()
when you want to set individual item active & inactive color.return Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: controller,
...
),
bottomNavigationBar: SlidingClippedNavBar.colorful(
backgroundColor: Colors.white,
onButtonPressed: (index) {
setState(() {
selectedIndex = index;
});
controller.animateToPage(selectedIndex,
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutQuad);
},
iconSize: 30,
selectedIndex: selectedIndex,
barItems: [
BarItem(
icon: Icons.event,
title: 'Events',
activeColor: Colors.amber,
inactiveColor: Colors.red,
),
BarItem(
icon: Icons.search_rounded,
title: 'Search',
activeColor: Colors.red,
inactiveColor: Colors.green,
),
/// Add more BarItem if you want
],
),
);
The height must be constant because the animation is in vertical direction. According to me 60 is perfect. But if you think needs to be reduced then please create an issue with a screenshot. I will see if I can do something.
Wrap SlidingClippedNavBar
with DecoratedBox
or Container
and pass BoxDecoration
to decoration
property. BoxDecoration
takes list of boxShadow
there you can pass your drop shadow.
DecoratedBox(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 4),
blurRadius: 8.0)
],
),
child: SlidingClippedNavBar()
)
Wrap SlidingClippedNavBar
with ClipRRect and pass BorderRadius
to borderRadius
property.
ClipRRect(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(16),
),
child: SlidingClippedNavBar(
)
All flutter packages
➜ Sliding Clipped Nav Bar
● Water Drop Nav Bar
● Swipeable Tile
● Loading Animation Widget
Run this command:
With Flutter:
$ flutter pub add sliding_clipped_nav_bar
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
sliding_clipped_nav_bar: ^3.1.0+4
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';
import 'package:flutter/material.dart';
import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
canvasColor: Color.fromARGB(255, 232, 234, 222),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PageController _pageController;
int selectedIndex = 0;
bool _colorful = false;
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: selectedIndex);
}
void onButtonPressed(int index) {
setState(() {
selectedIndex = index;
});
_pageController.animateToPage(selectedIndex,
duration: const Duration(milliseconds: 400), curve: Curves.easeOutQuad);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
SafeArea(
child: SwitchListTile(
title: const Text('Colorful Nav bar'),
value: _colorful,
onChanged: (bool value) {
setState(() {
_colorful = !_colorful;
});
},
)),
Expanded(
child: PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _pageController,
children: _listOfWidget,
),
),
],
),
bottomNavigationBar: _colorful
? SlidingClippedNavBar.colorful(
backgroundColor: Colors.white,
onButtonPressed: onButtonPressed,
iconSize: 30,
// activeColor: const Color(0xFF01579B),
selectedIndex: selectedIndex,
barItems: <BarItem>[
BarItem(
icon: Icons.event,
title: 'Events',
activeColor: Colors.blue,
inactiveColor: Colors.orange,
),
BarItem(
icon: Icons.search_rounded,
title: 'Search',
activeColor: Colors.yellow,
inactiveColor: Colors.green,
),
BarItem(
icon: Icons.bolt_rounded,
title: 'Energy',
activeColor: Colors.blue,
inactiveColor: Colors.red,
),
BarItem(
icon: Icons.tune_rounded,
title: 'Settings',
activeColor: Colors.cyan,
inactiveColor: Colors.purple,
),
],
)
: SlidingClippedNavBar(
backgroundColor: Colors.white,
onButtonPressed: onButtonPressed,
iconSize: 30,
activeColor: const Color(0xFF01579B),
selectedIndex: selectedIndex,
barItems: <BarItem>[
BarItem(
icon: Icons.event,
title: 'Events',
),
BarItem(
icon: Icons.search_rounded,
title: 'Search',
),
BarItem(
icon: Icons.bolt_rounded,
title: 'Energy',
),
BarItem(
icon: Icons.tune_rounded,
title: 'Settings',
),
],
),
);
}
}
// icon size:24 for fontAwesomeIcons
// icons size: 30 for MaterialIcons
List<Widget> _listOfWidget = <Widget>[
Container(
alignment: Alignment.center,
child: const Icon(
Icons.event,
size: 56,
color: Colors.brown,
),
),
Container(
alignment: Alignment.center,
child: const Icon(
Icons.search,
size: 56,
color: Colors.brown,
),
),
Container(
alignment: Alignment.center,
child: const Icon(
Icons.bolt,
size: 56,
color: Colors.brown,
),
),
Container(
alignment: Alignment.center,
child: const Icon(
Icons.tune_rounded,
size: 56,
color: Colors.brown,
),
),
];
Download details:
Author: waterydesert.com
Source: https://github.com/watery-desert/sliding_clipped_nav_bar