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

Parameter	Default	Description	Required
callback	-	function(int) for call back and control the view of tabs	true
tabTexts	-	a list of texts displayed on the tabs	true
height	-	height of the tab	true
width	-	width of the tab	true
boxDecoration	-	decoration of the tab	true
animatedBoxDecoration	-	the decoration of animated box used to toggle	true
activeStyle	-	style of text when active	true
inactiveStyle	-	style of text when inactive	true
initialIndex	0	initial tabbar index	false

---

Made with ❤ by Flutter team at Appinio GmbH