How to do it...

Let's start building our stopwatch with a basic counter that auto increments:

1. We need to create a new shell for the app that will host the MaterialApp widget. This root app will still be stateless, but things will be more mutable in its children. Start off by adding the following code for the initial shell (StopWatch has not been created yet, so you will see an error that we will fix shortly):

import 'package:flutter/material.dart';

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

class StopwatchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StopWatch(),
    );
  }
}

2. Create a new file called stopwatch.dart. A StatefulWidget is divided into two classes –the widget and its state. There are IDE shortcuts that can generate this in one go, just like there are for StatelessWidget. However, for your first one, create the widget manually. Add the following code to create...