如何使用 Flutter 及时更改背景颜色？答案

【问题标题】：How to change background color on time with Flutterr?如何使用 Flutter 及时更改背景颜色？
【发布时间】：2018-08-21 23:00:40
【问题描述】：

我完全无法弄清楚这一点。经过大量研究和搞砸后，我看不到将Timer.periodic 链接到有状态小部件状态的setState 的方法。我正在尝试通过递增我定义的一组颜色值来改变我的应用程序每帧（或每 17 毫秒，足够接近）的背景颜色以进行渐变。我只是不知道如何根据计时器进行实际更改，此时我完全迷失了。

编辑：这是迄今为止应用程序的完整代码。

import 'package:flutter/material.dart';
import 'colors.dart';
import 'dart:math';
import 'dart:async';

final Random randProgress = new Random();
final rgb_color_container rgbColorContainer = new rgb_color_container();


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MainApp();
  }
}

class MainApp extends StatefulWidget {
  @override
  MainAppState createState() => new MainAppState();
}

class MainAppState extends State<MainApp> {
  int colorSpeed = 1;
  int colorProgress = randProgress.nextInt(1530);

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      home: new Scaffold(

      ),
      theme: ThemeData(
        canvasColor: rgbColorContainer.light[colorProgress],
        primaryColor: rgbColorContainer.dark[colorProgress],
        accentColor: rgbColorContainer.dark[colorProgress],
      ),
    );
  }
}

【问题讨论】：

你能告诉我们你的代码吗？
@Blasanka 刚刚添加了它
为什么不使用AnimationController 和ColorTween？

标签： dart flutter

【解决方案1】：

以下是基本步骤：

覆盖setState() 内的MainAppState 或根据您的需要覆盖initState()。
在其中添加Timer.periodic
通过更改 colorProgress 为 colorProgress 赋值计时器。

如下（未检查，仅想法）：

  Timer timer;

  @override
  void initState() {
    super.initState();

    timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) {
      setState(() {
        //change your colorProgress here
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    timer.cancel();
  }

这些可能会有所帮助：

如何创建Timer.periodic。 Change color。 setState not update.

【讨论】：