Tests are working

forui/example/lib/main.dart

@@ -17,12 +17,7 @@ class Application extends StatelessWidget {
           data: FThemes.zinc.light,
           child: Scaffold(
             backgroundColor: FThemes.zinc.light.colorScheme.background,
-            body: const Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                ExampleWidget(),
-              ],
-            ),
+            body: const ExampleWidget(),
           ),
         ),
       );
@@ -45,10 +40,11 @@ class _ExampleWidgetState extends State<ExampleWidget> {
   Widget build(BuildContext context) {
     final font = context.theme.typography;
 
-    return Expanded(
-      child: ListView(
-        children: [
-          FHeader(
+    return Column(
+      mainAxisSize:  MainAxisSize.min,
+      children: [
+        SafeArea(
+          child: FHeader(
             title: 'Notification - A very long message',
             actions: [
               FHeaderAction(
@@ -61,61 +57,63 @@ class _ExampleWidgetState extends State<ExampleWidget> {
               ),
             ],
           ),
-          const SizedBox(height: 40),
-          FCard(
-            title: 'Notification',
-            subtitle: 'You have 3 unread messages.',
-            child: const Text(
-              'Material default font size of 14. (text-sm)',
-              style: TextStyle(fontSize: 14),
-            ),
-          ),
-          const SizedBox(height: 10),
-          Container(
-            alignment: Alignment.centerLeft,
-            child: FBadge(label: 'New'),
-          ),
-          Text(
-            'text-xs',
-            style: TextStyle(fontSize: font.xs).scale(font),
-          ),
-          Text(
-            'text-sm',
-            style: TextStyle(fontSize: font.sm).scale(font),
-          ),
-          Text(
-            'text-base',
-            style: TextStyle(fontSize: font.base).scale(font),
-          ),
-          Text(
-            'text-lg',
-            style: TextStyle(fontSize: font.lg).scale(font),
+        ),
+        const SizedBox(height: 40),
+        FCard(
+          title: 'Notification',
+          subtitle: 'You have 3 unread messages.',
+          child: const Text(
+            'Material default font size of 14. (text-sm)',
+            style: TextStyle(fontSize: 14),
           ),
-          const SizedBox(height: 10),
-          FButton(
-            design: FButtonVariant.destructive,
-            text: 'Delete?',
-            onPress: () => showAdaptiveDialog(
-              context: context,
-              builder: (context) => FDialog(
-                alignment: FDialogAlignment.horizontal,
-                title: 'Are you absolutely sure?',
-                subtitle:
-                    'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
-                actions: [
-                  FButton(
-                      design: FButtonVariant.outlined,
-                      text: 'Cancel',
-                      onPress: () {
-                        Navigator.of(context).pop();
-                      }),
-                  FButton(text: 'Continue', onPress: () {}),
-                ],
-              ),
+        ),
+        const SizedBox(height: 10),
+        Container(
+          alignment: Alignment.centerLeft,
+          child: FBadge(label: 'New'),
+        ),
+        Text(
+          'text-xs',
+          style: TextStyle(fontSize: font.xs).scale(font),
+        ),
+        Text(
+          'text-sm',
+          style: TextStyle(fontSize: font.sm).scale(font),
+        ),
+        Text(
+          'text-base',
+          style: TextStyle(fontSize: font.base).scale(font),
+        ),
+        Text(
+          'text-lg',
+          style: TextStyle(fontSize: font.lg).scale(font),
+        ),
+        const SizedBox(height: 10),
+        FButton(
+          design: FButtonVariant.destructive,
+          text: 'Delete?',
+          onPress: () => showAdaptiveDialog(
+            context: context,
+            builder: (context) => FDialog(
+              alignment: FDialogAlignment.horizontal,
+              title: 'Are you absolutely sure?',
+              subtitle:
+                  'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
+              actions: [
+                FButton(
+                    design: FButtonVariant.outlined,
+                    text: 'Cancel',
+                    onPress: () {
+                      Navigator.of(context).pop();
+                    }),
+                FButton(text: 'Continue', onPress: () {}),
+              ],
             ),
           ),
-          const SizedBox(height: 10),
-          FTabs(
+        ),
+        const SizedBox(height: 10),
+        Expanded(
+          child: FTabs(
             tabs: [
               FTabEntry(
                 label: 'Account',
@@ -149,8 +147,8 @@ class _ExampleWidgetState extends State<ExampleWidget> {
               ),
             ],
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }

forui/lib/src/widgets/tabs/tabs.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:forui/forui.dart';
 import 'package:flutter/foundation.dart';
 
+import 'package:flutter_localizations/flutter_localizations.dart';
+
 part 'tabs_style.dart';
 
 part 'tab_controller.dart';
@@ -49,15 +51,15 @@ class FTabs extends StatefulWidget {
   final ValueChanged<int>? onTap;
 
   /// Creates a [FTabs].
-  const FTabs({
+  FTabs({
     required this.tabs,
     this.initialIndex = 0,
     this.scrollable = false,
     this.controller,
     this.style,
     this.onTap,
     super.key,
-  });
+  }) : assert(tabs.isNotEmpty, 'Must have at least 1 tab provided');
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -88,41 +90,67 @@ class _FTabsState extends State<FTabs> with SingleTickerProviderStateMixin {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.theme;
+    final typography = theme.typography;
     final style = widget.style ?? context.theme.tabsStyle;
     final tabs = widget.tabs;
-
-    return Column(
-      children: [
-        DecoratedBox(
-          decoration: style.decoration,
-          child: TabBar(
-            isScrollable: widget.scrollable,
-            controller: widget.controller?._controller ?? _controller._controller,
-            padding: style.padding,
-            indicatorSize: style.indicatorSize,
-            indicator: style.indicator,
-            unselectedLabelStyle: style.unselectedLabel,
-            labelStyle: style.selectedLabel,
-            dividerColor: Colors.transparent,
-            tabs: [
-              for (final tab in tabs)
-                Tab(
-                  height: style.height,
-                  child: tab.label,
-                )
-            ],
-            onTap: (index) {
-              setState(() {
-                _selectedTab = index;
-              });
-              widget.onTap?.call(_selectedTab);
-            },
+    final materialLocalizations = Localizations.of<MaterialLocalizations>(context, MaterialLocalizations);
+
+    final widget_ = Material(
+      color: Colors.transparent,
+      child: Column(
+        children: [
+          DecoratedBox(
+            decoration: style.decoration,
+            child: TabBar(
+              isScrollable: widget.scrollable,
+              controller: widget.controller?._controller ?? _controller._controller,
+              padding: style.padding,
+              indicatorSize: style.indicatorSize,
+              indicator: style.indicator,
+              unselectedLabelStyle: style.unselectedLabel.scale(typography),
+              labelStyle: style.selectedLabel.scale(typography),
+              dividerColor: Colors.transparent,
+              tabs: [
+                for (final tab in tabs)
+                  Tab(
+                    height: style.height,
+                    child: tab.label,
+                  )
+              ],
+              onTap: (index) {
+                setState(() {
+                  _selectedTab = index;
+                });
+                widget.onTap?.call(_selectedTab);
+              },
+            ),
           ),
-        ),
-        SizedBox(height: style.spacing),
-        tabs[_selectedTab].content,
-      ],
+          SizedBox(height: style.spacing),
+          // A workaround to ensure any widgets under Tabs do not revert to material text style
+          // TODO: abstract out logic
+          DefaultTextStyle(
+            style: theme.typography.toTextStyle(
+              fontSize: theme.typography.base,
+              color: theme.colorScheme.foreground,
+            ),
+            child: tabs[_selectedTab].content,
+          ),
+        ],
+      ),
     );
+
+    return materialLocalizations == null
+        ? Localizations(
+            locale: Localizations.maybeLocaleOf(context) ?? const Locale('en', 'US'),
+            delegates: const [
+              GlobalMaterialLocalizations.delegate,
+              GlobalWidgetsLocalizations.delegate,
+              GlobalCupertinoLocalizations.delegate,
+            ],
+            child: widget_,
+          )
+        : widget_;
   }
 
   @override

forui/lib/src/widgets/tabs/tabs_style.dart

@@ -49,11 +49,15 @@ final class FTabsStyle with Diagnosticable {
         unselectedLabel = TextStyle(
           fontSize: typography.sm,
           fontWeight: FontWeight.w500,
+          // required as material implementation uses DefaultTabStyle
+          fontFamily: typography.defaultFontFamily,
           color: colorScheme.mutedForeground,
         ),
         selectedLabel = TextStyle(
           fontSize: typography.sm,
           fontWeight: FontWeight.w500,
+          // required as material implementation uses DefaultTabStyle
+          fontFamily: typography.defaultFontFamily,
           color: colorScheme.foreground,
         ),
         indicatorSize = TabBarIndicatorSize.tab,

forui/test/src/widgets/tabs/tabs_golden_test.dart

@@ -0,0 +1,71 @@
+@Tags(['golden'])
+library;
+
+import 'package:flutter/material.dart';
+
+import 'package:flutter_test/flutter_test.dart';
+
+import 'package:forui/forui.dart';
+import '../../test_scaffold.dart';
+
+void main() {
+  group('FTabs', () {
+    for (final (name, theme, _) in TestScaffold.themes) {
+      testWidgets('default - $name', (tester) async {
+        await tester.pumpWidget(
+          MaterialApp(
+            home: TestScaffold(
+              data: theme,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Expanded(
+                    child: FTabs(
+                      tabs: [
+                        FTabEntry(
+                          label: 'Account',
+                          content: FCard(
+                            title: 'Account',
+                            subtitle: 'Make changes to your account here. Click save when you are done.',
+                            child: Column(
+                              children: [
+                                Container(
+                                  color: Colors.blue,
+                                  height: 100,
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+                        FTabEntry(
+                          label: 'Password',
+                          content: FCard(
+                            title: 'Password',
+                            subtitle: 'Change your password here. After saving, you will be logged out.',
+                            child: Column(
+                              children: [
+                                Container(
+                                  color: Colors.red,
+                                  height: 100,
+                                )
+                              ],
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+        );
+
+        await expectLater(
+          find.byType(TestScaffold),
+          matchesGoldenFile('tabs/$name-tab.png'),
+        );
+      });
+    }
+  });
+}