bottom_bar_page_transition 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • new62

bottom_bar_page_transition #

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

Previews #

Circular Slide Fade

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';

In build method

return Scaffold(
      body: BottomBarPageTransition(
        builder: (_, index) => _getBody(index),
        currentIndex: _currentPage,
        totalLength: totalPage,
        transitionType: transitionType,
        transitionDuration: duration,
        transitionCurve: curve,
      ),
      bottomNavigationBar: _getBottomBar(),
    );

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')),
        )
      ],
    );
  }

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]),
                )));
  }

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

[0.0.1] - Initial Release. #

  • Initial release.

[0.0.2] - Changed Description. #

  • Changed description about the package.

[1.0.0] - Changed Description. #

  • Added more details about the package.

[1.0.1] - Changed preview image width. #

example/lib/main.dart

import 'package:bottom_bar_page_transition/bottom_bar_page_transition.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CircularHomePage(),
    );
  }
}

class CircularHomePage extends StatefulWidget {
  @override
  _CircularHomePageState createState() => _CircularHomePageState();
}

class _CircularHomePageState extends State<CircularHomePage>
    with TickerProviderStateMixin {
  static const int totalPage = 4;
  static const List<String> names = [
    'Home',
    'Type',
    'Duration',
    'Curve',
  ];

  List<IconData> icons = [
    Icons.home,
    Icons.movie,
    Icons.timer,
    Icons.multiline_chart
  ];

  static const List<Color> colors = [
    Colors.blueGrey,
    Colors.teal,
    Colors.blue,
    Colors.brown
  ];

  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BottomBarPageTransition(
        builder: (_, index) => _getBody(index),
        currentIndex: _currentPage,
        totalLength: totalPage,
        transitionType: transitionType,
        transitionDuration: duration,
        transitionCurve: curve,
      ),
      bottomNavigationBar: _getBottomBar(),
    );
  }

  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]),
                )));
  }

  Duration duration = Duration(milliseconds: 300);
  Curve curve = Curves.ease;
  TransitionType transitionType = TransitionType.circular;
  String selectedDuration = '300ms';
  String selectedTransactionType = 'Circular';
  String selectedCurve = 'Ease';

  Widget _getBody(int index) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text(selectedTransactionType),
          backgroundColor: <Color>[
            Colors.blue,
            Colors.indigo,
            Colors.blueGrey,
            Colors.green
          ][index],
        ),
        SliverFillRemaining(
          child: Container(
            color: colors[index],
            padding: EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Text(names[index],
                    style: TextStyle(fontSize: 50, color: Colors.white)),
                if (index == 1)
                  _getMenuButton(
                      <String>['Circular', 'Slide', 'Fade'],
                      selectedTransactionType,
                      (_) => setState(() {
                            selectedTransactionType = _;
                            if (_ == 'Circular')
                              transitionType = TransitionType.circular;
                            else if (_ == 'Slide')
                              transitionType = TransitionType.slide;
                            else if (_ == 'Fade')
                              transitionType = TransitionType.fade;
                          })),
                if (index == 2)
                  _getMenuButton(
                      <String>['300ms', '500ms', '1s', '2s'],
                      selectedDuration,
                      (_) => setState(() {
                            selectedDuration = _;
                            if (_ == '300ms')
                              duration = Duration(milliseconds: 300);
                            else if (_ == '500ms')
                              duration = Duration(milliseconds: 500);
                            else if (_ == '1s')
                              duration = Duration(seconds: 1);
                            else if (_ == '2s') duration = Duration(seconds: 2);
                          })),
                if (index == 3)
                  _getMenuButton(
                      <String>[
                        'Ease',
                        'EaseIn',
                        'Elastic In Out',
                        'Bounce In Out'
                      ],
                      selectedCurve,
                      (_) => setState(() {
                            selectedCurve = _;
                            if (_ == 'Ease')
                              curve = Curves.ease;
                            else if (_ == 'EaseIn')
                              curve = Curves.easeIn;
                            else if (_ == 'Elastic In Out')
                              curve = Curves.elasticInOut;
                            else if (_ == 'Bounce In Out')
                              curve = Curves.bounceInOut;
                          })),
              ],
            ),
          ),
        )
      ],
    );
  }

  _getMenuButton(List<String> list, String selectedValue,
      ValueChanged<String> onSelected) {
    return Theme(
        data: ThemeData.dark(),
        child: DropdownButton(
            underline: SizedBox(),
            value: selectedValue,
            items: List.generate(
                list.length,
                (index) => DropdownMenuItem<String>(
                      child: Text(list[index]),
                      value: list[index],
                    )),
            onChanged: onSelected));
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  bottom_bar_page_transition: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:bottom_bar_page_transition/bottom_bar_page_transition.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
24
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Jul 3, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [bottom_bar_page_transition] that is in a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test