Skip to content

flutter-blossom/blossom_tabs

Repository files navigation

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,
  );
});