年轻人的第一个Flutter程序(2)

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

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int _selectedIndex = 1;
 final _widgetOptions = [
   Text('Index 0: Home'),
   Text('Index 1: Business'),
   Text('Index 2: School'),
 ];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('BottomNavigationBar Sample'),
     ),
     body: Center(
       child: _widgetOptions.elementAt(_selectedIndex),
     ),
     bottomNavigationBar: BottomNavigationBar(
       items: <BottomNavigationBarItem>[
         BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
         BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
         BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
       ],
       currentIndex: _selectedIndex,
       fixedColor: Colors.deepPurple,
       onTap: _onItemTapped,
     ),
   );
 }

 void _onItemTapped(int index) {
   setState(() {
     _selectedIndex = index;
   });
 }
}

import 'package:flutter/material.dart';

import 'stats/stats.dart';
import 'task/task_list.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Ready?',
      theme: new ThemeData(
        primarySwatch: Colors.indigo,
        fontFamily: 'Roboto'   // 指定默认字体
      ),
      home: MainPage(),
    );
  }
}

// 连接BottomNavigationBarItem与Tab内容的纽带
// icon: BottomNavigationBarItem的icon
// title: BottomNavigationBarItem的title
// tabView: Tab内容
// vsync: 动画需要的参数
class NavigationIconView {
  NavigationIconView({
    Widget icon,
    String title,
    Widget tabView,
    TickerProvider vsync,
  }) : _title = title,
      _tabView = tabView,
      item = BottomNavigationBarItem(
        icon: icon,
        title: Text(title),
      ), // 创建BottomNavigationBarItem
      // 创建动画控制器
      controller = AnimationController(
        duration: kThemeAnimationDuration, // 200ms
        vsync: vsync,
      ) {
    _animation = controller.drive(CurveTween(
      curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn),
    )); // 动画值从0.5到1.0的快出满进(fastOutSlowIn)插值效果的动画
  }

  final String _title;
  final BottomNavigationBarItem item;
  final AnimationController controller;
  final Widget _tabView;
  Animation<double> _animation;

  // Tab切换时的动画效果——淡入淡出动画伴随着滑动动画
  FadeTransition transition(BuildContext context) {
    // 最外层是一个淡入淡出动画，值是_animation
    return FadeTransition(
      key: Key(_title),
      opacity: _animation,
      // 伴随着一个滑动动画，动画值从Offset(0.0, 0.02)到Offset.zero
      // Offset表示的是偏移的百分比，即width * dx，height * dy
      child: SlideTransition(
        position: _animation.drive(
          Tween<Offset>(
            begin: const Offset(0.0, 0.02), // Slightly down.
            end: Offset.zero,
          ),
        ),
        // 作用在_tabView也就是Tab内容上
        child: _tabView
      ),
    );
  }
}

class MainPage extends StatefulWidget {
  static const String routeName = '/';

  @override
  createState() => _MainPageState();
}

// TickerProviderStateMixin是动画的需要
class _MainPageState extends State<MainPage> with TickerProviderStateMixin {
  // 当前选中的Tab
  int _currentIndex = 0;
  List<NavigationIconView> _navigationViews;

  // initState是StatefulWidget非常重要的一个生命周期方法，与之对应的是dispose方法
  // 对于StatefulWidget，我们可以在这创建不需要重复创建的变量
  @override
  void initState() {
    super.initState();

    _navigationViews = <NavigationIconView>[
      NavigationIconView(
        icon: const Icon(Icons.timer_off),
        title: "Ready",
        tabView: TaskListPage(),
        vsync: this,
      ),
      NavigationIconView(
        icon: const Icon(Icons.timeline),
        title: "Stats",
        tabView: StatsPage(),
        vsync: this,
      ),
    ];

    // 默认显示Tab1
    _navigationViews[_currentIndex].controller.value = 1.0;
  }

  @override
  void dispose() {
    // 回收资源
    for (NavigationIconView view in _navigationViews)
      view.controller.dispose();
    super.dispose();
  }

  // 构建Scaffold的body
  //
  // 取出NavigationIconView对应的FadeTransition(这也是一个Widget)
  // 按照其opacity从高到低进行排序，然后放入Stack(相当于Android中的FrameLayout)中
  Widget _buildTransitionsStack() {
    final List<FadeTransition> transitions = <FadeTransition>[];

    for (NavigationIconView view in _navigationViews)
      transitions.add(view.transition(context));

    // We want to have the newly animating (fading in) views on top.
    transitions.sort((FadeTransition a, FadeTransition b) {
      final Animation<double> aAnimation = a.opacity;
      final Animation<double> bAnimation = b.opacity;
      final double aValue = aAnimation.value;
      final double bValue = bAnimation.value;

      return aValue.compareTo(bValue);
    });

    return Stack(children: transitions);
  }

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = BottomNavigationBar(
      items: _navigationViews
        .map<BottomNavigationBarItem>((NavigationIconView navigationView) => navigationView.item)
        .toList(), // List的map操作
      currentIndex: _currentIndex,
      type: BottomNavigationBarType.fixed,
      onTap: (int index) {
        setState(() {
          // 切换Tab时，先执行原来Tab页面的退场动画，然后更新_currentIndex，最后执行新Tab的进场动画
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
        });

        // 延迟kThemeAnimationDuration，等待动画执行完之后再次刷新UI
        //
        // fix a bug that the current tab view can't interact with anything
        Future.delayed(kThemeAnimationDuration, () => setState(() {}));
      },
    );

    return Scaffold(
      body: Center(child: _buildTransitionsStack()),
      // 设置BottomNavigationBar的背景色为白色
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.white),
        child: botNavBar,
      ),
    );
  }
}

class NavigationIconView {
  ...
  FadeTransition transition(BuildContext context) {
    return FadeTransition(
      key: Key(_title),
      ...
    );
  }
}

onTap: (int index) {
  ...
  Future.delayed(kThemeAnimationDuration, () => setState(() {}));
},

/// The stack paints its children in order with the first child being at the
/// bottom. If you want to change the order in which the children paint, you
/// can rebuild the stack with the children in the new order. If you reorder
/// the children in this way, consider giving the children non-null keys.
/// These keys will cause the framework to move the underlying objects for
/// the children to their new locations rather than recreate them at their
/// new location.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        fontFamily: 'Roboto'
      ),
    );
  }
}

controller = AnimationController(
  duration: kThemeAnimationDuration,
  vsync: vsync,
)

_animation = controller.drive(CurveTween(
  curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn),
))

t = ((t - begin) / (end - begin)).clamp(0.0, 1.0);
return curve.transform(t);

_animation.drive(
  Tween<Offset>(
    begin: const Offset(0.0, 0.02), // Slightly down.
    end: Offset.zero,
  ),
)

class Tween<T extends dynamic> extends Animatable<T> {
  Tween({ this.begin, this.end });
  T begin;
  T end;

  @protected
  T lerp(double t) {
    assert(begin != null);
    assert(end != null);
    return begin + (end - begin) * t;
  }

  @override
  T transform(double t) {
    if (t == 0.0)
      return begin;
    if (t == 1.0)
      return end;
    return lerp(t);
  }
  ...
}

setState(() {
  _navigationViews[_currentIndex].controller.reverse();
  _currentIndex = index;
  _navigationViews[_currentIndex].controller.forward();
});

@override
void dispose() {
  for (NavigationIconView view in _navigationViews)
    view.controller.dispose();
  super.dispose();
}

// PREDEFINED CURVES

/// A collection of common animation curves.
class Curves {
  Curves._();

  /// A linear animation curve.
  ///
  /// This is the identity map over the unit interval: its [Curve.transform]
  /// method returns its input unmodified. This is useful as a default curve for
  /// cases where a [Curve] is required but no actual curve is desired.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.mp4}
  static const Curve linear = _Linear._();

  /// A curve where the rate of change starts out quickly and then decelerates; an
  /// upside-down `f(t) = t²` parabola.
  ///
  /// This is equivalent to the Android `DecelerateInterpolator` class with a unit
  /// factor (the default factor).
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_decelerate.mp4}
  static const Curve decelerate = _DecelerateCurve._();

  /// A cubic animation curve that speeds up quickly and ends slowly.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4}
  static const Cubic ease = Cubic(0.25, 0.1, 0.25, 1.0);

  /// A cubic animation curve that starts slowly and ends quickly.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.mp4}
  static const Cubic easeIn = Cubic(0.42, 0.0, 1.0, 1.0);

  /// A cubic animation curve that starts quickly and ends slowly.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.mp4}
  static const Cubic easeOut = Cubic(0.0, 0.0, 0.58, 1.0);

  /// A cubic animation curve that starts slowly, speeds up, and then and ends slowly.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4}
  static const Cubic easeInOut = Cubic(0.42, 0.0, 0.58, 1.0);

  /// A curve that starts quickly and eases into its final position.
  ///
  /// Over the course of the animation, the object spends more time near its
  /// final destination. As a result, the user isn’t left waiting for the
  /// animation to finish, and the negative effects of motion are minimized.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.mp4}
  static const Cubic fastOutSlowIn = Cubic(0.4, 0.0, 0.2, 1.0);

  /// An oscillating curve that grows in magnitude.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4}
  static const Curve bounceIn = _BounceInCurve._();

  /// An oscillating curve that first grows and then shrink in magnitude.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.mp4}
  static const Curve bounceOut = _BounceOutCurve._();

  /// An oscillating curve that first grows and then shrink in magnitude.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.mp4}
  static const Curve bounceInOut = _BounceInOutCurve._();

  /// An oscillating curve that grows in magnitude while overshooting its bounds.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.mp4}
  static const ElasticInCurve elasticIn = ElasticInCurve();

  /// An oscillating curve that shrinks in magnitude while overshooting its bounds.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.mp4}
  static const ElasticOutCurve elasticOut = ElasticOutCurve();

  /// An oscillating curve that grows and then shrinks in magnitude while overshooting its bounds.
  ///
  /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.mp4}
  static const ElasticInOutCurve elasticInOut = ElasticInOutCurve();
}

/// Animation
@optionalTypeArgs
Animation<U> drive<U>(Animatable<U> child) {
  assert(this is Animation<double>);
  return child.animate(this as dynamic); // TODO(ianh): Clean this once https://github.com/dart-lang/sdk/issues/32120 is fixed.
}

/// Animatable
Animation<T> animate(Animation<double> parent) {
  return _AnimatedEvaluation<T>(parent, this);
}

/// _AnimatedEvaluation
class _AnimatedEvaluation<T> extends Animation<T> with AnimationWithParentMixin<double> {
  _AnimatedEvaluation(this.parent, this._evaluatable);

  @override
  final Animation<double> parent;

  final Animatable<T> _evaluatable;

  @override
  T get value => _evaluatable.evaluate(parent);
  ...
}

class AnimationController extends Animation<double>
  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {

  AnimationController({
    double value,
    this.duration,
    this.debugLabel,
    this.lowerBound = 0.0,
    this.upperBound = 1.0,
    this.animationBehavior = AnimationBehavior.normal,
    @required TickerProvider vsync,
  }) : ...,
       _direction = _AnimationDirection.forward {
    _ticker = vsync.createTicker(_tick);
    _internalSetValue(value ?? lowerBound);
  }

  void _internalSetValue(double newValue) {
    _value = newValue.clamp(lowerBound, upperBound);
    if (_value == lowerBound) {
      _status = AnimationStatus.dismissed;
    } else if (_value == upperBound) {
      _status = AnimationStatus.completed;
    } else {
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.forward :
        AnimationStatus.reverse;
    }
  }

  Ticker _ticker;
  ...
}

/// If you only have a single [Ticker] (for example only a single
/// [AnimationController]) for the lifetime of your [State], then using a
/// [SingleTickerProviderStateMixin] is more efficient. This is the common case.
@optionalTypeArgs
mixin TickerProviderStateMixin<T extends StatefulWidget> on State<T> implements TickerProvider {
  Set<Ticker> _tickers;

  @override
  Ticker createTicker(TickerCallback onTick) {
    /// _tickers为空就new一个Set<_WidgetTicker>()，否则就等于自己
    _tickers ??= Set<_WidgetTicker>();
    /// 创建一个_WidgetTicker对象，并添加到set中
    final _WidgetTicker result = _WidgetTicker(onTick, this, debugLabel: 'created by $this');
    _tickers.add(result);
    /// 返回_WidgetTicker对象
    return result;
  }

  /// _WidgetTicker在其dispose方法中调用
  void _removeTicker(_WidgetTicker ticker) {
    ...
    _tickers.remove(ticker);
  }
  ...
}

// This class should really be called _DisposingTicker or some such, but this
// class name leaks into stack traces and error messages and that name would be
// confusing. Instead we use the less precise but more anodyne "_WidgetTicker",
// which attracts less attention.
class _WidgetTicker extends Ticker {
  _WidgetTicker(TickerCallback onTick, this._creator, { String debugLabel }) : super(onTick, debugLabel: debugLabel);

  final TickerProviderStateMixin _creator;

  @override
  void dispose() {
    _creator._removeTicker(this);
    super.dispose();
  }
}

typedef TickerCallback = void Function(Duration elapsed);

void _tick(Duration elapsed) {
  _lastElapsedDuration = elapsed;
  final double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;
  assert(elapsedInSeconds >= 0.0);
  _value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);
  if (_simulation.isDone(elapsedInSeconds)) {
    _status = (_direction == _AnimationDirection.forward) ?
      AnimationStatus.completed :
      AnimationStatus.dismissed;
    stop(canceled: false);
  }
  notifyListeners();
  _checkStatusChanged();
}

class _InterpolationSimulation extends Simulation {
  _InterpolationSimulation(this._begin, this._end, Duration duration, this._curve, double scale)
    : assert(_begin != null),
      assert(_end != null),
      assert(duration != null && duration.inMicroseconds > 0),
      _durationInSeconds = (duration.inMicroseconds * scale) / Duration.microsecondsPerSecond;

  final double _durationInSeconds;
  final double _begin;
  final double _end;
  final Curve _curve;

  @override
  double x(double timeInSeconds) {
    final double t = (timeInSeconds / _durationInSeconds).clamp(0.0, 1.0);
    if (t == 0.0)
      return _begin;
    else if (t == 1.0)
      return _end;
    else
      return _begin + (_end - _begin) * _curve.transform(t);
  }

  @override
  double dx(double timeInSeconds) {
    final double epsilon = tolerance.time;
    return (x(timeInSeconds + epsilon) - x(timeInSeconds - epsilon)) / (2 * epsilon);
  }

  @override
  bool isDone(double timeInSeconds) => timeInSeconds > _durationInSeconds;
}

class Ticker {
  Ticker(this._onTick, { this.debugLabel }) {
    ...
  }
  ...

  bool get muted => _muted;
  bool _muted = false;

  bool get isActive => _future != null;

  TickerFuture start() {
    assert(() {
      if (isActive) {
        throw FlutterError(...);
      }
      return true;
    }());
    ...
    _future = TickerFuture._();
    if (shouldScheduleTick) {
      scheduleTick();
    }
    if (SchedulerBinding.instance.schedulerPhase.index > SchedulerPhase.idle.index &&
        SchedulerBinding.instance.schedulerPhase.index < SchedulerPhase.postFrameCallbacks.index)
      _startTime = SchedulerBinding.instance.currentFrameTimeStamp;
    return _future;
  }

  @protected
  bool get scheduled => _animationId != null;

  @protected
  bool get shouldScheduleTick => !muted && isActive && !scheduled;
  ...
  /// Schedules a tick for the next frame.
  ///
  /// This should only be called if [shouldScheduleTick] is true.
  @protected
  void scheduleTick({ bool rescheduling = false }) {
    assert(!scheduled);
    assert(shouldScheduleTick);
    _animationId = SchedulerBinding.instance.scheduleFrameCallback(_tick, rescheduling: rescheduling);
  }
  ...
}

mixin SchedulerBinding on BindingBase, ServicesBinding {
  int scheduleFrameCallback(FrameCallback callback, { bool rescheduling = false }) {
    scheduleFrame();
    _nextFrameCallbackId += 1;
    _transientCallbacks[_nextFrameCallbackId] = _FrameCallbackEntry(callback, rescheduling: rescheduling);
    return _nextFrameCallbackId;
  }

  /// If necessary, schedules a new frame by calling
  /// [Window.scheduleFrame].
  ///
  /// After this is called, the engine will (eventually) call
  /// [handleBeginFrame]. (This call might be delayed, e.g. if the device's
  /// screen is turned off it will typically be delayed until the screen is on
  /// and the application is visible.) Calling this during a frame forces
  /// another frame to be scheduled, even if the current frame has not yet
  /// completed.
  ///
  /// Scheduled frames are serviced when triggered by a "Vsync" signal provided
  /// by the operating system. The "Vsync" signal, or vertical synchronization
  /// signal, was historically related to the display refresh, at a time when
  /// hardware physically moved a beam of electrons vertically between updates
  /// of the display. The operation of contemporary hardware is somewhat more
  /// subtle and complicated, but the conceptual "Vsync" refresh signal continue
  /// to be used to indicate when applications should update their rendering.
  ///
  /// To have a stack trace printed to the console any time this function
  /// schedules a frame, set [debugPrintScheduleFrameStacks] to true.
  ///
  /// See also:
  ///
  ///  * [scheduleForcedFrame], which ignores the [lifecycleState] when
  ///    scheduling a frame.
  ///  * [scheduleWarmUpFrame], which ignores the "Vsync" signal entirely and
  ///    triggers a frame immediately.
  void scheduleFrame() {
    if (_hasScheduledFrame || !_framesEnabled)
      return;
    assert(() {
      if (debugPrintScheduleFrameStacks)
        debugPrintStack(label: 'scheduleFrame() called. Current phase is $schedulerPhase.');
      return true;
    }());
    ui.window.scheduleFrame();
    _hasScheduledFrame = true;
  }
}

Duration _adjustForEpoch(Duration rawTimeStamp) {
  final Duration rawDurationSinceEpoch = _firstRawTimeStampInEpoch == null ? Duration.zero : rawTimeStamp - _firstRawTimeStampInEpoch;
  return Duration(microseconds: (rawDurationSinceEpoch.inMicroseconds / timeDilation).round() + _epochStart.inMicroseconds);
}

/// Called by the engine to prepare the framework to produce a new frame.
///
/// This function calls all the transient frame callbacks registered by
/// [scheduleFrameCallback]. It then returns, any scheduled microtasks are run
/// (e.g. handlers for any [Future]s resolved by transient frame callbacks),
/// and [handleDrawFrame] is called to continue the frame.
void handleBeginFrame(Duration rawTimeStamp) {
  _firstRawTimeStampInEpoch ??= rawTimeStamp;
  _currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);
  if (rawTimeStamp != null)
    _lastRawTimeStamp = rawTimeStamp;
  ...
  _hasScheduledFrame = false;
  try {
    // TRANSIENT FRAME CALLBACKS
    ...
    final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;
    _transientCallbacks = <int, _FrameCallbackEntry>{};
    callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {
      if (!_removedIds.contains(id))
        _invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp, callbackEntry.debugStack);
    });
    _removedIds.clear();
  }
  ...
}

void _invokeFrameCallback(FrameCallback callback, Duration timeStamp, [ StackTrace callbackStack ]) {
  ...
  try {
    callback(timeStamp);
  } catch (exception, exceptionStack) {
    ...
  }
  ...
}

void _tick(Duration timeStamp) {
  assert(isTicking);
  assert(scheduled);
  _animationId = null;

  _startTime ??= timeStamp;
  _onTick(timeStamp - _startTime);

  // The onTick callback may have scheduled another tick already, for
  // example by calling stop then start again.
  if (shouldScheduleTick)
    scheduleTick(rescheduling: true);
}

return Card(
  margin: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),  // Card距左上右8个逻辑像素，距下0个逻辑像素
  color: Colors.white,                                    // Card的背景为白色
  clipBehavior: Clip.antiAlias,     // 使用抗锯齿的方式裁切，这样Card底部的进度条下半部分也会有Card的圆角
  // 使用InkWell可以让其子Widget有水波纹效果的点击事件
  child: InkWell(
    onTap: () {}, // InkWell的点击事件
    child: Container(
      padding: const EdgeInsets.only(top: 16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            // 第一行，用来显示Task的title、截止时间
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  task.title,
                  // 指定text的样式
                  style: Theme.of(context).textTheme.headline,
                ),
                Container(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        margin: const EdgeInsets.only(right: 4.0),
                        child: Icon(
                          Icons.timer_off,
                          size: 12.0,
                          color: Theme.of(context).textTheme.caption.color,
                        ),
                      ),
                      Text(
                        // Flutter格式化时间 1️⃣
                        Utils.duration(DateTime.fromMillisecondsSinceEpoch(task.deadline)),
                        style: Theme.of(context).textTheme.caption,
                      ),
                    ],
                  )
                ),
              ],
            ),
          ),
          Padding(
            // 第二行，用来显示Task的message、上次操作时间
            padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              // 子元素基线对齐，必须要指定textBaseline属性
              crossAxisAlignment: CrossAxisAlignment.baseline,
              textBaseline: TextBaseline.alphabetic,
              children: <Widget>[
                Text(
                  task.message,
                  style: Theme.of(context).textTheme.body1,
                ),
                // 如果有更新时间，显示更新时间，否则显示空的Text布局
                task.updated != null ?
                Container(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        margin: const EdgeInsets.only(right: 4.0),
                        child: Icon(
                          Icons.done,
                          size: 12.0,
                          color: Theme.of(context).textTheme.caption.color,
                        ),
                      ),
                      Text(
                        Utils.duration(DateTime.fromMillisecondsSinceEpoch(task.updated)),
                        style: Theme.of(context).textTheme.caption,
                      ),
                    ],
                  )
                ) : Text(''),
              ],
            ),
          ),
          // 线性进度条
          LinearProgressIndicator(
            value: task.currentCount / task.totalCount,
          ),
        ],
      ),
    ),
  )
);

import '../utils.dart' as Utils;

Utils.duration(DateTime.fromMillisecondsSinceEpoch(task.deadline))

import '../utils.dart' as Utils show duration;

String formatDate(DateTime dateTime) {
  var dateFormat = DateFormat('yyyy-MM-dd');
  return dateFormat.format(dateTime);
}

import 'package:flutter/material.dart';

import '../data/task.dart';
import '../utils.dart' as Utils;

class TaskListPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    print("build => ${this.runtimeType.toString()}");

    // ListView的构造方法，只需要传入总个数以及每个item如何构建就行
    final body = ListView.builder(
        itemCount: 2,
        itemBuilder: (context, index) {
          return TaskListItem(index);
        }
      );

    return Scaffold(
      appBar: AppBar(
        title: Text('Ready'),
      ),
      body: body,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: "添加Task",
        child: Icon(Icons.add),
      ),
    );
  }
}