[FLUTTER] 스톱워치(Stopwatch) 만들기

test_app.zip

0.13MB

▶ main.dart

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

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

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

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

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

class _MainPageState extends State<MainPage> {
  Timer _timer;
  int _timeCount = 0;
  bool _isRunning = false;
  List<String> _lapTimeList = [];

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('스톱워치'),
      ),
      body: _buildBody(),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: _isRunning ? Icon(Icons.pause) : Icon(Icons.play_arrow),
        onPressed: () => setState(() {
          _clickPlayButton();
        }),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget _buildBody() {
    int secondCount = _timeCount ~/ 100;
    String hundredthCount = '${_timeCount % 100}'.padLeft(2, '0');

    return Center(
      child: Padding(
        padding: const EdgeInsets.only(top: 30),
        child: Stack(
          children: <Widget>[
            Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Text(
                      '$secondCount',
                      style: TextStyle(fontSize: 50.0),
                    ),
                    Text('$hundredthCount'),
                  ],
                ),
                Container(
                  width: 100,
                  height: 200,
                  child: ListView(
                    children: _lapTimeList.map((time) => Text(time)).toList(),
                  ),
                )
              ],
            ),
            Positioned(
              left: 10,
              bottom: 10,
              child: FloatingActionButton(
                backgroundColor: Colors.deepOrange,
                onPressed: _clickResetButton,
                child: Icon(Icons.rotate_left),
              ),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: RaisedButton(
                onPressed: () {
                  setState(() {
                    _recordLapTime('$secondCount.$hundredthCount');
                  });
                },
                child: Text('랩타임'),
              ),
            )
          ],
        ),
      ),
    );
  }

  void _start() {
    _timer = Timer.periodic(Duration(milliseconds: 10), (timer) {
      setState(() {
        _timeCount++;
      });
    });
  }

  void _pause() {
    _timer?.cancel();
  }

  void _clickPlayButton() {
    _isRunning = !_isRunning;

    if (_isRunning) {
      _start();
    } else {
      _pause();
    }
  }

  void _clickResetButton() {
    setState(() {
      _isRunning = false;
      _timer?.cancel();
      _lapTimeList.clear();
      _timeCount = 0;
    });
  }

  void _recordLapTime(String time) {
    _lapTimeList.insert(0, '${_lapTimeList.length + 1}등 $time');
  }
}