Simple Stopwatch - Flutter Typing CST Test

Simple Stopwatch — Flutter Code

Basic stopwatch that counts seconds using StatefulWidget and Timer.

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

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

class StopwatchApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) => MaterialApp(home: StopwatchScreen());
}

class StopwatchScreen extends StatefulWidget {
	@override
	_StopwatchScreenState createState() => _StopwatchScreenState();
}

class _StopwatchScreenState extends State<StopwatchScreen> {
	int _seconds = 0;
	Timer? _timer;

	void _start() => _timer = Timer.periodic(Duration(seconds: 1), (_) => setState(() => _seconds++));
	void _stop() => _timer?.cancel();
	void _reset() => setState(() => _seconds = 0);

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: Text('Stopwatch')),
			body: Center(
				child: Column(
					mainAxisAlignment: MainAxisAlignment.center,
					children: [
						Text('$_seconds s', style: TextStyle(fontSize: 48)),
						Row(
							mainAxisAlignment: MainAxisAlignment.center,
							children: [
								ElevatedButton(onPressed: _start, child: Text('Start')),
								SizedBox(width: 10),
								ElevatedButton(onPressed: _stop, child: Text('Stop')),
								SizedBox(width: 10),
								ElevatedButton(onPressed: _reset, child: Text('Reset')),
							],
						)
					],
				),
			),
		);
	}
}

Flutter Language Guide

Flutter is an open-source UI framework by Google for building cross-platform mobile, web, and desktop applications using a single Dart codebase, featuring a highly performant rendering engine and a rich set of customizable widgets.

More Flutter Typing Exercises

Practice Other Languages