Comments (9)
from custom_bubble_navigation_bar.
@Neildagr8 I am not quite understand what is swipe pages. Would you mind show me some examples?
from custom_bubble_navigation_bar.
I mean the ability to swipe and change pages
from custom_bubble_navigation_bar.
@Neildagr8 I see. What you mean is combine this bar with a tab controller?
from custom_bubble_navigation_bar.
Yes
from custom_bubble_navigation_bar.
@Neildagr8 I think it's possible. There is parameter in navigation bar called currentIndex
. All you need to do is when the index of tabcontroller has changed, change the currentIndex
at the same time.
from custom_bubble_navigation_bar.
@rickywen911 I have used that, but whenever I swipe and change the page, the Selected Icon updates after a very long time
from custom_bubble_navigation_bar.
@Neildagr8 Would you mind send me a sample code to try it out?
from custom_bubble_navigation_bar.
This is how I've done it. Sorry for the terrible format.
` class MainScreenState extends State {
final _controller = PageController(initialPage: initialPage);
int _activeIndex = initialPage;
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF279B40),
extendBody: true,
bottomNavigationBar: Stack(
alignment: AlignmentDirectional.bottomCenter,
overflow: Overflow.visible,
children: [
SizedBox(
height: MediaQuery.of(context).size.height / 18.4,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF279B40), Color(0xFF7FCC27)])),
),
),
Positioned(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 0,
blurRadius: 100,
offset: Offset(0, 0),
),
],
),
child: CustomNavigationBar(
elevation: 5.0,
selectedColor: Colors.grey[600],
strokeColor: Colors.grey[600],
unSelectedColor: Colors.grey[400],
backgroundColor: Colors.white,
borderRadius: Radius.circular(16.0),
isFloating: true,
items: [
CustomNavigationBarItem(
icon: Icon(Icons.notifications),
title: Text(
"Alerts",
style: TextStyle(
fontSize: 12, fontWeight: FontWeight.w600),
),
),
CustomNavigationBarItem(
icon: Icon(Icons.widgets),
title: Text(
"Dashboard",
style: TextStyle(
fontSize: 12, fontWeight: FontWeight.w600),
),
),
CustomNavigationBarItem(
icon: Icon(Icons.person),
title: Text(
"Profile",
style: TextStyle(
fontSize: 12, fontWeight: FontWeight.w600),
),
),
],
currentIndex: _activeIndex,
onTap: (page) {
_controller.animateToPage(
page,
duration: const Duration(milliseconds: 250),
curve: Curves.fastOutSlowIn,
);
},
),
),
),
],
),
body: Container(
child: PageView(
controller: _controller,
scrollDirection: Axis.horizontal,
physics: const AlwaysScrollableScrollPhysics(),
onPageChanged: (value) => {
setState(() {
_activeIndex = value;
})
},
//Your different pages
children: [AlertingPage(), DashboardPage(), profileScreenBloc()],
)));
}
} `
from custom_bubble_navigation_bar.
Related Issues (16)
- Circular border HOT 2
- Seems very nice, is that possible to add blur effect to background? HOT 9
- elevation not working HOT 1
- Set the width of a floating navbar HOT 1
- When a CustomNavigationBarItem takes up more space, items go off center HOT 3
- Requesting Flutter Null Safety Support HOT 2
- Exception while testing HOT 8
- The animation doesn't end with a quick switch. HOT 6
- Padding problem HOT 3
- Bug on dispose HOT 3
- The example doesn't compile
- This attribute can be opened about ListView controller.
- support iOS dark mode ? HOT 3
- Increasing the gesture area per CustomNavigationBarItem HOT 5
- Use Svg rather than IconData HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from custom_bubble_navigation_bar.