FeedbackSheetColor of lightTheme is applied in Darkmode

[TijnvandenEijnde]

Version

3.0.0

Library

feedback

Flutter channel

stable

Flutter version

3.13.9

Platform

Android

Details

I have implemented dark mode in my application however it seems that the feedbackSheetColor from the light theme is applied whenever I switch to the dark theme. See the following code:

main.dart

return MultiBlocProvider(
  providers: [...],
  child: BlocConsumer<ThemeCubit, ThemeState>(
    listener: (BuildContext context, ThemeState state) {},
    builder: (BuildContext context, ThemeState state) => BetterFeedback(
      theme: AppFeedbackTheme.lightTheme,
      darkTheme: AppFeedbackTheme.darkTheme,
      themeMode: state.themeMode,
      child: MaterialApp.router(
        theme: AppTheme.lightTheme,
        darkTheme: AppTheme.darkTheme,
        themeMode: state.themeMode,
        routerConfig: RouterConfiguration.routes,
      ),
    ),
  ),
);

app_feedback_theme.dart

import 'package:feedback/feedback.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

abstract class AppFeedbackTheme {
  static const Color primary = Color(0xFF005ac2);
  static const Color darkBackground = Color(0xFF22222b);


  static FeedbackThemeData get lightTheme => FeedbackThemeData(
        activeFeedbackModeColor: primary,
        bottomSheetDescriptionStyle: TextStyle(
          color: Colors.black,
          fontFamily: GoogleFonts.robotoSlab().fontFamily,
        ),
        colorScheme: const ColorScheme.light().copyWith(
          primary: primary,
        ),
        dragHandleColor: primary,
        feedbackSheetColor: const Color(0xFFf2f2fa),
        // feedbackSheetColor: darkBackground,
      );

  static FeedbackThemeData get darkTheme => FeedbackThemeData(
        activeFeedbackModeColor: const Color(0xFF005ac2),
        bottomSheetDescriptionStyle: TextStyle(
          color: Colors.white,
          fontFamily: GoogleFonts.robotoSlab().fontFamily,
        ),
        colorScheme: const ColorScheme.dark().copyWith(
          brightness: Brightness.dark,
          primary: const Color(0xFF005ac2),
          surface: darkBackground,
        ),
        dragHandleColor: const Color(0xFF005ac2),
        feedbackSheetColor: darkBackground,
      );
}

The strange thing is that the feedbackSheetColor from the dark theme is correctly applied on the bottom sheet, however, not on the ControlsColumn.

If I change the property feedBackSheetColor property from the light theme from feedbackSheetColor: const Color(0xFFf2f2fa) to feedbackSheetColor: darkBackground, I will get the following result:

Unfortunately, this will give the light theme dark colors:

Steps to reproduce

1. flutter create project
2. replace main with the following code:

main.dart

import 'package:feedback/feedback.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var theme = ThemeMode.light;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return BetterFeedback(
      theme: FeedbackThemeData(
        feedbackSheetColor: const Color(0xFFf2f2fa),
      ),
      darkTheme: FeedbackThemeData(
        feedbackSheetColor: const Color(0xFF22222b),
      ),
      themeMode: theme,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: () => setState(
                () => theme =
                    theme == ThemeMode.light ? ThemeMode.dark : ThemeMode.light,
              ),
              child: const Text(
                'Change theme',
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
          floatingActionButton: const ChangeThemeButton(),
        ),
      ),
    );
  }
}

class ChangeThemeButton extends StatelessWidget {
  const ChangeThemeButton({super.key});

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () => BetterFeedback.of(context).show((feedback) {}),
      child: const Icon(Icons.feedback),
    );
  }
}

3. Run main.dart
4. Click change Change theme button
5. Click feedback button

Output of flutter doctor -v

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.13.9, on Microsoft Windows [Version 10.0.19045.3570], locale en-US)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[√] Chrome - develop for the web
[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2022.3)
[√] IntelliJ IDEA Ultimate Edition (version 2022.2)
[√] IntelliJ IDEA Ultimate Edition (version 2023.1)
[√] VS Code (version 1.71.2)
[√] Connected device (4 available)
[√] Network resources

! Doctor found issues in 1 category.

[TijnvandenEijnde]

Whenever you hardcode the themeMode property of the BetterFeedback widget to either ThemeMode.light or ThemeMode.dark it will work. However, when you have a dynamic value the described bug will occur. It seems that something is not rebuilding properly.