A vertical tabs package for flutter framework.

Overview

Vertical Tabs

A vertical tabs package for flutter framework.

Getting Started

A simple example of usage. to get more examples see Examples directory.
To see all settings please visit API reference of this package

...

VerticalTabs(
  tabsWidth: 150,
  tabs: <Tab>[
    Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
    Tab(child: Text('Dart')),
    Tab(child: Text('NodeJS')),
    Tab(child: Text('PHP')),
    Tab(child: Text('HTML 5')),
  ],
  contents: <Widget>[
    Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
    Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
    Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
    Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
    Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
  ],
),
  
  




Scroll direction of content




RTL

Comments
  • tab label text is faded if text is too long.

    tab label text is faded if text is too long.

    Hi, Tab label text is faded if text is too long and even if we use itemExtent parameter, it is not a reliable solution as we dont know the exact text if redered dynamically from server. You may try this solution and update if it works as needed:

    • you can remove line 153 (CrossAxisAlignment.stretch) as it stretches the item to indefinitly and it will be an error if the widget is under any non-constrained widget.
    • you can remove line 102 (itemExtent: widget.itemExtent,) as it forces the children to have the given extent in the scroll direction [as per docs.]
    • you can remove line 158. now we can avoid specifying exact height of the container.

    using itemExtent is not a good idea if the data is dynamic.

    Hope this may be useful.

    opened by krishnavamshi3 1
  • How to custom the height of a tab content?

    How to custom the height of a tab content?

    Hi, thanks for your share. I want a vertical tab view is not always a whole screen, maybe more tab views combine together in one page, it depend on the content of a tab view. What should I do to achieve this goal? Thanks.

    opened by codlin 1
  • Add default backgroundColor

    Add default backgroundColor

    A material widget's default background color = global theme canvasColor. Two solutions: set the container background color to transparent or canvasColor

    opened by arthurgustin 0
  • Only Scrolls Horizontally

    Only Scrolls Horizontally

    I used the exact same code in a new project. flutter 2.0.2. Using an emulator the tabs only scroll horizontally unlike in the demo. https://pub.dev/packages/vertical_tabs

    opened by janithcooray 0
  • Indicator color and style

    Indicator color and style

    Hello, thanks for the wonderful widget.

    But whenever I try to add selectedTabBackgroundColor different that the default one the tab indicator gets behind the tab.

    ` VerticalTabs(

    tabsWidth: Dimens.fourtyPercentWidth,
    indicatorColor: ColorsValue.primaryColor,
    indicatorWidth: Dimens.five,
    tabBackgroundColor: ColorsValue.lightGreyColor2,
    tabTextStyle: Get.textTheme.bodyText1,
    selectedTabTextStyle: Get.textTheme.headline6,
    disabledChangePageFromContentView: true,
    contentScrollAxis: Axis.vertical,
    tabsElevation: Dimens.five,
    tabs: [
        _getTabs(),
    ],
    contents: [
            _getContents(),
    ],
    

    )`

    Add is there a way to give height to the tabs.

    opened by pradyotMobifyi 0
Owner
FullStack Developer. Flutter, Dart. Master of Computer Science (ImamReza University) Looking for a remote job Full Stack Web Developer + Flutter
null
A widget to provides horizontal or vertical multiple split view for Flutter.

Multi split view A widget to provides horizontal or vertical multiple split view for Flutter. Horizontal or vertical Configurable weight or size for e

Carlos Eduardo Leite de Andrade 63 Dec 28, 2022
Customizable Flutter widget which syncronize ScrollView with PageView as tabs

scrollable_list_tab_scroller Customizable Flutter widget which syncronize ScrollView with PageView as tabs. Create a custom page view as tabs which sy

Railson Ferreira de Souza 4 Dec 21, 2022
A Flutter plugin to use Chrome Custom Tabs.

Flutter Custom Tabs Plugin With the Flutter Custom Tabs Plugin, you can use Custom Tabs as easily as url_launcher. This plugin is built as federated p

Shinya Kumagai 118 Nov 18, 2022
Simple form maker for Flutter Framework

Flutter FormBuilder - flutter_form_builder This package helps in creation of data collection forms in Flutter by removing the boilerplate needed to bu

Danvick Miller 1.2k Jan 3, 2023
Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

null 1 Oct 29, 2021
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

Hassan Ur Rahman 0 May 6, 2022
Flutter Package for Easier Creation of Home Screen Widgets

Home Widget HomeWidget is a Plugin to make it easier to create HomeScreen Widgets on Android and iOS. HomeWidget does not allow writing Widgets with F

Anton Borries 405 Dec 31, 2022
A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

account_selector A Flutter package which provides helper widgets for selecting single or multiple account/user from a list Supported Dart Versions Dar

Harpreet Singh 49 Oct 7, 2021
Flutter package: Similar to a ListView, but lets you programmatically jump to any item, by index.

indexed_list_view Similar to a ListView, but lets you programmatically jump to any item, by index. The index jump happens instantly, no matter if you

Marcelo Glasberg 244 Dec 27, 2022
A Styled Toast Flutter package.

flutter_styled_toast A Styled Toast Flutter package. You can highly customize toast ever. Beautify toast with a series of animations and make toast mo

null 67 Jan 8, 2023
A flutter package for displaying common picker dialogs.

Flutter Material Pickers A flutter package containing commonly used material design picker dialogs. Some are new, some wrap existing or built in picke

CodeGrue 89 Jan 2, 2023
A package for flutter to use alert and toast within one line code.

easy_alert A package for flutter to use alert and toast within one line code. Getting Started Add easy_alert: to your pubspec.yaml, and run flutt

null 34 Jun 25, 2021
Flutter package: Define a theme (colors, text styles etc.) as static const values which can be changed dynamically.

Flutter package: Define a theme (colors, text styles etc.) as static const values which can be changed dynamically. Also comes with useful extensions to create text styles by composition.

Marcelo Glasberg 21 Jan 2, 2023
flutter commons package

Commons Commons Flutter package can used for Flutter Android and IOS applications. https://pub.dev/packages/commons example/lib/main.dart Includes Ale

Arbaz Mateen 43 Dec 21, 2022
Fancy design of radio buttons in Flutter (package).

A Flutter package for new radio button design. With Elegant Animation. Features Usage TODO: Include short and useful examples for package users. Add l

Aymen Boucheffa 0 Nov 26, 2021
Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

align_positioned Widgets in this package: AlignPositioned AnimatedAlignPositioned AnimChain Why are these widgets an indispensable tool? When your des

Marcelo Glasberg 69 Dec 12, 2022
A new flutter package for collection of common popular social media widgets

Social Media Widgets - package A new flutter package for collection of common popular social media widgets Currently available widgets Snapchat screen

theboringdeveloper 34 Nov 12, 2022
The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

flutter_otp_text_field flutter_otp_text_field The flutter_otp_text_field package for flutter is a TextField widget that allows you to display differen

David-Legend 30 Nov 8, 2022