Bottom Bar Page Transition | Coderz Repository

bottom_bar_page_transition

Last updated:

0 purchases

bottom_bar_page_transition Image
bottom_bar_page_transition Images

Free

Languages

Categories

Add to Cart

Description:

bottom bar page transition

bottom_bar_page_transition #
Flutter package to display transition for switching pages beween bottom bar page navigation.
Previews #





Features #

Can be used to show animation while swiching pages in bottom navigation bar
Add global key to widget to avoid reinitate widget


Getting Started #
Installing #
To use this package, add bottom_bar_page_transition as a dependency in your pubspec.yaml file.
In your dart file import the library by
import 'package:bottom_bar_page_transition/bottom_bar_page_transition.dart';
copied to clipboard
In build method
return Scaffold(
body: BottomBarPageTransition(
builder: (_, index) => _getBody(index),
currentIndex: _currentPage,
totalLength: totalPage,
transitionType: transitionType,
transitionDuration: duration,
transitionCurve: curve,
),
bottomNavigationBar: _getBottomBar(),
);
copied to clipboard
create `_getBody(int index) method to return body of the widget
Widget _getBody(int index) {
return CustomScrollView(
//key:_keys[index] //add keys to avoid initiate child widget after animation ends
slivers: <Widget>[
SliverAppBar(
title: Text('Page $index'),
),
SliverFillRemaining(
child: Center(child: Text('Page $index')),
)
],
);
}
copied to clipboard
create _getBottomBar() to create bottom bar
Widget _getBottomBar() {
return BottomNavigationBar(
currentIndex: _currentPage,
onTap: (index) {
_currentPage = index;
setState(() {});
},
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
items: List.generate(
totalPage,
(index) => BottomNavigationBarItem(
icon: Icon(icons[index]),
title: Text(names[index]),
)));
}
copied to clipboard
Parameter Description #
builder - function to return content of widget
currentIndex - current displaying page
totalLength - total number of pages
transitionType - tractionType can be circle/slide/fade
transitionDuration - Duration of animation
transitionCurve - Curve is animation curve and they are used to adjust the rate of change of an animation over time

License:

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Files In This Product: (if this is empty don't purchase this product)

Customer Reviews

There are no reviews.