FLUTTER ECOSYSTEM

TeaTalkInternal/rounded_tabbar_widget

カスタムタブバーを使用したTabBarViewレイアウトを作成するためのシンプルなFlutterパッケージ。

rounded_tabbar_widget のプロジェクト画像
Stars
10
Forks
3
最終プッシュ(UTC)
2021/03/31
プロジェクト状態
公開中
Tea Talk GitHub avatar
GITHUB Organization

Tea Talk ↗

言語DartHTMLSwiftKotlinObjective-C

技術トピック

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 2 件
  • flutter{"sdk":"flutter"}
  • flutter_test開発用{"sdk":"flutter"}

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

README を開く / 閉じる

rounded_tabbar_widget

Language: English

A simple flutter package for creating a TabBarView layout with custom Tabbar.

Technical Notes: The layout for pages is built using TabbarView and layout of Tab buttons is customised. This package supports pages to be scrolled too.

https://github.com/TeaTalkInternal/github_assets/blob/master/gifs/rounded_tabbar_2.gif

How to use it.

the usage is very simple, just use the following

 RoundedTabbarWidget(
      tabIcons: [
        Icons.home,
        Icons.favorite,
        Icons.chat,
        Icons.person,
      ],
      pages: [
        HomePageWidget(),
        FavoritePageWidget(),
        MessagesPageWidget(),
        ProfilePageWidget(),
      ],
      selectedIndex: 0,
      onTabItemIndexChanged: (int index) {
        print('Index: $index');
      },
    ),

parameters

parameter description default
onTabItemIndexChanged Completion Handler which returns index of current tab page (int index) {}
tabIcons List of Tab Icons Pass List of IconData parameter
pages List of Tab Pages Pass List of Tab widgets parameter
selectedIndex Index of tab page to be shown selected initially This is a optional parameter
itemNormalColor Color of Tabbar item for normal state This is a optional parameter
itemSelectedColor Color of Tabbar item for selected state This is a optional parameter
tabBarBackgroundColor Background color of Tabbar This is a optional parameter

Please note the number of pages and tabIcons should be equal.

more detail