🐛 BetterFeedback widget conflicting with app's theme

[tempo-riz]

Version

3.1.0

Library

feedback

Flutter channel

stable

Flutter version

3.22.0

Platform

Android

Details

After wrapping myApp() with BetterFeedback() (no parameters specified) the color of my app bar changes

before :

after:

this is my setup :

void main() async {
  runApp(const BetterFeedback(child: App()));
}

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

  final purpleBlue = const Color(0xFF4533EE);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      debugShowCheckedModeBanner: false, //isDebug,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: purpleBlue,
        ),
        textTheme: const TextTheme(
          titleMedium: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          bodyMedium: TextStyle(fontSize: 16),
          labelMedium: TextStyle(fontSize: 14),
        ),
        appBarTheme: AppBarTheme(
          centerTitle: true,
          titleTextStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          backgroundColor: Theme.of(context).colorScheme.primary,
        ),
      ),
    );
  }
}

Steps to reproduce

• install the plugin
• check appbar color
• add the BetterFeedback widget
• reload and appbar color changed

Output of flutter doctor -v

[√] Flutter (Channel stable, 3.22.0, on Microsoft Windows [Version 10.0.22631.3737], locale fr-CH)
    • Flutter version 3.22.0 on channel stable at C:\Users\Thib\fvm\versions\3.22.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (7 weeks ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\Thib\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[!] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.36)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.34902.97
    • Windows 10 SDK version 10.0.19041.0
    X The current Visual Studio installation is incomplete.
      Please use Visual Studio Installer to complete the installation or reinstall Visual Studio.

[√] Android Studio (version 2023.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)

[√] VS Code (version 1.90.2)
    • VS Code at C:\Users\Thib\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.90.0

[√] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22631.3737]  
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 126.0.6478.115

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[ahmtydn]

It seems that wrapping your App with BetterFeedback() from the feedback package is causing a color change in the AppBar due to the feedback package’s theming overriding your app's ThemeData.

Cause:

BetterFeedback introduces its own theming, which might conflict with your app's ThemeData, causing the AppBar color to change. To fix this, you need to explicitly set theme and darkTheme in the BetterFeedback widget to match your app's color scheme.

[!WARNING]
Explicitly Set Theme: Pass your app’s colorScheme and brightness to the BetterFeedback widget.
Import Latest Feedback Version: Ensure you are using the latest version of the feedback package by importing it from the GitHub main branch.

Steps to Implement:

1. Update pubspec.yaml:

   dependencies:
     feedback:
       git:
         url: https://github.com/ueman/feedback.git
         ref: main
   
   

2. Set the Theme Explicitly: Pass your app's colorScheme and brightness to the BetterFeedback widget to ensure theming consistency.

   void main() async {
     runApp(
       BetterFeedback(
         // Set your app's color scheme and brightness here
         theme: FeedbackThemeData(
           colorScheme: // your light color scheme
           brightness: Brightness.light,
         ),
         darkTheme: FeedbackThemeData(
           colorScheme: // your dark color scheme
           brightness: Brightness.dark,  
         ),
         child: const App(),
       ),
     );
   }
   
   

[!TIP]
If you want your app to run a few milliseconds faster, consider buying me a coffee! ☕😉

[martin-bertele]

double wrapping with MaterialApp resolved for me that my color scheme from flex_color_scheme is kept.

// wrapper needed for BetterFeedback to use my theme
return MaterialApp(
      home: BetterFeedback(
        child: MaterialApp.router(
            theme: FlexThemeData..
         < --- here is my actual app --- >