Comments (9)
neilgoyal
commented on August 20, 2024
from custom_bubble_navigation_bar.
rickywen911
commented on August 20, 2024
@Neildagr8 I am not quite understand what is swipe pages. Would you mind show me some examples?
from custom_bubble_navigation_bar.
neilgoyal
commented on August 20, 2024
I mean the ability to swipe and change pages
from custom_bubble_navigation_bar.
rickywen911
commented on August 20, 2024
@Neildagr8 I see. What you mean is combine this bar with a tab controller?
from custom_bubble_navigation_bar.
neilgoyal
commented on August 20, 2024
Yes
from custom_bubble_navigation_bar.
rickywen911
commented on August 20, 2024
@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.
neilgoyal
commented on August 20, 2024
@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.
rickywen911
commented on August 20, 2024
@Neildagr8 Would you mind send me a sample code to try it out?
from custom_bubble_navigation_bar.
SilkeNL
commented on August 20, 2024
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.