Thème dynamique Flutter

Vous pouvez utiliser InhertedWidget si vous le souhaitez (au lieu de BLOC) - Fondamentalement, il est utilisé pour accéder au widget parent n'importe où dans l'arborescence.

Donc, ce que vous devez faire est

1. créez un InheritedWidget , quelque part en haut de l'arborescence [d'où vous voulez que l'effet du thème se produise]
2. enroulez-le autour du widget Thème
3. exposez une méthode pour changer de thème, en transmettant le ThemeData par lequel vous souhaitez le remplacer.

Voici un peu de code:

import 'package:flutter/material.dart';

var themeData = ThemeData(
    fontFamily: 'Raleway',
    primaryColor: Colors.blue,
    brightness: Brightness.light,
    backgroundColor: Colors.white,
    accentColor: Colors.blue
);

void main() {
  runApp(
    ThemeSwitcherWidget(
      initialTheme: themeData,
      child: MyApp(),
    ),
  );
}

class ThemeSwitcher extends InheritedWidget {
  final _ThemeSwitcherWidgetState data;

  const ThemeSwitcher({
    Key key,
    @required this.data,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child);

  static _ThemeSwitcherWidgetState of(BuildContext context) {
    return (context.inheritFromWidgetOfExactType(ThemeSwitcher)
            as ThemeSwitcher)
        .data;
  }

  @override
  bool updateShouldNotify(ThemeSwitcher old) {
    return this != old;
  }
}

class ThemeSwitcherWidget extends StatefulWidget {
  final ThemeData initialTheme;
  final Widget child;

  ThemeSwitcherWidget({Key key, this.initialTheme, this.child})
      : assert(initialTheme != null),
        assert(child != null),
        super(key: key);

  @override
  _ThemeSwitcherWidgetState createState() => _ThemeSwitcherWidgetState();
}

class _ThemeSwitcherWidgetState extends State<ThemeSwitcherWidget> {
  ThemeData themeData;

  void switchTheme(ThemeData theme) {
    setState(() {
      themeData = theme;
    });
  }

  @override
  Widget build(BuildContext context) {
    themeData = themeData ?? widget.initialTheme;
    return ThemeSwitcher(
      data: this,
      child: widget.child,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeSwitcher.of(context).themeData,
      home: CheckAuth(),
    );
  }
}

J'ai enveloppé ThemeSwitcherWidget autour de MaterialApp pour que l'effet se fasse dans toute l'application (même lorsque vous envoyez une nouvelle route avec Navigator) .

Utilisez ThemeSwitcher.of (context) .switchTheme (themeData) n'importe où sous ThemeSwithcerWidget pour changer le thème.

Dans le cas de la question, il devrait appeler ThemeSwitcher.of (context) .switchTheme (Theme.of (context) .copyWith (primaryColor: Colors.red)) pour changer la couleur primaire en rouge à travers l'application, par exemple. sur un bouton, cliquez

Voici comment implémenter le changement de thème dynamique dans votre application:

1.Vous devez changer votre MyApp en widget Stateful pour permettre à la classe de se reconstruire à nouveau lorsque la couleur change:

  App.setTheme(context, Colors.blue);  

2. La méthode statique setTheme sera celle responsable du changement de couleur:

  class _AppState extends State<App> {

  @override
  Widget build(BuildContext context) {
  return MaterialApp(
  title: Constants.appName,
  theme: themeData,
  home: CheckAuth(), //CheckAuth returns MyHomePage usually
  );
 }
}   

3.Lorsque vous souhaitez modifier la couleur du thème de n'importe où dans votre code, appelez cette méthode:

 var _primary = Colors.blue ; // This will hold the value of the app main color

 var themeData = ThemeData(
 fontFamily: 'Raleway',
 primaryColor: _primary, // so when the rebuilds the color changes take effect
 brightness: Brightness.light,
 backgroundColor: Colors.white,
 accentColor: Colors.blue);

 void main() => runApp(new App());

 class App extends StatefulWidget {
 App({Key key,}) :

 super(key: key);

  @override
  _AppState createState() => new _AppState();

  static void setTheme(BuildContext context, Color newColor) {
  _AppState state = context.ancestorStateOfType(TypeMatcher<_AppState>());
   state.setState(() {
     state._primary = newColor;
    });
  }
}

Utilisation du package provider :
theme_changer.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './theme_changer.dart'

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    var _themeProvider=Provider.of<ThemeChanger>(context);
    return Scaffold(
      appBar: AppBar(title:Text("First Screen"),),
      body:Container(width:MediaQuery.of(context).size.width,
           height:MediaQuery.of(context).size.height,
           child:Center(
                child:FlatButton(child:Text("Press me"). onPressed:(){
                  _themeProvider.setTheme(_themeProvider.getTheme==lightTheme?darkTheme:lightTheme);
                })
           ),
      ),
    );
  }
}

main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ThemeChanger(lightTheme)),
      ],
      child: MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);
    return MaterialApp(
      theme: theme.getTheme,
      home: FirstScreen(),
    );
  }

premier_écran .dart

var darkTheme = ThemeData.dark();
var lightTheme= ThemeData.light();

class ThemeChanger extends ChangeNotifier {
  ThemeData _themeData;
  ThemeChanger(this._themeData);

  get getTheme => _themeData;
  void setTheme(ThemeData theme) {
    _themeData = theme;
    notifyListeners();
  }
}