Flutter Widget如何自定义Controller

业务分析

在Flutter开发过程中，有时我们需要对Widget实例做一些操作，首先我们看下官方是怎么操作的：

1. 通过传入RefreshController，控制列表Widget的刷新等操作
2. 通过传入的AnimatedController，控制动画的开始及暂停等操作
3. 通过传入的WebViewController，控制WebView的前进后退刷新等操作

接下来照葫芦画瓢，来实现一个Controller操作Widget实例的最简Demo

需求设计

通过Controller来控制一个Widget的颜色切换

源码

main.dart

import 'package:app/components/color_controller.dart';
import 'package:app/components/color_widget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ColorController _colorController = ColorController();
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(top: 100),
      child: Column(
        children: [
          TextButton(onPressed: () {
            _colorController.switchToRed();
          }, child: Text('切换到红色')),
          TextButton(onPressed: () {
            _colorController.switchToYellow();
          }, child: Text('切换到黄色')),
          ColorWidget(colorController: _colorController),
        ],
      ),
    );
  }
}

color_controller.dart

import 'package:flutter/material.dart';

class ColorController {
  VoidCallback switchToRed;
  VoidCallback switchToYellow;

  void dispose() {
    switchToRed = null;
    switchToYellow = null;
  }
}

color_widget.dart

import 'package:app/components/audio_bar/color_controller.dart';
import 'package:flutter/material.dart';

class ColorWidget extends StatefulWidget {
  final ColorController colorController;
  ColorWidget({@required this.colorController});
  @override
  _ColorWidgetState createState() => _ColorWidgetState();
}

class _ColorWidgetState extends State<ColorWidget> {

  MaterialColor _color = Colors.red;

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

    bindController();

  }

  bindController() {
    widget.colorController.switchToRed = switchToRed;
    widget.colorController.switchToYellow = switchToYellow;
  }

  switchToYellow() {
    setState(() {
      _color = Colors.yellow;
    });
  }
  switchToRed() {
    setState(() {
      _color = Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20),
      color: _color,
      width: 100,
      height: 100,
    );
  }
}