tab_kit 0.0.1-dev.1

A variety of tab bars for Flutter user interfaces.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:tab_kit/tab_kit.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tab Kit Examples',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final List<TabDescriptor> _availableTabs;
  late final NotebookTabController _controller;

  @override
  void initState() {
    super.initState();

    _availableTabs = List.from(_tabs);
    _controller = NotebookTabController()
      ..addListener(NotebookTabBarControllerListener(onTabRemoved: (index, tab) {
        _availableTabs.add(tab);
      }));

    _addTab();
  }

  void _addTab() {
    if (_availableTabs.isEmpty) {
      // We don't have any more tab content to add.
      return;
    }

    _controller.addTab(
      _availableTabs.removeAt(0),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (scaffoldContext) {
        return Column(
          children: [
            Expanded(
              child: Column(
                children: [
                  NotebookTabBar(
                    controller: _controller,
                    style: NotebookTabBarStyle(
                      barBackground: Colors.yellow,
                      tabBackground: Colors.white,
                      tabWidth: 200,
                      dividerColor: Colors.black.withOpacity(0.2),
                    ),
                    onAddTabPressed: _addTab,
                  ),
                  Expanded(
                    child: Container(
                      width: double.infinity,
                      color: Colors.white,
                      child: _buildPage(),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Theme(
                    data: ThemeData.dark(),
                    child: DefaultTextStyle(
                      style: DefaultTextStyle.of(scaffoldContext).style.copyWith(
                            color: Colors.white,
                          ),
                      child: NotebookTabBar(
                        controller: _controller,
                        style: NotebookTabBarStyle(
                          barBackground: const Color(0xFF2f2f2f),
                          tabBackground: const Color(0xFF1c1c1c),
                          tabWidth: 200,
                          dividerColor: Colors.white.withOpacity(0.1),
                        ),
                        onAddTabPressed: _addTab,
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      width: double.infinity,
                      color: const Color(0xFF1c1c1c),
                      child: _buildPage(),
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      }),
    );
  }

  Widget _buildPage() {
    if (_controller.activeTab == null) {
      return const SizedBox();
    }

    // switch (_controller1.activeTab!.id) {
    //   case "1":
    //     return Text("")
    // }

    return const SizedBox();
  }
}

const _tabs = <TabDescriptor>[
  TabDescriptor(
    id: "flutter",
    image: AssetImage("assets/icons/flutter_icon.png"),
    title: "Flutter is a portable UI toolkit",
  ),
  TabDescriptor(
    id: "dart",
    image: AssetImage("assets/icons/dart_icon.png"),
    title: "Dart is a general purpose programming language",
  ),
  TabDescriptor(
    id: "tab_kit",
    icon: Icons.account_tree_rounded,
    title: "tab_kit provides a selection of tab bars",
  ),
  TabDescriptor(
    id: "chrome_tab_bar",
    image: AssetImage("assets/icons/chrome_icon.png"),
    title: "ChromeTabBar is a tab bar similar to Chrome",
  ),
  TabDescriptor(
    id: "obsidian_tab_bar",
    image: AssetImage("assets/icons/obsidian_icon.png"),
    title: "ObsidianTabBar is a tab bar similar to Obsidian",
  ),
];