floating_tabbar

.gitignore

@@ -0,0 +1,29 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
+/pubspec.lock
+**/doc/api/
+.dart_tool/
+.packages
+build/

.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: 7e9793dee1b85a243edd0e06cb1658e98b077561
+  channel: stable
+
+project_type: package

CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* TODO: Describe initial release.

LICENSE

@@ -0,0 +1 @@
+TODO: Add your license here.

README.md

@@ -0,0 +1,75 @@
+<!-- 
+This README describes the package. If you publish this package to pub.dev,
+this README's contents appear on the landing page for your package.
+
+For information about how to write a good package README, see the guide for
+[writing package pages](https://dart.dev/guides/libraries/writing-package-pages). 
+
+For general information about developing packages, see the Dart guide for
+[creating packages](https://dart.dev/guides/libraries/create-library-packages)
+and the Flutter guide for
+[developing packages and plugins](https://flutter.dev/developing-packages). 
+-->
+
+## Features
+
+The floating_tabbar package for Flutter allows you to use the responsive design for all platforms made from the Material Design System.
+
+## Getting started
+
+import 'package:floating_tabbar/floating_tabbar.dart
+
+ * This is Floating TabBar widget.
+ * To use this there must be minimum two items.
+ * You get TabBar floating and a PageView with it.
+ * And with [isFloating = false] you'll get normal TabBar PageView
+ * Support for all device sizes.
+
+## Usage
+
+```dart
+// HOW TO USE THIS WIDGET
+  Widget floatingTabBarPageView() {
+    List<TabItem> tabList() {
+      List<TabItem> _list = [
+        TabItem(
+          icon: const Icon(Icons.dashboard_outlined, size: 30),
+          selectedIcon: const Icon(Icons.dashboard, size: 30),
+          label: "Dashboard",
+          tabScreen: const Center(child: Text("Dashboard", style: TextStyle(fontSize: 30))),
+        ),
+        TabItem(
+          icon: const Icon(Icons.library_books_outlined, size: 30),
+          selectedIcon: const Icon(Icons.library_books, size: 30),
+          label: "Report",
+          tabScreen: const Center(child: Text("Report", style: TextStyle(fontSize: 30))),
+        ),
+        TabItem(
+          icon: const Icon(Icons.settings_outlined, size: 30),
+          selectedIcon: const Icon(Icons.settings, size: 30),
+          label: "Settings",
+          tabScreen: const Center(child: Text("Settings", style: TextStyle(fontSize: 30))),
+        ),
+      ];
+      return _list;
+    }
+
+    AppBar getAppBar() {
+      return AppBar(
+        title: const Text("Floating Tabbar Pageview"),
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        centerTitle: true,
+      );
+    }
+
+    return FloatingTabBarPageView(
+      tabItemList: tabList(),
+      title: "FLOAT",
+      parentAppbar: getAppBar(),
+    );
+  }
+```
+
+## Additional information
+

analysis_options.yaml

@@ -0,0 +1,4 @@
+include: package:flutter_lints/flutter.yaml
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

lib/Models/tab_item.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+class TabItem {
+  final Widget icon;
+  final Widget selectedIcon;
+  final String label;
+  final Widget tabWidget;
+  const TabItem({
+    this.icon = const Icon(Icons.icecream_outlined),
+    this.selectedIcon = const Icon(Icons.icecream),
+    required this.label,
+    required this.tabWidget,
+  });
+}

lib/Services/platform_check.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'dart:io';
+import 'package:adaptive_breakpoints/adaptive_breakpoints.dart';
+import 'package:flutter/foundation.dart';
+
+class PlatformCheck {
+  String platformCheck({required BuildContext context}) {
+    String platform = '';
+
+    /* Used "adaptive_breakpoints: for defining Web for desktop tablet and mobile */
+    bool isDisplayDesktop(BuildContext context) => getWindowType(context) >= AdaptiveWindowType.medium;
+    bool isDisplaySmallDesktop(BuildContext context) => getWindowType(context) <= AdaptiveWindowType.medium && getWindowType(context) >= AdaptiveWindowType.small;
+    bool isDisplayMobile(BuildContext context) => getWindowType(context) <= AdaptiveWindowType.xsmall;
+
+    final isDesktop = isDisplayDesktop(context);
+    final isTablet = isDisplaySmallDesktop(context);
+    final isMobile = isDisplayMobile(context);
+
+    if (!kIsWeb) {
+      if (Platform.isAndroid) {
+        platform = 'Android';
+      } else if (Platform.isIOS) {
+        platform = 'iOS';
+      } else if (Platform.isMacOS) {
+        platform = 'MacOS';
+      } else if (Platform.isWindows) {
+        platform = 'Windows';
+      } else if (Platform.isLinux) {
+        platform = 'Linux';
+      } else if (Platform.isFuchsia) {
+        platform = 'Fuchsia';
+      }
+    } else {
+      if (isDesktop) {
+        platform = 'Web Desktop';
+      } else if (isTablet) {
+        platform = 'Web Tablet';
+      } else if (isMobile) {
+        platform = 'Web Mobile';
+      }
+    }
+    return platform;
+  }
+}

lib/Widgets/floater.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class Floater extends StatelessWidget {
+  final Widget widget;
+  const Floater({
+    Key? key,
+    required this.widget,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(10),
+      child: Material(borderRadius: BorderRadius.circular(10), color: Colors.white, elevation: 10, child: widget),
+    );
+  }
+}

lib/Widgets/top_tabbar.dart

@@ -0,0 +1,93 @@
+import 'package:floating_tabbar/Models/tab_item.dart';
+import 'package:flutter/material.dart';
+
+class TopTabbar extends StatefulWidget {
+  final List<TabItem> tabList;
+  final int initialIndex;
+  const TopTabbar({
+    Key? key,
+    required this.tabList,
+    this.initialIndex = 0,
+  }) : super(key: key);
+  @override
+  _TopTabbarState createState() => _TopTabbarState();
+}
+
+class _TopTabbarState extends State<TopTabbar> with SingleTickerProviderStateMixin {
+  List<String> getLabelList() {
+    List<String> labelList = [];
+    for (var element in widget.tabList) {
+      labelList.add(element.label);
+    }
+    return labelList;
+  }
+
+  List<Widget> getTabWidgetList() {
+    List<Widget> tabWidgetList = [];
+    for (var element in widget.tabList) {
+      tabWidgetList.add(element.tabWidget);
+    }
+    return tabWidgetList;
+  }
+
+  TabController? controller;
+  List<String> categories = [];
+  final List<Tab> _tabs = [];
+
+  List<Tab> getTabs(int count) {
+    _tabs.clear();
+    for (String e in categories) {
+      _tabs.add(getTab(e));
+    }
+    return _tabs;
+  }
+
+  Tab getTab(String categoryname) {
+    return Tab(text: categoryname);
+  }
+
+  @override
+  void initState() {
+    categories = getCategoryList();
+    controller = TabController(length: categories.length, vsync: this, initialIndex: widget.initialIndex);
+    getTabs(categories.length);
+
+    super.initState();
+  }
+
+  List<String> getCategoryList() {
+    List<String> list = getLabelList();
+    return list;
+  }
+
+  AppBar customAppbarwithTabbar({TabController? controller, required BuildContext context, required List<Widget> tabs}) {
+    return AppBar(
+      backgroundColor: Colors.transparent,
+      elevation: 0,
+      bottom: TabBar(
+        indicator: BoxDecoration(
+          borderRadius: BorderRadius.circular(20),
+          color: Theme.of(context).colorScheme.secondary.withOpacity(0.3),
+        ),
+        labelColor: Theme.of(context).primaryColor,
+        controller: controller,
+        tabs: tabs,
+        isScrollable: true,
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: PreferredSize(
+        preferredSize: const Size.fromHeight(50),
+        child: customAppbarwithTabbar(controller: controller, tabs: _tabs, context: context),
+      ),
+      body: TabBarView(
+        controller: controller,
+        children: getTabWidgetList(),
+      ),
+    );
+  }
+}