feat(AdvancedEditor): add filled button theme editor (#1270)

lib/advanced_theme/cubit/advanced_theme_cubit.dart

@@ -27,6 +27,7 @@ class AdvancedThemeCubit extends Cubit<AdvancedThemeState> {
   final BottomNavigationBarThemeCubit bottomNavigationBarThemeCubit;
   final FloatingActionButtonThemeCubit floatingActionButtonThemeCubit;
   final ElevatedButtonThemeCubit elevatedButtonThemeCubit;
+  final FilledButtonThemeCubit filledButtonThemeCubit;
   final OutlinedButtonThemeCubit outlinedButtonThemeCubit;
   final TextButtonThemeCubit textButtonThemeCubit;
   final IconThemeCubit iconThemeCubit;
@@ -44,6 +45,7 @@ class AdvancedThemeCubit extends Cubit<AdvancedThemeState> {
     required this.bottomNavigationBarThemeCubit,
     required this.floatingActionButtonThemeCubit,
     required this.elevatedButtonThemeCubit,
+    required this.filledButtonThemeCubit,
     required this.outlinedButtonThemeCubit,
     required this.textButtonThemeCubit,
     required this.iconThemeCubit,
@@ -70,6 +72,7 @@ class AdvancedThemeCubit extends Cubit<AdvancedThemeState> {
       theme.floatingActionButtonTheme,
     );
     elevatedButtonThemeCubit.styleChanged(theme.elevatedButtonTheme.style);
+    filledButtonThemeCubit.styleChanged(theme.filledButtonTheme.style);
     outlinedButtonThemeCubit.styleChanged(theme.outlinedButtonTheme.style);
     textButtonThemeCubit.styleChanged(theme.textButtonTheme.style);
     iconThemeCubit.themeChanged(theme.iconTheme);

lib/advanced_theme/views/advanced_editor.dart

@@ -27,6 +27,7 @@ class AdvancedEditor extends StatelessWidget {
         BottomNavigationBarThemeEditor(),
         FloatingActionButtonThemeEditor(),
         ElevatedButtonThemeEditor(),
+        FilledButtonThemeEditor(),
         OutlinedButtonThemeEditor(),
         TextButtonThemeEditor(),
         IconThemeEditor(),

lib/app.dart

@@ -68,6 +68,9 @@ class MyApp extends StatelessWidget {
     final elevatedButtonThemeCubit = ElevatedButtonThemeCubit(
       colorThemeCubit: colorThemeCubit,
     );
+    final filledButtonThemeCubit = FilledButtonThemeCubit(
+      colorThemeCubit: colorThemeCubit,
+    );
     final outlinedButtonThemeCubit = OutlinedButtonThemeCubit(
       colorThemeCubit: colorThemeCubit,
     );
@@ -134,6 +137,7 @@ class MyApp extends StatelessWidget {
       bottomNavigationBarThemeCubit: bottomNavigationBarThemeCubit,
       floatingActionButtonThemeCubit: floatingActionButtonThemeCubit,
       elevatedButtonThemeCubit: elevatedButtonThemeCubit,
+      filledButtonThemeCubit: filledButtonThemeCubit,
       outlinedButtonThemeCubit: outlinedButtonThemeCubit,
       textButtonThemeCubit: textButtonThemeCubit,
       iconThemeCubit: iconThemeCubit,
@@ -174,6 +178,7 @@ class MyApp extends StatelessWidget {
           ),
           BlocProvider(create: (_) => floatingActionButtonThemeCubit),
           BlocProvider(create: (_) => elevatedButtonThemeCubit),
+          BlocProvider(create: (_) => filledButtonThemeCubit),
           BlocProvider(create: (_) => outlinedButtonThemeCubit),
           BlocProvider(create: (_) => textButtonThemeCubit),
           BlocProvider(create: (_) => iconThemeCubit),

lib/button_theme/button_theme.dart

@@ -3,6 +3,8 @@ export 'abstract_flat_button_style/abstract_flat_button_style_cubit.dart';
 export 'abstract_flat_button_style/abstract_flat_button_style_editor.dart';
 export 'elevated_button_theme/elevated_button_theme_cubit.dart';
 export 'elevated_button_theme/elevated_button_theme_editor.dart';
+export 'filled_button_theme/filled_button_theme_cubit.dart';
+export 'filled_button_theme/filled_button_theme_editor.dart';
 export 'models/models.dart';
 export 'outlined_button_theme/outlined_button_theme_cubit.dart';
 export 'outlined_button_theme/outlined_button_theme_editor.dart';

lib/button_theme/filled_button_theme/filled_button_theme_cubit.dart

@@ -0,0 +1,23 @@
+import 'package:appainter/button_theme/button_theme.dart';
+import 'package:flutter/material.dart';
+
+class FilledButtonThemeCubit extends AbstractFlatButtonStyleCubit {
+  FilledButtonThemeCubit({required super.colorThemeCubit});
+
+  @override
+  OutlinedBorder get defaultShape => const StadiumBorder();
+
+  @override
+  ButtonStyle getDefaultStyle(ColorScheme colorScheme) {
+    return FilledButton.styleFrom(
+      backgroundColor: colorScheme.secondaryContainer,
+      foregroundColor: colorScheme.onSecondaryContainer,
+      disabledBackgroundColor: colorScheme.onSurface.withOpacity(0.12),
+      disabledForegroundColor: colorScheme.onSurface.withOpacity(0.38),
+      shadowColor: colorScheme.shadow,
+      elevation: 0,
+      minimumSize: const Size(64, 40),
+      shape: defaultShape,
+    );
+  }
+}

lib/button_theme/filled_button_theme/filled_button_theme_editor.dart

@@ -0,0 +1,9 @@
+import 'package:appainter/button_theme/button_theme.dart';
+
+class FilledButtonThemeEditor
+    extends AbstractFlatButtonStyleEditor<FilledButtonThemeCubit> {
+  const FilledButtonThemeEditor({super.key});
+
+  @override
+  String get header => 'Filled button';
+}

lib/home/widgets/export_button.dart

@@ -62,6 +62,9 @@ class ExportButton extends StatelessWidget {
     final elevatedButtonTheme = ElevatedButtonThemeData(
       style: context.read<ElevatedButtonThemeCubit>().state.style,
     );
+    final filledButtonTheme = FilledButtonThemeData(
+      style: context.read<FilledButtonThemeCubit>().state.style,
+    );
     final outlinedButtonTheme = OutlinedButtonThemeData(
       style: context.read<OutlinedButtonThemeCubit>().state.style,
     );
@@ -137,6 +140,7 @@ class ExportButton extends StatelessWidget {
       bottomNavigationBarTheme: bottomNavBarTheme,
       floatingActionButtonTheme: floatingActionButtonTheme,
       elevatedButtonTheme: elevatedButtonTheme,
+      filledButtonTheme: filledButtonTheme,
       outlinedButtonTheme: outlinedButtonTheme,
       textButtonTheme: textButtonTheme,
       iconTheme: iconTheme,

lib/theme_preview/views/buttons_page.dart

@@ -1,7 +1,7 @@
-import 'package:flutter/material.dart';
 import 'package:appainter/common/consts.dart';
 import 'package:appainter/theme_preview/views/preview_body.dart';
 import 'package:appainter/widgets/widgets.dart';
+import 'package:flutter/material.dart';
 
 const Icon _buttonIcon = Icon(Icons.favorite);
 
@@ -45,6 +45,32 @@ class ButtonsPage extends PreviewBody {
             ),
           ],
         ),
+        _ButtonsRow(
+          children: [
+            FilledButton(
+              onPressed: () {},
+              child: const Text('Filled button'),
+            ),
+            const FilledButton(
+              onPressed: null,
+              child: Text('Disabled'),
+            ),
+          ],
+        ),
+        _ButtonsRow(
+          children: [
+            FilledButton.icon(
+              onPressed: () {},
+              icon: _buttonIcon,
+              label: const Text('Filled button icon'),
+            ),
+            FilledButton.icon(
+              onPressed: null,
+              icon: _buttonIcon,
+              label: const Text('Filled'),
+            ),
+          ],
+        ),
         _ButtonsRow(
           children: [
             OutlinedButton(

lib/theme_preview/views/theme_preview.dart

@@ -47,6 +47,9 @@ class ThemePreview extends StatelessWidget {
         final elevatedButtonTheme = ElevatedButtonThemeData(
           style: context.watch<ElevatedButtonThemeCubit>().state.style,
         );
+        final filledButtonTheme = FilledButtonThemeData(
+          style: context.watch<FilledButtonThemeCubit>().state.style,
+        );
         final outlinedButtonTheme = OutlinedButtonThemeData(
           style: context.watch<OutlinedButtonThemeCubit>().state.style,
         );
@@ -125,6 +128,7 @@ class ThemePreview extends StatelessWidget {
           bottomNavigationBarTheme: bottomNavigationBarTheme,
           floatingActionButtonTheme: floatingActionButtonTheme,
           elevatedButtonTheme: elevatedButtonTheme,
+          filledButtonTheme: filledButtonTheme,
           outlinedButtonTheme: outlinedButtonTheme,
           textButtonTheme: textButtonTheme,
           iconTheme: iconTheme,

macos/Podfile.lock

@@ -9,16 +9,16 @@ PODS:
     - FirebaseAnalytics (~> 10.27.0)
   - Firebase/CoreOnly (10.27.0):
     - FirebaseCore (= 10.27.0)
-  - firebase_analytics (11.0.0):
+  - firebase_analytics (11.0.1):
     - Firebase/Analytics (= 10.27.0)
     - firebase_core
     - FlutterMacOS
-  - firebase_auth (5.0.0):
+  - firebase_auth (5.1.0):
     - Firebase/Auth (~> 10.27.0)
     - Firebase/CoreOnly (~> 10.27.0)
     - firebase_core
     - FlutterMacOS
-  - firebase_core (3.0.0):
+  - firebase_core (3.1.0):
     - Firebase/CoreOnly (~> 10.27.0)
     - FlutterMacOS
   - FirebaseAnalytics (10.27.0):
@@ -189,9 +189,9 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   Firebase: 26b040b20866a55f55eb3611b9fcf3ae64816b86
-  firebase_analytics: 79645347d6b5d49a08bee45c7975477e93dff383
-  firebase_auth: e5aa229f58913e922c26e9d3b37a4664adeb40f3
-  firebase_core: 0b3b9c6c93f774c7392f1f9a6712f0d9ce9b1771
+  firebase_analytics: 2370857414db883542ff3cc0cf4634d1de55b37b
+  firebase_auth: 4a2a30c21caf945540f5d0f377c071795fe718d2
+  firebase_core: 3cf30a8be4c850f7192bf9597f5939d0c3af706b
   FirebaseAnalytics: f9211b719db260cc91aebee8bb539cb367d0dfd1
   FirebaseAppCheckInterop: 5315f40293191bfec04b2cfab0215760e441540a
   FirebaseAuth: 77a012b7e08042bf44d0db835ca2e86e6ca7bbd3

test/advanced_theme/advanced_theme_cubit_test.dart

@@ -31,6 +31,7 @@ void main() {
   late BottomNavigationBarThemeCubit bottomNavBarThemeCubit;
   late FloatingActionButtonThemeCubit floatingActionButtonThemeCubit;
   late ElevatedButtonThemeCubit elevatedButtonThemeCubit;
+  late FilledButtonThemeCubit filledButtonThemeCubit;
   late OutlinedButtonThemeCubit outlinedButtonThemeCubit;
   late TextButtonThemeCubit textButtonThemeCubit;
   late IconThemeCubit iconThemeCubit;
@@ -48,6 +49,7 @@ void main() {
     bottomNavBarThemeCubit = MockBottomNavigationBarThemeCubit();
     floatingActionButtonThemeCubit = MockFloatingActionButtonThemeCubit();
     elevatedButtonThemeCubit = MockElevatedButtonThemeCubit();
+    filledButtonThemeCubit = MockFilledButtonThemeCubit();
     outlinedButtonThemeCubit = MockOutlinedButtonThemeCubit();
     textButtonThemeCubit = MockTextButtonThemeCubit();
     iconThemeCubit = MockIconThemeCubit();
@@ -65,6 +67,7 @@ void main() {
       bottomNavigationBarThemeCubit: bottomNavBarThemeCubit,
       floatingActionButtonThemeCubit: floatingActionButtonThemeCubit,
       elevatedButtonThemeCubit: elevatedButtonThemeCubit,
+      filledButtonThemeCubit: filledButtonThemeCubit,
       outlinedButtonThemeCubit: outlinedButtonThemeCubit,
       textButtonThemeCubit: textButtonThemeCubit,
       iconThemeCubit: iconThemeCubit,
@@ -94,6 +97,9 @@ void main() {
         theme.elevatedButtonTheme.style,
       ),
     ).called(1);
+    verify(
+      () => filledButtonThemeCubit.styleChanged(theme.filledButtonTheme.style),
+    ).called(1);
     verify(
       () => outlinedButtonThemeCubit.styleChanged(
         theme.outlinedButtonTheme.style,

test/button_theme/filled_button_theme/filled_button_theme_cubit_test.dart

@@ -0,0 +1,48 @@
+import 'package:appainter/button_theme/button_theme.dart';
+import 'package:appainter/color_theme/color_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+import '../../mocks.dart';
+import '../../utils.dart';
+
+void main() {
+  final colorScheme = ThemeData().colorScheme;
+  const shape = StadiumBorder();
+
+  late ColorThemeCubit colorThemeCubit;
+  late FilledButtonThemeCubit sut;
+
+  setUp(() {
+    colorThemeCubit = MockColorThemeCubit();
+    when(() => colorThemeCubit.state).thenReturn(ColorThemeState());
+
+    sut = FilledButtonThemeCubit(colorThemeCubit: colorThemeCubit);
+  });
+
+  test('default shape', () {
+    final actual = sut.defaultShape;
+    expect(actual, equals(shape));
+  });
+
+  test('get default style', () {
+    final actual = sut.getDefaultStyle(colorScheme);
+    final expected = FilledButton.styleFrom(
+      backgroundColor: colorScheme.secondaryContainer,
+      foregroundColor: colorScheme.onSecondaryContainer,
+      disabledBackgroundColor: colorScheme.onSurface.withOpacity(0.12),
+      disabledForegroundColor: colorScheme.onSurface.withOpacity(0.38),
+      shadowColor: colorScheme.shadow,
+      elevation: 0,
+      minimumSize: const Size(64, 40),
+      shape: shape,
+    );
+
+    verifyMaterialProperty(actual.backgroundColor!, expected.backgroundColor!);
+    verifyMaterialProperty(actual.foregroundColor!, expected.foregroundColor!);
+    verifyMaterialProperty(actual.overlayColor!, expected.overlayColor!);
+    verifyMaterialProperty(actual.shadowColor!, expected.shadowColor!);
+    verifyMaterialProperty(actual.elevation!, expected.elevation!);
+  });
+}

test/button_theme/filled_button_theme/filled_button_theme_editor_test.dart

@@ -0,0 +1,20 @@
+import 'package:appainter/button_theme/button_theme.dart';
+import 'package:appainter/color_theme/color_theme.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+
+import '../../mocks.dart';
+
+Future<void> main() async {
+  late ColorThemeCubit colorThemeCubit;
+  late FilledButtonThemeEditor sut;
+
+  setUp(() {
+    colorThemeCubit = MockColorThemeCubit();
+    when(() => colorThemeCubit.state).thenReturn(ColorThemeState());
+
+    sut = const FilledButtonThemeEditor();
+  });
+
+  test('header', () => expect(sut.header, equals('Filled button')));
+}

test/mocks.dart

@@ -88,6 +88,9 @@ class MockFloatingActionButtonThemeCubit
 class MockElevatedButtonThemeCubit extends MockCubit<ButtonStyleState>
     implements ElevatedButtonThemeCubit {}
 
+class MockFilledButtonThemeCubit extends MockCubit<ButtonStyleState>
+    implements FilledButtonThemeCubit {}
+
 class MockOutlinedButtonThemeCubit extends MockCubit<ButtonStyleState>
     implements OutlinedButtonThemeCubit {}
 

test/pump_app.dart

@@ -69,6 +69,8 @@ extension PumpApp on WidgetTester {
         MockFloatingActionButtonThemeCubit();
     final ElevatedButtonThemeCubit elevatedButtonThemeCubit =
         MockElevatedButtonThemeCubit();
+    final FilledButtonThemeCubit filledButtonThemeCubit =
+        MockFilledButtonThemeCubit();
     final OutlinedButtonThemeCubit outlinedButtonThemeCubit =
         MockOutlinedButtonThemeCubit();
     final TextButtonThemeCubit textButtonThemeCubit =
@@ -176,6 +178,12 @@ extension PumpApp on WidgetTester {
         borderRadius: BorderRadius.circular(4),
       ),
     );
+    when(() => filledButtonThemeCubit.state).thenReturn(
+      const ButtonStyleState(),
+    );
+    when(() => filledButtonThemeCubit.defaultShape).thenReturn(
+      const StadiumBorder(),
+    );
     when(() => outlinedButtonThemeCubit.state).thenReturn(
       const ButtonStyleState(),
     );
@@ -248,6 +256,7 @@ extension PumpApp on WidgetTester {
             ),
             BlocProvider.value(value: floatingActionButtonThemeCubit),
             BlocProvider.value(value: elevatedButtonThemeCubit),
+            BlocProvider.value(value: filledButtonThemeCubit),
             BlocProvider.value(value: outlinedButtonThemeCubit),
             BlocProvider.value(value: textButtonThemeCubit),
             BlocProvider.value(value: iconThemeCubit),