2d-inc / Flare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.
https://rive.app/
MIT License
2.55k stars 470 forks source link

Color is not reacting to Theme changes #256

Closed Ahmadre closed 3 years ago

Ahmadre commented 4 years ago

Steps to reproduce

  1. Create (or get) a random Flare file with rive.app
  2. Export it as a binary file (.flr)
  3. Import it in Flutter by this snippet (by the way TinyColor is working with other Icons. So TinyColor isn't the problem here):
import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';
import 'package:tinycolor/tinycolor.dart';

IconButton(
  icon: FlareActor(
    'assets/flare/AnimatedMenuButton.flr',
     color: TinyColor(Theme.of(context).scaffoldBackgroundColor).isLight() ? Colors.black : Colors.white,
     animation: 'idle',
     fit: BoxFit.contain,
  ),
  onPressed: toggleMenu,
),

Sidenote: I also tried:

color: Theme.of(context).brightness == Brightness.light ? Colors.black : Colors.white,

but none of them are working. It seeems, that FlareActor is ignoring Theme maybe?

  1. Have the theme and darkTheme setup in MaterialApp. Now ThemeMode will be: ThemeMode.system, which will automatically switch Brightness of the app.
  2. Go to settings (android or ios) and change your theme. It doesn't matter if you switch from dark -> light or from light -> dark.
  3. Now go back into the flutter app. Bam.

Expected results

FlareActor will detect ThemeMode switch and rerender the Color.

Actual results

Here's an example of my custom Menu-Button on the top left of my AppBar:

flare_error

Logs

[✓] Flutter (Channel master, 1.19.0-2.0.pre.145, on Mac OS X 10.15.5 19F96, locale
    de-DE)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.45.1)
[✓] Connected device (3 available)

Thanks 😊

Ahmadre commented 4 years ago

I did a workaround by exporting different flare assets with different colors. But then the color property is maybe useless.

umberto-sonnino commented 4 years ago

Is your 'idle' animation looping? If possible, could you share your Rive file url?

Ahmadre commented 4 years ago

@umberto-sonnino I would like to send you the file on an email address or something, but not on public. Would you write via my github account email?

Ahmadre commented 3 years ago

Thanks! It works now :)

alnitak commented 2 years ago

So, how did you solved this? :)