feat: add switch to allow toggling to use material 3

lib/advanced_theme/cubit/advanced_theme_cubit.dart

@@ -1,7 +1,3 @@
-import 'package:bloc/bloc.dart';
-import 'package:copy_with_extension/copy_with_extension.dart';
-import 'package:equatable/equatable.dart';
-import 'package:flutter/material.dart';
 import 'package:appainter/app_bar_theme/app_bar_theme.dart';
 import 'package:appainter/bottom_navigation_bar_theme/bottom_navigation_bar_theme.dart';
 import 'package:appainter/checkbox_theme/checkbox_theme.dart';
@@ -17,6 +13,10 @@ import 'package:appainter/switch_theme/switch_theme.dart';
 import 'package:appainter/tab_bar_theme/tab_bar_theme.dart';
 import 'package:appainter/text_button_theme/text_button_theme.dart';
 import 'package:appainter/text_theme/text_theme.dart';
+import 'package:bloc/bloc.dart';
+import 'package:copy_with_extension/copy_with_extension.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
 import 'package:random_color_scheme/random_color_scheme.dart';
 
 part 'advanced_theme_cubit.g.dart';
@@ -104,6 +104,10 @@ class AdvancedThemeCubit extends Cubit<AdvancedThemeState> {
     themeChanged(theme);
   }
 
+  void useMaterial3Changed(bool useMaterial3) {
+    emit(state.copyWith(useMaterial3: useMaterial3));
+  }
+
   ThemeData _getDefaultTheme({bool? isDark}) {
     return isDark ?? state.isDark ? ThemeData.dark() : ThemeData.light();
   }

lib/advanced_theme/cubit/advanced_theme_state.dart

@@ -3,9 +3,10 @@ part of 'advanced_theme_cubit.dart';
 @CopyWith()
 class AdvancedThemeState extends Equatable {
   final bool isDark;
+  final bool useMaterial3;
 
-  const AdvancedThemeState({this.isDark = false});
+  const AdvancedThemeState({this.isDark = false, this.useMaterial3 = false});
 
   @override
-  List<Object> get props => [isDark];
+  List<Object> get props => [isDark, useMaterial3];
 }

lib/basic_theme/cubit/basic_theme_cubit.dart

@@ -228,4 +228,8 @@ class BasicThemeCubit extends Cubit<BasicThemeState> {
     final colorScheme = state.colorScheme.copyWith(inversePrimary: color);
     emit(state.copyWith(colorScheme: colorScheme));
   }
+
+  void useMaterial3Changed(bool useMaterial3) {
+    emit(state.copyWith(useMaterial3: useMaterial3));
+  }
 }

lib/basic_theme/cubit/basic_theme_state.dart

@@ -6,11 +6,13 @@ class BasicThemeState extends Equatable {
   final Color seedColor;
   final ColorScheme colorScheme;
   final bool isDark;
+  final bool useMaterial3;
 
   BasicThemeState({
     Color? seedColor,
     ColorScheme? colorScheme,
     this.isDark = false,
+    this.useMaterial3 = false,
   })  : seedColor = seedColor ?? defaultSeedColor,
         colorScheme = colorScheme ?? _colorSchemeLight;
 
@@ -24,7 +26,7 @@ class BasicThemeState extends Equatable {
   );
 
   @override
-  List<Object> get props => [seedColor, colorScheme, isDark];
+  List<Object> get props => [seedColor, colorScheme, isDark, useMaterial3];
 
   static ColorScheme getColorScheme(bool isDark) {
     return isDark ? _colorSchemeDark : _colorSchemeLight;
@@ -34,7 +36,7 @@ class BasicThemeState extends Equatable {
     return ThemeData.localize(
       ThemeData.from(colorScheme: colorScheme),
       Typography.englishLike2018,
-    );
+    ).copyWith(useMaterial3: useMaterial3);
   }
 
   Brightness get brightness => isDark ? Brightness.dark : Brightness.light;

lib/home/views/home_page.dart

@@ -202,6 +202,8 @@ class _Editors extends StatelessWidget {
       children: const [
         _EditModeHeader(),
         VerticalPadding(),
+        _ThemeConfigs(),
+        VerticalPadding(),
         Expanded(
           child: TabBarView(
             children: [
@@ -258,22 +260,38 @@ class _EditModeActions extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<HomeCubit, HomeState>(
-      builder: (context, state) {
-        return Row(
-          children: const [
-            ThemeBrightnessSwitch(),
-            HorizontalPadding(
-              size: PaddingSize.medium,
-            ),
-            RandomThemeButton(),
-            HorizontalPadding(
-              size: PaddingSize.medium,
-            ),
-            ResetThemeButton(),
-          ],
-        );
-      },
+    return Row(
+      children: const [
+        RandomThemeButton(),
+        HorizontalPadding(),
+        ResetThemeButton(),
+      ],
+    );
+  }
+}
+
+class _ThemeConfigs extends StatelessWidget {
+  const _ThemeConfigs({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MyCard(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            'Theme configurations',
+            style: Theme.of(context).textTheme.headline6,
+          ),
+          Row(
+            children: const [
+              Material3Switch(),
+              HorizontalPadding(),
+              ThemeBrightnessSwitch(),
+            ],
+          ),
+        ],
+      ),
     );
   }
 }

lib/home/widgets/material3_switch.dart

@@ -0,0 +1,51 @@
+import 'package:appainter/advanced_theme/advanced_theme.dart';
+import 'package:appainter/basic_theme/basic_theme.dart';
+import 'package:appainter/home/home.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class Material3Switch extends StatelessWidget {
+  const Material3Switch({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Text(
+          'Material 3 (beta)',
+          style: Theme.of(context).textTheme.subtitle2,
+        ),
+        const _Switch(),
+      ],
+    );
+  }
+}
+
+class _Switch extends StatelessWidget {
+  const _Switch({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final editMode = context.watch<HomeCubit>().state.editMode;
+    final basicThemeUseMaterial3 =
+        context.watch<BasicThemeCubit>().state.useMaterial3;
+    final advancedThemeUseMaterial3 =
+        context.watch<AdvancedThemeCubit>().state.useMaterial3;
+
+    return Switch(
+      activeColor: Colors.blueGrey,
+      onChanged: (value) => _onChanged(context, editMode, value),
+      value: editMode == EditMode.basic
+          ? basicThemeUseMaterial3
+          : advancedThemeUseMaterial3,
+    );
+  }
+
+  void _onChanged(BuildContext context, EditMode editMode, bool value) {
+    if (editMode == EditMode.basic) {
+      context.read<BasicThemeCubit>().useMaterial3Changed(value);
+    } else {
+      context.read<AdvancedThemeCubit>().useMaterial3Changed(value);
+    }
+  }
+}

lib/home/widgets/widgets.dart

@@ -1,8 +1,9 @@
-export 'import_button.dart';
+export 'app_theme_mode_button.dart';
 export 'export_button.dart';
-export 'usage_button.dart';
 export 'github_button.dart';
+export 'import_button.dart';
+export 'material3_switch.dart';
 export 'random_theme_button.dart';
 export 'reset_theme_button.dart';
 export 'theme_brightness_switch.dart';
-export 'app_theme_mode_button.dart';
+export 'usage_button.dart';

lib/theme_preview/views/theme_preview.dart

@@ -1,6 +1,4 @@
-import 'package:device_preview/device_preview.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:appainter/advanced_theme/advanced_theme.dart';
 import 'package:appainter/app_bar_theme/cubit/app_bar_theme_cubit.dart';
 import 'package:appainter/basic_theme/basic_theme.dart';
 import 'package:appainter/bottom_navigation_bar_theme/bottom_navigation_bar_theme.dart';
@@ -19,6 +17,9 @@ import 'package:appainter/tab_bar_theme/tab_bar_theme.dart';
 import 'package:appainter/text_button_theme/text_button_theme.dart';
 import 'package:appainter/text_theme/text_theme.dart';
 import 'package:appainter/theme_preview/theme_preview.dart';
+import 'package:device_preview/device_preview.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 class ThemePreview extends StatelessWidget {
@@ -37,6 +38,7 @@ class ThemePreview extends StatelessWidget {
       builder: (context, state) {
         final basicTheme = context.watch<BasicThemeCubit>().state.theme;
 
+        final advancedThemeState = context.watch<AdvancedThemeCubit>().state;
         final colorTheme = context.watch<ColorThemeCubit>().state;
         final appBarTheme = context.watch<AppBarThemeCubit>().state.theme;
         final tabBarTheme = context.watch<TabBarThemeCubit>().state.theme;
@@ -89,6 +91,7 @@ class ThemePreview extends StatelessWidget {
             context.watch<OverlineTextStyleCubit>().state.style;
 
         final advancedTheme = ThemeData(
+          useMaterial3: advancedThemeState.useMaterial3,
           fontFamily: fontFamily,
           colorScheme: colorTheme.colorScheme,
           brightness: colorTheme.colorScheme.brightness,

test/advanced_theme/advanced_theme_cubit_test.dart

@@ -1,6 +1,3 @@
-import 'package:bloc_test/bloc_test.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
 import 'package:appainter/advanced_theme/advanced_theme.dart';
 import 'package:appainter/app_bar_theme/app_bar_theme.dart';
 import 'package:appainter/bottom_navigation_bar_theme/bottom_navigation_bar_theme.dart';
@@ -17,6 +14,9 @@ import 'package:appainter/switch_theme/switch_theme.dart';
 import 'package:appainter/tab_bar_theme/tab_bar_theme.dart';
 import 'package:appainter/text_button_theme/text_button_theme.dart';
 import 'package:appainter/text_theme/text_theme.dart';
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:random_color_scheme/random_color_scheme.dart';
 
@@ -192,6 +192,18 @@ void main() {
       );
     }
   });
+
+  group('test use material 3', () {
+    for (var useMaterial3 in [true, false]) {
+      blocTest<AdvancedThemeCubit, AdvancedThemeState>(
+        'should emit useMaterial3=$useMaterial3',
+        build: () => advancedThemeCubit,
+        seed: () => AdvancedThemeState(useMaterial3: !useMaterial3),
+        act: (cubit) => cubit.useMaterial3Changed(useMaterial3),
+        expect: () => [AdvancedThemeState(useMaterial3: useMaterial3)],
+      );
+    }
+  });
 }
 
 ThemeData _getDefaultTheme({required bool isDark}) {

test/basic_theme/basic_theme_cubit_test.dart

@@ -474,4 +474,15 @@ void main() {
       ),
     ],
   );
+  group('test use material 3', () {
+    for (var useMaterial3 in [true, false]) {
+      blocTest<BasicThemeCubit, BasicThemeState>(
+        'should emit useMaterial3=$useMaterial3',
+        build: () => cubit,
+        seed: () => BasicThemeState(useMaterial3: !useMaterial3),
+        act: (cubit) => cubit.useMaterial3Changed(useMaterial3),
+        expect: () => [BasicThemeState(useMaterial3: useMaterial3)],
+      );
+    }
+  });
 }

test/home/views/home_page_test.dart

@@ -44,6 +44,7 @@ void main() {
   });
 
   Future<void> pumpApp(WidgetTester tester) async {
+    await tester.binding.setSurfaceSize(const Size(2400, 850));
     await tester.pumpApp(
       const HomePage(),
       homeRepo: homeRepo,
@@ -66,9 +67,6 @@ void main() {
       testWidgets(
         'editor should change to $mode',
         (tester) async {
-          binding.window.physicalSizeTestValue = const Size(1280, 720);
-          binding.window.devicePixelRatioTestValue = 1.0;
-
           when(() => homeCubit.state).thenReturn(HomeState(editMode: mode));
 
           await pumpApp(tester);