AppinioAnimatedToggleTab is a Flutter package for creating a custom tab viewer with built-in animation. ✨

Supporting Android, iOS & WebApp.

Why?

We build this package because we wanted to:

  • have a tabviewer ready to be customized
  • be able to animate between switching tabs

Show Cases

Switching between tabs.

Installation

Create a new project with the command

flutter create MyApp

Add

dependencies:
  ...
  appinio_tanimated_toggle_tab:

to your pubspec.yaml of your flutter project. OR run

flutter pub add appinio_tanimated_toggle_tab

in your project's root directory.

In your library add the following import:

import 'package:appinio_animated_toggle_tab/appinio_animated_toggle_tab.dart';

For help getting started with Flutter, view the online documentation.

Usage

You can place your AppinioAnimatedToggleTab inside of a MaterialApp like we did here. Optional parameters can be defined to enable different features. See the following example..

class TabsViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: AppinioAnimatedToggleTab(
              callback: (int i) {},
              tabTexts: const [
                'make',
                'your',
                'tabs :)',
              ],
              height: 40,
              width: 300,
              boxDecoration: BoxDecoration(color: Color(0xFFc3d2db),),
              animatedBoxDecoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xFFc3d2db).withOpacity(0.1),
                    spreadRadius: 1,
                    blurRadius: 5,
                    offset: const Offset(2, 2),
                  ),
                ],
                color: kDarkBlueColor,
                borderRadius: const BorderRadius.all(
                  Radius.circular(5),
                ),
                border: Border.all(
                  color: Colors.grey,
                  width: 1,
                ),
              ),
              activeStyle: const TextStyle( color: Colors.blue,),
              inactiveStyle: const TextStyle( color: Colors.black,),
            );
  }
}

Constructor

Basic

ParameterDefaultDescriptionRequired
callback-function(int) for call back and control the view of tabstrue
tabTexts-a list of texts displayed on the tabstrue
height-height of the tabtrue
width-width of the tabtrue
boxDecoration-decoration of the tabtrue
animatedBoxDecoration-the decoration of animated box used to toggletrue
activeStyle-style of text when activetrue
inactiveStyle-style of text when inactivetrue

Made with ❤ by Flutter team at Appinio GmbH

Libraries

appinio_animated_toggle_tab