颤振计时器只更新秒小部件

Question

我按照Flutter教程制作秒表。

该应用程序构建和运行，但我不能让它更新小部件的小时（HRS）和分钟（MIN）部分。它只更新秒（SEC）。

我已经尝试移动代码和调试，但我最终只打破整个事情，所以它根本不运行。

这是我的意思的截图：

这是应用程序：

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

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new TimerAppState();
  }
}

class TimerAppState extends State<MyApp> {
  static const duration = const Duration(seconds: 1);

  int secondsPassed = 0;
  bool isActive = false;

  Timer timer;

  void handleTick() {
    if(isActive) {
      setState(() {
        secondsPassed = secondsPassed + 1;
      });
    }
  }

@override
Widget build(BuildContext context) {

  if (timer == null)
    timer = Timer.periodic(duration, (Timer t)
    {
      handleTick();
    });

    int seconds = secondsPassed * 60;
    int minutes = secondsPassed ~/ 60;
    int hours =secondsPassed ~/ (60 * 60);

    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Timer'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                CustomTextContainer(label: 'HRS', value: hours.toString().padLeft(2, '0')),
                CustomTextContainer(label: 'MIN', value: minutes.toString().padLeft(2, '0')),
                CustomTextContainer(label: 'SEC', value: seconds.toString().padLeft(2, '0')),
                ],
              ),

              Container(
                margin:EdgeInsets.only(top: 20),
                child:RaisedButton(
                  child: Text(isActive ? 'STOP' : 'START'),
                  onPressed: () {
                    setState(() {
                      isActive = !isActive;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

class CustomTextContainer extends StatelessWidget {

  CustomTextContainer({this.label, this.value});

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      padding: EdgeInsets.all(20),
      decoration: new BoxDecoration(
        borderRadius: new BorderRadius.circular(10),
        color: Colors.black87,
      ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              '$value',
              style: TextStyle(
                color: Colors.white,
                fontSize: 34,
                fontWeight: FontWeight.bold
              ),
            ),
            Text(
              '$label',
              style: TextStyle(
                color: Colors.white70,
              ),
            )
          ],
        ),
      );
  }
}

反正有没有让它正常工作？

谢谢！