Flutter 动态电子时钟

创建工具common.dart文件

const CLOCK_INTERVAL = Duration(microseconds: 1000);
const ChineseWeekDays = <int, String>{
  1: '一',
  2: '二',
  3: '三',
  4: '四',
  5: '五',
  6: '六',
  7: '日',
};
String pad0(int num) {
  if (num < 10) {
    return '0${num.toString()}';
  }
  return num.toString();
}

创建组件基础theme_base.dart文件

import 'dart:async';

import 'package:flutter/material.dart';

import 'common.dart';

class ClockBaseStatefulWidget extends StatefulWidget {
  ClockBaseStatefulWidget({Key key}) : super(key: key);

  @override
  ClockBaseState createState() {
    var state = new ClockBaseState();
    state.startClock();
    return state;
  }
}

class ClockBaseState<T extends StatefulWidget> extends State {
  ClockBaseState() : super();

  DateTime now = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return new Text('ClockBaseState is not implemented!');
  }

  startClock() {
    Timer.periodic(CLOCK_INTERVAL, (Timer t) {
      if (!mounted) {
        return;
      }

      setState(() {
        now = DateTime.now();
      });
    });
  }

  Size getDeviceSize(BuildContext context) {
    return MediaQuery.of(context).size;
  }
}

创建动态时钟组件TimerWidget.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:my_app/demo/Timer/theme_base.dart';

import 'common.dart';

class TimerWidget extends StatefulWidget {

  String name;
  String title;

  @override
  State<StatefulWidget> createState() {
    var state = new _TimerWidgetState();
    state.startClock();
    return state;
  }
}

class _TimerWidgetState extends ClockBaseState<TimerWidget> {

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(children: [
        TextSpan(
            text: " 当前时间：",
            style: TextStyle(
              height: 1.5,
            )),
        TextSpan(
            text:
                "${now.year}-${now.month}-${now.day} ${pad0(now.hour)}:${pad0(now.minute)}:${pad0(now.second)}",
            style: TextStyle(
              fontSize: 18.0,
              color: Colors.lightBlue,
              height: 1.5,
            ))
      ]),
    );
  }
}

创建实例；

import 'package:flutter/material.dart';
import 'package:my_app/demo/Timer/TimerWidget.dart';

class DynamicClock extends StatefulWidget {
  @override
  _DynamicClockState createState() => _DynamicClockState();
}

class _DynamicClockState extends State<DynamicClock> {
  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text("动态时钟"),
      ),
      body: new Center(
        child: new TimerWidget(),
      ),
    );
  }
}