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

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


class TimerApp extends StatefulWidget {
  @override
  _TimerAppState createState() => _TimerAppState();
}

class _TimerAppState extends State<TimerApp> {

  //类级别的常量用 static const   const关键字不只是声明常数变量。您也可以使用它来创建常量值

  static const duration = const Duration(seconds: 1);

  int secondsPassed = 0;
  bool isActive = false;

  Timer timer;

  void handleTick() {
    if (isActive) {
      setState(() {
        secondsPassed = secondsPassed + 1; //需要更新UI
      });
    }
  }


  @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: 'Welcome to flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Timer'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CustomTextContainer(
                    label: 'HRS',value: hours.toString().padLeft(2,'0'),//padLeft 补占位符
                  ),
                  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 {

  final String label;
  final String value;

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

   @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.black87,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '$value',
            style: TextStyle(
              color: Colors.white,
              fontSize: 54,
              fontWeight: FontWeight.bold
            ),
          ),

          Text(
            "$label",
            style: TextStyle(
              color: Colors.white70,
            ),
          )

        ],
      ),
    );
  }

}