appinio_animated_toggle_tab 1.0.3 copy "appinio_animated_toggle_tab: ^1.0.3" to clipboard
appinio_animated_toggle_tab: ^1.0.3 copied to clipboard

A custom tab viewer with built-in animation and different design from default `TabViewer`.

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
41
likes
140
pub points
78%
popularity

Publisher

verified publisherappinio.app

A custom tab viewer with built-in animation and different design from default `TabViewer`.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on appinio_animated_toggle_tab