The blossom_tabs from flutter-blossom

flutter-blossom / blossom_tabs Goto Github PK

View Code? Open in Web Editor NEW

TabBar, TabView, TabController for @flutter-blossom. following windows first design.

License: MIT License

Kotlin 0.15% Swift 0.47% Objective-C 0.04% Dart 64.49% HTML 4.52% CMake 9.35% C++ 20.11% C 0.86%

blossom_tabs's Introduction

Tabs manager for flutter-blossom project.

Features

You can drag and drop tabs and reorder them.
dynamically add tabs at runtime.
save the current state of tab manger for later use (i.e- at next app restart).
customize appearance and behavior.

Getting started

first add it to your project

flutter pub add blossom_tabs

then import it

import 'package:blossom_tabs/blossom_tabs.dart';

Usage

You can add in widget tree like this -

// configure `controller`
var _controller = BlossomTabController<int>(tabs: []); // infer data type for easy access

return BlossomTabControllerScope<int>(
  controller: _controller,
  child: Scaffold(
    appBar: BlossomTabBar<int>(
      height: 48,
      selectedColor: Colors.blue,
      stickyColor: Colors.white,
      backgroundColor: Colors.blue.withOpacity(0.3),
      dividerColor: Colors.blue,
    ),
    body: BlossomTabView<int>(
      buildChildren: (tabs) => tabs
        .map((e) => ColorBox(child: Center(child: Text(e.id))))
        .toList(),
    ),
  ),
);

Additional information

Additionally you can listen to tabs state changes using BlossomTabControllerScopeDescendant. like this -

BlossomTabControllerScopeDescendant<int>(
  builder: (context, controller) {
  return Container(
    color: controller.currentTab == 'd' ? Colors.white : Colors.blue,
  );
});

Recommend Projects