adding packages

deprecated/dynamic_tabs/lib/data/classes/tab.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+class DynamicTab {
+  const DynamicTab({
+    required this.child,
+    required this.tab,
+    required this.tag,
+  });
+
+  final Widget child;
+
+  final BottomNavigationBarItem tab;
+
+  /// Uniquie Tag used for storing the tab order on the device
+  final String tag;
+}

deprecated/dynamic_tabs/lib/data/models/index.dart

@@ -0,0 +1 @@
+export 'tab_state.dart';

deprecated/dynamic_tabs/lib/data/models/tab_state.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+import '../classes/tab.dart';
+
+class TabState extends ChangeNotifier {
+  int _currentIndex = 0;
+  List<DynamicTab>? _items;
+  int _maxTabs = 4;
+  bool _persistIndex = false;
+  late SharedPreferences _storage;
+
+  int get currentIndex => _currentIndex;
+
+  bool get persistIndex => _persistIndex;
+
+  int get maxTabs => _maxTabs;
+
+  void init(
+    String tag,
+    List<DynamicTab> values, {
+    bool persist = false,
+    int max = 4,
+  }) async {
+    _items = values;
+    _persistIndex = persist;
+    _maxTabs = max;
+    notifyListeners();
+
+    _storage = await SharedPreferences.getInstance();
+
+    _loadSavedTabs();
+    _loadIndex();
+  }
+
+  bool get isMoreTab => _currentIndex >= _maxTabs;
+  bool get showEditTab => (_items?.length ?? 0) > _maxTabs;
+  Widget get child => _items![_currentIndex].child;
+
+  void changeMaxTabs(int value) {
+    assert(value >= 2);
+    _maxTabs = value;
+    notifyListeners();
+  }
+
+  List<DynamicTab> get mainTabs => allTabs.take(_maxTabs).toList();
+  List<DynamicTab> get extraTabs => allTabs.skip(_maxTabs).toList();
+  List<DynamicTab> get allTabs => _items ?? [];
+
+  int get adjustedIndex => isMoreTab ? maxTabs : _currentIndex;
+  int get subIndex => isMoreTab ? _currentIndex - _maxTabs : _currentIndex;
+
+  void _loadSavedTabs() async {
+    List<String> _list = [];
+    try {
+      final _data = _storage.getStringList(tabsKey);
+      if (_data != null) {
+        _list = List.from(_data);
+      }
+    } catch (e) {
+      print("Couldn't read tabs: $e");
+    }
+    if (_list.length == _items!.length) {
+      changeTabOrder(_list);
+    }
+  }
+
+  void changeTabOrder(List<String> _list) {
+    List<String> _tabs = _list;
+    if (_tabs != null && _tabs.isNotEmpty) {
+      List<DynamicTab> _newOrder = [];
+      for (var item in _tabs) {
+        _newOrder.add(_items!.firstWhere((t) => t.tag == item));
+      }
+      _items = _newOrder;
+      notifyListeners();
+    }
+    _saveNewTabs();
+  }
+
+  void _saveNewTabs() async {
+    final _list = _items!.map((t) => t.tag).toList();
+    await _storage.setStringList(tabsKey, _list);
+  }
+
+  void changeTab(int value) {
+    _currentIndex = value;
+    notifyListeners();
+    _saveIndex();
+  }
+
+  void _loadIndex() {
+    if (_persistIndex) {
+      int _index = _storage.getInt(navKey);
+      if (_index != null) {
+        if (_index > _maxTabs) {
+          _index = 0;
+        }
+        _currentIndex = _index;
+        notifyListeners();
+      }
+      _saveIndex();
+    }
+  }
+
+  void _saveIndex() {
+    _storage.setInt(navKey, _currentIndex);
+  }
+
+  void reset() {
+    _storage.clear();
+    changeTabOrder(_items!.map((t) => t.tag).toList());
+    _currentIndex = 0;
+    _saveIndex();
+  }
+
+  String get navKey => 'nav-key';
+
+  String get tabsKey => 'tabs-key';
+
+  List<BottomNavigationBarItem> get tabs => showEditTab
+      ? <BottomNavigationBarItem>[
+          ...mainTabs.map((e) => e.tab).toList(),
+          const BottomNavigationBarItem(
+            label: 'More',
+            icon: Icon(Icons.more_horiz),
+          )
+        ]
+      : <BottomNavigationBarItem>[...allTabs.map((e) => e.tab).toList()];
+}

deprecated/dynamic_tabs/lib/dynamic_tabs.dart

@@ -0,0 +1,222 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'data/classes/tab.dart';
+import 'data/models/index.dart';
+import 'ui/more_screen.dart';
+import 'ui/platforms/cupertino.dart';
+import 'ui/platforms/desktop.dart';
+import 'ui/platforms/material.dart';
+
+export 'data/classes/tab.dart';
+
+bool isDesktop() =>
+    defaultTargetPlatform == TargetPlatform.macOS ||
+    defaultTargetPlatform == TargetPlatform.linux ||
+    defaultTargetPlatform == TargetPlatform.windows;
+
+class DynamicTabScaffold extends StatelessWidget {
+  const DynamicTabScaffold({
+    required this.tabs,
+    this.backgroundColor,
+    this.persistIndex = false,
+    this.iconSize,
+    this.maxTabs = 4,
+    this.tag = "",
+    this.type = BottomNavigationBarType.fixed,
+    this.moreTabPrimaryColor,
+    this.moreTabAccentColor,
+    this.masterDetailOnMoreTab = false,
+    this.breakpoint = 720,
+    this.selectedColor,
+  })  : adaptive = false,
+        routes = null,
+        assert(tabs.length >= 2);
+
+  const DynamicTabScaffold.adaptive({
+    required this.tabs,
+    this.backgroundColor,
+    this.persistIndex = false,
+    this.maxTabs = 4,
+    this.tag = "",
+    required this.routes,
+    this.moreTabPrimaryColor,
+    this.masterDetailOnMoreTab = false,
+    this.breakpoint = 720,
+    this.moreTabAccentColor,
+    BottomNavigationBarType materialType = BottomNavigationBarType.fixed,
+    double? materialIconSize,
+    this.selectedColor,
+  })  : adaptive = true,
+        type = materialType,
+        iconSize = materialIconSize,
+        assert(tabs.length >= 2);
+
+  final bool adaptive;
+  final Color? backgroundColor;
+  final double breakpoint;
+  // Material Only
+  final double? iconSize;
+
+  final bool masterDetailOnMoreTab;
+  final int maxTabs;
+  final Color? moreTabAccentColor;
+  // final Color unselectedItemColor;
+
+  final Color? moreTabPrimaryColor;
+
+  final bool persistIndex;
+  final Map<String, WidgetBuilder>? routes;
+  final Color? selectedColor;
+  final List<DynamicTab> tabs;
+  // Unique Tag for each set of dynamic tabs
+  final String tag;
+
+  // final Color fixedColor;
+  final BottomNavigationBarType type;
+
+  @override
+  Widget build(BuildContext context) {
+    final _state = TabState();
+    _state.init(tag, tabs, max: maxTabs, persist: persistIndex);
+    return TabProvider(
+      state: _state,
+      child: Builder(
+        builder: (_) {
+          if (adaptive && defaultTargetPlatform == TargetPlatform.iOS) {
+            return CupertinoView(
+              selectedColor: selectedColor,
+              backgroundColor: backgroundColor,
+              routes: routes,
+              adaptive: adaptive,
+              maxTabs: maxTabs,
+              breakpoint: breakpoint,
+              masterDetailOnMoreTab: masterDetailOnMoreTab,
+              moreTabAccentColor: moreTabAccentColor,
+              moreTabPrimaryColor: moreTabPrimaryColor,
+            );
+          }
+
+          if (adaptive && isDesktop()) {
+            return DesktopView(
+              routes: routes,
+              breakpoint: breakpoint,
+              masterDetailOnMoreTab: masterDetailOnMoreTab,
+              adaptive: adaptive,
+              moreTabAccentColor: moreTabAccentColor,
+              moreTabPrimaryColor: moreTabPrimaryColor,
+            );
+          }
+
+          return MaterialView(
+            routes: routes,
+            breakpoint: breakpoint,
+            masterDetailOnMoreTab: masterDetailOnMoreTab,
+            adaptive: adaptive,
+            moreTabAccentColor: moreTabAccentColor,
+            moreTabPrimaryColor: moreTabPrimaryColor,
+            selectedColor: selectedColor,
+            maxTabs: maxTabs,
+            backgroundColor: backgroundColor,
+            type: type,
+          );
+        },
+      ),
+    );
+  }
+}
+
+class ContentView extends StatelessWidget {
+  ContentView({
+    required this.adaptive,
+    required this.routes,
+    required this.moreTabAccentColor,
+    required this.moreTabPrimaryColor,
+    required this.breakpoint,
+    required this.masterDetailOnMoreTab,
+  });
+
+  final bool adaptive;
+  final Color? moreTabAccentColor;
+  final Color? moreTabPrimaryColor;
+  final Map<String, WidgetBuilder>? routes;
+  final bool masterDetailOnMoreTab;
+  final double breakpoint;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        final model = TabProvider.of(context)!.state;
+        if (model.showEditTab && model.isMoreTab && !isDesktop()) {
+          if (adaptive && defaultTargetPlatform == TargetPlatform.iOS) {
+            return CupertinoTabView(
+              routes: routes,
+              builder: (BuildContext context) {
+                if (masterDetailOnMoreTab) {
+                  return MoreTab.fluid(
+                    breakpoint: breakpoint,
+                    adaptive: adaptive,
+                    primaryColor: moreTabPrimaryColor,
+                    accentColor: moreTabAccentColor,
+                    navigator: Navigator.of(context),
+                  );
+                }
+                return MoreTab(
+                  adaptive: adaptive,
+                  primaryColor: moreTabPrimaryColor,
+                  accentColor: moreTabAccentColor,
+                  navigator: Navigator.of(context),
+                );
+              },
+            );
+          }
+          if (masterDetailOnMoreTab) {
+            return MoreTab.fluid(
+              primaryColor: moreTabPrimaryColor,
+              accentColor: moreTabAccentColor,
+              adaptive: adaptive,
+              breakpoint: breakpoint,
+              navigator: Navigator.of(context),
+            );
+          }
+          return MoreTab(
+            primaryColor: moreTabPrimaryColor,
+            accentColor: moreTabAccentColor,
+            adaptive: adaptive,
+            navigator: Navigator.of(context),
+          );
+        }
+
+        if (adaptive && defaultTargetPlatform == TargetPlatform.iOS) {
+          return CupertinoTabView(
+            routes: routes,
+            builder: (BuildContext context) => Material(child: model.child),
+          );
+        }
+
+        return model.child;
+      },
+    );
+  }
+}
+
+class TabProvider extends InheritedWidget {
+  const TabProvider({
+    Key? key,
+    required Widget child,
+    required this.state,
+  }) : super(key: key, child: child);
+
+  final TabState state;
+
+  static TabProvider? of(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<TabProvider>();
+  }
+
+  @override
+  bool updateShouldNotify(TabProvider oldWidget) {
+    return state != oldWidget.state;
+  }
+}

deprecated/dynamic_tabs/lib/ui/common/grid_item.dart

@@ -0,0 +1,94 @@
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
+
+import '../../data/classes/tab.dart';
+
+class GridTabItem extends StatelessWidget {
+  const GridTabItem({
+    Key? key,
+    required this.tab,
+    this.active = true,
+    this.adaptive = false,
+    this.draggable = false,
+  }) : super(key: key);
+
+  final DynamicTab tab;
+  final bool active;
+  final bool draggable;
+  final bool adaptive;
+
+  @override
+  Widget build(BuildContext context) {
+    final Icon _icon = tab.tab.icon as Icon;
+    final Text _title = Text(tab.tab.label!);
+    if (draggable) {
+      return Draggable(
+        feedback: DefaultTextStyle(
+            style: adaptive && defaultTargetPlatform == TargetPlatform.iOS
+                ? CupertinoTheme.of(context).textTheme.textStyle
+                : Theme.of(context).textTheme.title!,
+            child: Container(
+              width: 120.0,
+              height: 80.0,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: <Widget>[
+                  Icon(
+                    _icon.icon,
+                    size: 35.0,
+                  ),
+                  AutoSizeText(
+                    _title.data!,
+                    maxLines: 1,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(fontSize: 30.0),
+                  ),
+                ],
+              ),
+            )),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Icon(
+              _icon.icon,
+              color: active ? null : Colors.grey,
+            ),
+            Text(
+              _title.data!,
+              textAlign: TextAlign.center,
+              style: active ? null : TextStyle(color: Colors.grey),
+            ),
+          ],
+        ),
+        data: tab.tag,
+      );
+    }
+
+    if (!active) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Icon(
+            _icon.icon,
+            color: Colors.grey,
+          ),
+          Text(
+            _title.data!,
+            textAlign: TextAlign.center,
+            style: TextStyle(color: Colors.grey),
+          ),
+        ],
+      );
+    }
+    
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        _icon,
+        _title,
+      ],
+    );
+  }
+}

deprecated/dynamic_tabs/lib/ui/edit_screen.dart

@@ -0,0 +1,250 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../data/classes/tab.dart';
+import 'common/grid_item.dart';
+
+class EditScreen extends StatefulWidget {
+  const EditScreen({
+    this.adaptive = false,
+    required this.tabs,
+    required this.maxTabs,
+  });
+
+  final bool adaptive;
+  final List<DynamicTab> tabs;
+  final int maxTabs;
+
+  @override
+  _EditScreenState createState() => _EditScreenState();
+}
+
+class _EditScreenState extends State<EditScreen> {
+  List<DynamicTab>? _tabs;
+  @override
+  void initState() {
+    _tabs = widget.tabs;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.adaptive && defaultTargetPlatform == TargetPlatform.iOS) {
+      return DefaultTextStyle(
+          style: CupertinoTheme.of(context).textTheme.textStyle,
+          child: CupertinoPageScaffold(
+            navigationBar: CupertinoNavigationBar(
+              transitionBetweenRoutes: false,
+              heroTag: 'more-tab',
+              trailing: CupertinoButton(
+                padding: EdgeInsets.all(0.0),
+                child: Text("Save"),
+                onPressed: () => _saveTabs(context),
+              ),
+            ),
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                return Column(
+                  children: <Widget>[
+                    Expanded(
+                      child: _buildBody(context, constraints),
+                    ),
+                    Container(
+                      height: 100.0,
+                      child: BottomEditableTabBar(
+                        adaptive: widget.adaptive,
+                        maxTabs: widget.maxTabs,
+                        tabs: _tabs,
+                        onChanged: (tabs) {
+                          setState(() {
+                            _tabs = tabs;
+                          });
+                        },
+                      ),
+                    ),
+                  ],
+                );
+              },
+            ),
+          ));
+    }
+    return DefaultTextStyle(
+        style: Theme.of(context).textTheme.display1!,
+        child: Scaffold(
+          appBar: AppBar(
+            actions: <Widget>[
+              IconButton(
+                icon: Icon(Icons.save),
+                onPressed: () => _saveTabs(context),
+              ),
+            ],
+          ),
+          body: LayoutBuilder(
+            builder: (context, constraints) {
+              return Column(
+                children: <Widget>[
+                  Expanded(
+                    child: _buildBody(context, constraints),
+                  ),
+                  Container(
+                    height: 100.0,
+                    child: BottomEditableTabBar(
+                      adaptive: widget.adaptive,
+                      maxTabs: widget.maxTabs,
+                      tabs: _tabs,
+                      onChanged: (tabs) {
+                        setState(() {
+                          _tabs = tabs;
+                        });
+                      },
+                    ),
+                  ),
+                ],
+              );
+            },
+          ),
+        ));
+  }
+
+  Widget _buildBody(BuildContext context, BoxConstraints constraints) {
+    return Center(
+      child: SafeArea(
+        child: Column(
+          children: <Widget>[
+            Container(
+              padding: EdgeInsets.only(top: 20, bottom: 20.0),
+              child: Text(
+                "Drag the icons to\norganize tabs.",
+                style: Theme.of(context)
+                    .textTheme
+                    .headline4!
+                    .copyWith(fontSize: 22.0),
+                textAlign: TextAlign.center,
+              ),
+            ),
+            Expanded(
+              child: Container(
+                padding: EdgeInsets.all(10.0),
+                child: GridView.count(
+                  shrinkWrap: true,
+                  crossAxisCount: (constraints.maxWidth / 100).round(),
+                  children: _tabs!
+                      .map(
+                        (t) => GridTabItem(
+                          active: _tabs!.indexOf(t) >= widget.maxTabs,
+                          tab: t,
+                          adaptive: widget.adaptive,
+                          draggable: true,
+                        ),
+                      )
+                      .toList(),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _saveTabs(BuildContext context) {
+    Navigator.of(context).pop(_tabs);
+  }
+}
+
+class BottomEditableTabBar extends StatefulWidget {
+  const BottomEditableTabBar({
+    required this.maxTabs,
+    required this.tabs,
+    required this.adaptive,
+    required this.onChanged,
+  });
+
+  final bool adaptive;
+  final int maxTabs;
+  final List<DynamicTab>? tabs;
+  final ValueChanged<List<DynamicTab>?> onChanged;
+
+  @override
+  _BottomEditableTabBarState createState() => _BottomEditableTabBarState();
+}
+
+class _BottomEditableTabBarState extends State<BottomEditableTabBar> {
+  List<DynamicTab>? _tabs;
+  int? _previewIndex;
+
+  @override
+  void initState() {
+    _tabs = widget.tabs;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    List<Widget> _children = [];
+    List<DynamicTab> _targets = _tabs!.take(widget.maxTabs).toList();
+    for (var t in _targets) {
+      _children.add(DragTarget<String>(
+        builder: (context, possible, rejected) {
+          print("Possible: $possible, Rejected: $rejected");
+          return GridTabItem(
+            tab: t,
+            active: _previewIndex == null
+                ? true
+                : !(_targets.indexOf(t) == _previewIndex),
+            adaptive: widget.adaptive,
+            // draggable: true,
+          );
+        },
+        onWillAccept: (String? data) {
+          setState(() {
+            _previewIndex = _targets.indexOf(t);
+          });
+          return true;
+        },
+        onLeave: (data) {
+          setState(() {
+            _previewIndex = null;
+          });
+        },
+        onAccept: (String data) {
+          final DynamicTab _baseTab = _targets[_previewIndex!];
+          final DynamicTab _newTab = _tabs!.firstWhere((t) => t.tag == data);
+          final int _oldIndex = _tabs!.indexOf(_newTab);
+
+          _tabs!.removeAt(_previewIndex!);
+          _tabs!.insert(_previewIndex!, _newTab);
+          _tabs!.removeAt(_oldIndex);
+          _tabs!.insert(_oldIndex, _baseTab);
+
+          widget.onChanged(_tabs);
+
+          setState(() {
+            _previewIndex = null;
+          });
+        },
+      ));
+    }
+
+    _children.add(GridTabItem(
+      tab: DynamicTab(
+        child: Container(),
+        tab: BottomNavigationBarItem(
+          icon: Icon(Icons.more_horiz),
+          title: Text("More"),
+        ),
+        tag: "",
+      ),
+      draggable: false,
+      active: false,
+      adaptive: widget.adaptive,
+    ));
+    return Container(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        children: _children,
+      ),
+    );
+  }
+}

deprecated/dynamic_tabs/lib/ui/more_screen.dart

@@ -0,0 +1,276 @@
+import 'package:cupertino_controllers/cupertino_controllers.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import '../data/classes/tab.dart';
+import '../data/models/index.dart';
+import '../dynamic_tabs.dart';
+import 'edit_screen.dart';
+
+class MoreTab extends StatelessWidget {
+  const MoreTab({
+    this.adaptive = false,
+    required this.primaryColor,
+    required this.accentColor,
+    required this.navigator,
+  })  : breakpoint = null,
+        masterDetail = false;
+
+  const MoreTab.fluid({
+    this.adaptive = false,
+    required this.primaryColor,
+    required this.accentColor,
+    required this.navigator,
+    this.breakpoint = 720,
+  }) : masterDetail = true;
+
+  final bool adaptive;
+  final Color? primaryColor;
+  final Color? accentColor;
+  final NavigatorState navigator;
+  final bool masterDetail;
+  final double? breakpoint;
+
+  @override
+  Widget build(BuildContext context) {
+    final media = MediaQuery.of(context);
+    final _landscape = media.orientation == Orientation.landscape;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final _expanded = masterDetail && constraints.maxWidth >= breakpoint!;
+        return Builder(
+          builder: (context) {
+            final model = TabProvider.of(context)!.state;
+            if (adaptive && defaultTargetPlatform == TargetPlatform.iOS) {
+              if (_landscape &&
+                  masterDetail &&
+                  constraints.maxWidth >= breakpoint!) {
+                return Row(
+                  children: <Widget>[
+                    Container(
+                      width: 350,
+                      child: CupertinoPage(
+                        primaryColor: primaryColor,
+                        accentColor: accentColor,
+                        expanded: _expanded,
+                        onEdit: () => _goToEditScreen(context, model),
+                        onTap: (index) {
+                          final _index =
+                              model.allTabs.indexOf(model.extraTabs[index]);
+                          model.changeTab(_index);
+                        },
+                      ),
+                    ),
+                    Expanded(child: model.child),
+                  ],
+                );
+              }
+              return CupertinoPage(
+                primaryColor: primaryColor,
+                accentColor: accentColor,
+                expanded: _expanded,
+                onEdit: () => _goToEditScreen(context, model),
+                onTap: (index) async {
+                  final _index = model.allTabs.indexOf(model.extraTabs[index]);
+                  model.changeTab(_index);
+                  await navigator.push(
+                    CupertinoPageRoute(
+                      builder: (context) => model.child,
+                    ),
+                  );
+                },
+              );
+            }
+
+            if (_landscape &&
+                masterDetail &&
+                constraints.maxWidth >= breakpoint!) {
+              return Row(
+                children: <Widget>[
+                  Container(
+                    width: 350,
+                    child: new MaterialPage(
+                      primaryColor: primaryColor,
+                      accentColor: accentColor,
+                      expanded: _expanded,
+                      onEdit: () => _goToEditScreen(context, model),
+                      onTap: model.changeTab,
+                    ),
+                  ),
+                  Expanded(child: model.child),
+                ],
+              );
+            }
+            return MaterialPage(
+              primaryColor: primaryColor,
+              accentColor: accentColor,
+              expanded: _expanded,
+              onEdit: () => _goToEditScreen(context, model),
+              onTap: (index) async {
+                final _index = model.allTabs.indexOf(model.extraTabs[index]);
+                model.changeTab(_index);
+                await navigator.push(
+                  MaterialPageRoute(
+                    builder: (context) {
+                      return Material(child: model.child);
+                    },
+                  ),
+                );
+              },
+            );
+          },
+        );
+      },
+    );
+  }
+
+  void _goToEditScreen(BuildContext context, TabState state) {
+    Navigator.of(context, rootNavigator: true)
+        .push<List<DynamicTab>>(MaterialPageRoute(
+      builder: (context) => EditScreen(
+        maxTabs: state.maxTabs,
+        adaptive: adaptive,
+        tabs: state.allTabs,
+      ),
+      fullscreenDialog: true,
+    ))
+        .then((newTabs) {
+      if (newTabs != null) {
+        final _list = newTabs.map((t) => t.tag).toList();
+        state.changeTabOrder(_list);
+      }
+    });
+  }
+}
+
+class MaterialPage extends StatelessWidget {
+  const MaterialPage({
+    Key? key,
+    required this.primaryColor,
+    required this.accentColor,
+    required this.expanded,
+    required this.onEdit,
+    required this.onTap,
+  }) : super(key: key);
+
+  final bool expanded;
+  final VoidCallback onEdit;
+  final ValueChanged<int> onTap;
+  final Color? primaryColor;
+  final Color? accentColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        final model = TabProvider.of(context)!.state;
+        return Scaffold(
+            appBar: AppBar(
+              title: Text("More"),
+              actions: <Widget>[
+                IconButton(
+                  icon: Icon(Icons.edit),
+                  onPressed: onEdit,
+                ),
+              ],
+            ),
+            body: SafeArea(
+              child: ListView.builder(
+                padding: EdgeInsets.all(0.0),
+                itemCount: model.extraTabs.length,
+                itemBuilder: (BuildContext context, int index) {
+                  final i = model.extraTabs[index];
+                  return ListTile(
+                    leading: i.tab.icon,
+                    title: i.tab.title,
+                    selected: expanded ? index == model.subIndex : false,
+                    trailing:
+                        !expanded ? Icon(Icons.keyboard_arrow_right) : null,
+                    onTap: () => onTap(index),
+                  );
+                },
+              ),
+            ));
+      },
+    );
+  }
+}
+
+class CupertinoPage extends StatelessWidget {
+  const CupertinoPage({
+    Key? key,
+    required this.primaryColor,
+    required this.accentColor,
+    required this.onTap,
+    required this.onEdit,
+    required this.expanded,
+  }) : super(key: key);
+
+  final Color? primaryColor;
+  final Color? accentColor;
+  final ValueChanged<int> onTap;
+  final VoidCallback onEdit;
+  final bool expanded;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        final model = TabProvider.of(context)!.state;
+        return CupertinoPageScaffold(
+          child: CustomScrollView(
+            slivers: <Widget>[
+              CupertinoSliverNavigationBar(
+                backgroundColor: primaryColor,
+                transitionBetweenRoutes: !expanded,
+                heroTag: Key('more-tab'),
+                largeTitle: Text("More"),
+                trailing: CupertinoButton(
+                  child: Text("Edit"),
+                  padding: EdgeInsets.all(0.0),
+                  onPressed: onEdit,
+                ),
+              ),
+              SliverPadding(
+                padding: MediaQuery.of(context)
+                    .removePadding(
+                      removeTop: true,
+                      removeLeft: true,
+                      removeRight: true,
+                    )
+                    .padding,
+                sliver: SliverList(
+                  delegate: SliverChildBuilderDelegate(
+                    (BuildContext context, int index) {
+                      final i = model.extraTabs[index];
+                      final Icon _icon = i.tab.icon as Icon;
+                      final Text _text = i.tab.title as Text;
+                      return DefaultTextStyle(
+                          style: CupertinoTheme.of(context).textTheme.textStyle,
+                          child: CupertinoListTile(
+                            leading: _icon.icon!,
+                            title: _text,
+                            selected:
+                                expanded ? index == model.subIndex : false,
+                            lastItem: false,
+                            ios: CupertinoListTileData(
+                              style: CupertinoCellStyle.subtitle,
+                              accessory: expanded
+                                  ? CupertinoAccessory.none
+                                  : CupertinoAccessory.disclosureIndicator,
+                            ),
+                            onTap: () => onTap(index),
+                          ));
+                    },
+                    childCount: model.extraTabs.length,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

deprecated/dynamic_tabs/lib/ui/platforms/cupertino.dart

@@ -0,0 +1,56 @@
+import 'package:dynamic_tabs/dynamic_tabs.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class CupertinoView extends StatelessWidget {
+  const CupertinoView({
+    Key? key,
+    required this.selectedColor,
+    required this.maxTabs,
+    required this.backgroundColor,
+    required this.adaptive,
+    required this.routes,
+    required this.moreTabAccentColor,
+    required this.moreTabPrimaryColor,
+    required this.breakpoint,
+    required this.masterDetailOnMoreTab,
+  }) : super(key: key);
+
+  final bool adaptive;
+  final Color? backgroundColor;
+  final int maxTabs;
+  final Color? moreTabAccentColor;
+  final Color? moreTabPrimaryColor;
+  final Map<String, WidgetBuilder>? routes;
+  final Color? selectedColor;
+  final bool masterDetailOnMoreTab;
+  final double breakpoint;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        final model = TabProvider.of(context)!.state;
+        return CupertinoTabScaffold(
+          tabBuilder: (BuildContext context, int index) {
+            return ContentView(
+              routes: routes,
+              adaptive: adaptive,
+              breakpoint: breakpoint,
+              masterDetailOnMoreTab: masterDetailOnMoreTab,
+              moreTabAccentColor: moreTabAccentColor,
+              moreTabPrimaryColor: moreTabPrimaryColor,
+            );
+          },
+          tabBar: CupertinoTabBar(
+            activeColor: selectedColor,
+            items: model.tabs,
+            currentIndex: model.adjustedIndex,
+            onTap: model.changeTab,
+            backgroundColor: backgroundColor,
+          ),
+        );
+      },
+    );
+  }
+}

deprecated/dynamic_tabs/lib/ui/platforms/desktop.dart

@@ -0,0 +1,60 @@
+import 'package:dynamic_tabs/dynamic_tabs.dart';
+import 'package:flutter/material.dart';
+
+class DesktopView extends StatelessWidget {
+  const DesktopView({
+    Key? key,
+    required this.routes,
+    required this.adaptive,
+    required this.moreTabAccentColor,
+    required this.moreTabPrimaryColor,
+    required this.breakpoint,
+    required this.masterDetailOnMoreTab,
+  }) : super(key: key);
+
+  final bool adaptive;
+  final Color? moreTabAccentColor;
+  final Color? moreTabPrimaryColor;
+  final Map? routes;
+  final bool masterDetailOnMoreTab;
+  final double breakpoint;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        final model = TabProvider.of(context)!.state;
+        return Scaffold(
+          body: ContentView(
+            routes: routes as Map<String, Widget Function(BuildContext)>?,
+            adaptive: adaptive,
+            breakpoint: breakpoint,
+            masterDetailOnMoreTab: masterDetailOnMoreTab,
+            moreTabAccentColor: moreTabAccentColor,
+            moreTabPrimaryColor: moreTabPrimaryColor,
+          ),
+          drawer: Drawer(
+            child: SafeArea(
+              child: SingleChildScrollView(
+                child: Column(
+                  children: <Widget>[
+                    for (var i = 0; i < model.allTabs.length; i++) ...[
+                      ListTile(
+                        selected: i == model.currentIndex,
+                        leading: model.allTabs[i].tab.icon,
+                        title: Text(model.allTabs[i].tab.label ?? ''),
+                        onTap: () {
+                          model.changeTab(i);
+                        },
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

deprecated/dynamic_tabs/lib/ui/platforms/material.dart

@@ -0,0 +1,57 @@
+import 'package:dynamic_tabs/dynamic_tabs.dart';
+import 'package:flutter/material.dart';
+
+class MaterialView extends StatelessWidget {
+  const MaterialView({
+    Key? key,
+    required this.routes,
+    required this.adaptive,
+    required this.moreTabAccentColor,
+    required this.moreTabPrimaryColor,
+    required this.selectedColor,
+    required this.maxTabs,
+    required this.backgroundColor,
+    required this.type,
+    required this.breakpoint,
+    required this.masterDetailOnMoreTab,
+  }) : super(key: key);
+
+  final bool adaptive;
+  final Color? backgroundColor;
+  final int maxTabs;
+  final Color? moreTabAccentColor;
+  final Color? moreTabPrimaryColor;
+  final Map? routes;
+  final Color? selectedColor;
+  final BottomNavigationBarType type;
+  final bool masterDetailOnMoreTab;
+  final double breakpoint;
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (context) {
+        final model = TabProvider.of(context)!.state;
+        return Scaffold(
+          body: ContentView(
+            routes: routes as Map<String, Widget Function(BuildContext)>?,
+            adaptive: adaptive,
+            breakpoint: breakpoint,
+            masterDetailOnMoreTab: masterDetailOnMoreTab,
+            moreTabAccentColor: moreTabAccentColor,
+            moreTabPrimaryColor: moreTabPrimaryColor,
+          ),
+          bottomNavigationBar: BottomNavigationBar(
+            selectedItemColor: selectedColor,
+            items: model.tabs,
+            currentIndex: model.adjustedIndex,
+            onTap: model.changeTab,
+            fixedColor: backgroundColor ?? Theme.of(context).primaryColor,
+            type: type,
+            // unselectedItemColor: unselectedItemColor ?? Colors.grey,
+          ),
+        );
+      },
+    );
+  }
+}