Flutter：在運行時更改強調色

Question

如何在顫振中更改運行時的強調色？

Color scolor = Colors.green;
...
...
new MaterialApp(

      theme: new ThemeData(
        brightness: Brightness.light,
        accentColor:  scolor,
        ),
 home: new SetAccentColor());


class SetAccentColor extends StatefulWidget {
  @override
  _SetAccentColor createState() => _SetAccentColor();
}

class _SetAccentColor extends State<SetAccentColor > {
...
...
@override
  Widget build(BuildContext context) {
 return Scaffold(
        body: Builder(
            builder: (context) => Container(
                  child: FutureBuilder<List<ColorDBModel>>(
                          future: ColorDBProvider.db.getAllColorModels(),
                          builder: (BuildContext context, AsyncSnapshot<List<ColorDBModel>> snapshot) {

 if (snapshot.data[0].ColorName == "red")
scolor = Colors.red;
else 
scolor = Colors.blue;
...
...
...
}
}
}

這些是代碼的重要部分。 但是accentColor 不會根據scolor 的變化而變化。

Answer 1

您可以輕松地使用提供程序包。

確保在pubspec.yaml文件中添加包。

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

class ThemeChange extends ChangeNotifier {
  Color accentColor = Colors.green;
  void changeColor(Color color) {
    this.accentColor = color;
    notifyListeners();
  }
}

void main() {
  // for bloc transition trace
  //BlocSupervisor.delegate = SimpleBlocDelegate();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemeChange>(
      create: (context) => ThemeChange(),
      child: Consumer<ThemeChange>(builder: (context, themechange, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(accentColor: themechange.accentColor),
          initialRoute: '/',
          home: Scaffold(body: HomeWidget()),
        );
      }),
    );
  }
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              Provider.of<ThemeChange>(context, listen: false)
                  .changeColor(Colors.teal);
            },
            child: Text("change accent color"),
            color: Provider.of<ThemeChange>(context).accentColor,
          ),
        ),
      ),
    );
  }
}

Answer 2

使用 setState 以新顏色重建小部件。 這將與StatefulWidget一起使用。

onPressed: () {
  setState(() {
    scolor = Colors.red;
  });
}