ThemedTabStyle

Author: PHKenny

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
+## 7.4.10
+
+- New `ThemedTabStyle` enum to define the style of the `ThemedTabView` tabs.
+
 ## 7.4.9
+
 - Add `additionalWidgets` in `ThemedTabView`.
 
 ## 7.4.8

example/pubspec.lock

@@ -374,7 +374,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "7.4.9"
+    version: "7.4.10"
   leak_tracker:
     dependency: transitive
     description:

lib/src/tabs/src/style.dart

@@ -0,0 +1,9 @@
+part of '../tabs.dart';
+
+enum ThemedTabStyle {
+  /// Styling as a text button when active with an underline
+  underline,
+
+  /// Styling as a filled tonal button when active
+  filledTonal,
+}

lib/src/tabs/src/tab.dart

@@ -38,6 +38,9 @@ class ThemedTab extends StatelessWidget {
   /// This information is only used when the tab is a child of a [ThemedTabView]
   final Widget child;
 
+  /// [style] is the style of the tab
+  final ThemedTabStyle style;
+
   /// [ThemedTab] is a tab for the [TabBar] widget
   const ThemedTab({
     super.key,
@@ -51,34 +54,75 @@ class ThemedTab extends StatelessWidget {
     this.padding = const EdgeInsets.all(10),
     this.color,
     this.child = const SizedBox(),
+    this.style = ThemedTabStyle.filledTonal,
   }) : assert(labelText != null || label != null);
 
+  ThemedTab overrideStyle(ThemedTabStyle newStyle) {
+    return ThemedTab(
+      key: key,
+      labelText: labelText,
+      label: label,
+      iconSize: iconSize,
+      leading: leading,
+      leadingIcon: leadingIcon,
+      trailing: trailing,
+      trailingIcon: trailingIcon,
+      padding: padding,
+      color: color,
+      child: child,
+      style: newStyle,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    final primary = Theme.of(context).colorScheme.primary;
+    Color backgroundColor = color ?? DefaultTextStyle.of(context).style.color ?? primary;
+    final bool redMatch = primary.r == backgroundColor.r;
+    final bool greenMatch = primary.g == backgroundColor.g;
+    final bool blueMatch = primary.b == backgroundColor.b;
+
+    final isActive = redMatch && greenMatch && blueMatch;
+
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 200),
       padding: padding,
-      child: Row(
-        children: [
-          if (leading != null || leadingIcon != null) ...[
-            leading ??
-                Icon(
-                  leadingIcon!,
-                  size: iconSize,
-                  color: color,
+      decoration: style == ThemedTabStyle.filledTonal
+          ? BoxDecoration(
+              color: isActive ? backgroundColor.withAlpha((255 * 0.2).toInt()) : Colors.transparent,
+              borderRadius: BorderRadius.circular(8),
+            )
+          : null,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 10),
+        child: RichText(
+          text: TextSpan(
+            children: [
+              if (leading != null || leadingIcon != null) ...[
+                WidgetSpan(
+                  alignment: PlaceholderAlignment.middle,
+                  child: leading ?? Icon(leadingIcon!, size: iconSize, color: backgroundColor),
+                ),
+                const WidgetSpan(child: SizedBox(width: 10)),
+              ],
+              if (label != null) ...[
+                WidgetSpan(child: label!),
+              ] else ...[
+                TextSpan(
+                  text: labelText,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: backgroundColor),
                 ),
-            const SizedBox(width: 10),
-          ],
-          label ?? Text(labelText ?? '', style: TextStyle(color: color)),
-          if (trailing != null || trailingIcon != null) ...[
-            const SizedBox(width: 10),
-            trailing ??
-                Icon(
-                  trailingIcon!,
-                  size: iconSize,
-                  color: color,
+              ],
+              if (trailing != null || trailingIcon != null) ...[
+                const WidgetSpan(child: SizedBox(width: 10)),
+                WidgetSpan(
+                  alignment: PlaceholderAlignment.middle,
+                  child: trailing ?? Icon(trailingIcon!, size: iconSize, color: backgroundColor),
                 ),
-          ],
-        ],
+              ],
+            ],
+          ),
+        ),
       ),
     );
   }

lib/src/tabs/src/view.dart

@@ -39,6 +39,9 @@ class ThemedTabView extends StatefulWidget {
   /// [additionalWidgets] are additional widgets to display in the tab bar view
   final List<Widget> additionalWidgets;
 
+  /// [style] is the style of the tab view
+  final ThemedTabStyle style;
+
   /// [ThemedTabView] is a tab for the [TabBar] widget
   ///
   /// Be careful!
@@ -57,6 +60,7 @@ class ThemedTabView extends StatefulWidget {
     this.initialPosition = 0,
     this.onTabIndex,
     this.additionalWidgets = const [],
+    this.style = ThemedTabStyle.filledTonal,
   });
 
   @override
@@ -122,7 +126,10 @@ class _ThemedTabViewState extends State<ThemedTabView> with TickerProviderStateM
         children: [
           Theme(
             data: Theme.of(context).copyWith(
-              tabBarTheme: Theme.of(context).tabBarTheme.copyWith(tabAlignment: TabAlignment.start),
+              tabBarTheme: Theme.of(context).tabBarTheme.copyWith(
+                tabAlignment: TabAlignment.start,
+                indicatorColor: widget.style == ThemedTabStyle.filledTonal ? Colors.transparent : null,
+              ),
             ),
             child: Row(
               children: [
@@ -146,7 +153,9 @@ class _ThemedTabViewState extends State<ThemedTabView> with TickerProviderStateM
                 Expanded(
                   child: TabBar(
                     isScrollable: true,
-                    tabs: widget.tabs,
+                    tabs: widget.tabs.map((e) => e.overrideStyle(widget.style)).toList(),
+                    labelPadding: EdgeInsets.zero,
+                    splashBorderRadius: widget.style == ThemedTabStyle.filledTonal ? BorderRadius.circular(8) : null,
                     controller: _tabController,
                   ),
                 ),

lib/src/tabs/tabs.dart

@@ -6,3 +6,4 @@ import 'package:layrz_theme/src/buttons/buttons.dart';
 
 part 'src/tab.dart';
 part 'src/view.dart';
+part 'src/style.dart';

pubspec.yaml

@@ -1,6 +1,6 @@
 name: layrz_theme
 description: Layrz standard styling library for Flutter. Widget library following the Material Design 3 guidelines, with a focus on reliavility and functionality.
-version: "7.4.9"
+version: "7.4.10"
 homepage: https://theme.layrz.com
 repository: https://github.com/goldenm-software/layrz_theme