Counter with History - Flutter Typing CST Test

Counter with History — Flutter Code

Counter that logs all increment and decrement actions in a history list.

import 'package:flutter/material.dart';

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

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

class CounterScreen extends StatefulWidget {
	@override
	_CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
	int _count = 0;
	List<String> _history = [];

	void _increment() {
		setState(() {
			_count++;
			_history.add('Incremented to $_count');
		});
	}

	void _decrement() {
		setState(() {
			_count--;
			_history.add('Decremented to $_count');
		});
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: Text('Counter with History')),
			body: Column(
				mainAxisAlignment: MainAxisAlignment.center,
				children: [
					Text('Count: $_count', style: TextStyle(fontSize: 32)),
					Row(
						mainAxisAlignment: MainAxisAlignment.center,
						children: [
							ElevatedButton(onPressed: _decrement, child: Text('-')),
							SizedBox(width: 10),
							ElevatedButton(onPressed: _increment, child: Text('+')),
						],
					),
					Expanded(
						child: ListView.builder(
							itemCount: _history.length,
							itemBuilder: (context, index) => ListTile(title: Text(_history[index])),
						),
					)
				],
			),
		);
	}
}

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