# flutter-counter-example
**Repository Path**: mirrors_dwyl/flutter-counter-example
## Basic Information
- **Project Name**: flutter-counter-example
- **Description**: A basic counter app built in Flutter following TDD best practices.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-02-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# `flutter-counter-tdd`
# _Why_? 🤷
The **_objective_** of the application
that will be created is to explain
**_step by step_** the creation of a Flutter application
using the **_TDD_**. get props => [value];
}
```
We will have a `value` that will start at 0 to `count` the numbers.
Additionally, the reason we implemented the `get props`
function is because we are **extending** Equatable,
and it's needed to properly compare the object's values.
Inside the `unit` folder that is inside the `test`folder we have created,
create `counter_test.dart`.
This will be used to create and run all the necessary `tests`
on the `Counter` class.
Our `first test` will be for the initial value to start at 0.
```dart
import 'package:flutter_test/flutter_test.dart';
import 'package:counter_app_tdd/Domain/counter.dart';
void main() {
group('Counter', () {
test('value should start at 0', () {
expect(Counter().value, 0);
});
});
}
```
The `second test` will be used to check
if the value is being `incremented` and if it's
only being increased *one by one*.
```dart
import 'package:flutter_test/flutter_test.dart';
import 'package:counter_app_tdd/Domain/counter.dart';
void main() {
group('Counter', () {
test('value should start at 0', () {
expect(Counter().value, 0);
});
test('value should be incremented', () {
final counter = Counter();
counter.increment();
expect(counter.value, 1);
});
});
}
```
And the `third test` will be to know if clicking on the decrement button decreases the value and if only is taken out one by one.
```dart
import 'package:flutter_test/flutter_test.dart';
import 'package:counter_app_tdd/Domain/counter.dart';
void main() {
group('Counter', () {
test('value should start at 0', () {
expect(Counter().value, 0);
});
test('value should be incremented', () {
final counter = Counter();
counter.increment();
expect(counter.value, 1);
});
test('value should be decremented', () {
final counter = Counter();
counter.decrement();
expect(counter.value, -1);
});
});
}
```
If we run the `tests` using the `flutter test`,
we'll see the test fail. This is expected,
as the functions that were used in the tests aren't yet implemented.
To pass the tests, head over to the `counter.dart` file
and add the `increment` and `decrement` functions.
```dart
import 'package:equatable/equatable.dart';
class Counter extends Equatable {
int value = 0;
increment() => value++;
decrement() => value--;
@override
// TODO: implement props
List get props => [value];
}
```
This way the tests will `pass`.
createState() => _CounterPageState();
}
class _CounterPageState extends State {
Counter _counter = Counter();
void _incrementCounter() {
setState(() {
_counter.increment();
});
}
void _decrementCounter() {
setState(() {
_counter.decrement();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
Text(
_counter.value.toString(),
style: Theme.of(context).textTheme.headline4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
onPressed: _decrementCounter,
tooltip: 'Decrement',
child: const Icon(Icons.remove),
),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
],
)
],
),
),
);
}
}
```
Let's go through what we just wrote.
We are using a **stateful widget**, which has a `Counter` object
in its state.
We add the `_incrementCounter()` and `_decrementCounter()` functions
which in turn change the state of the widget by
incrementing/decrementing the counter.
In the `build()` function, we use the `Center` widget
to center the contets of the page.
Inside this, we add a `Column`
that centers the contents using `MainAxisAlignment.center`.
The contents of this `Column are three-fold:
- a `Text` string 'You have pushed the button this many times:'
- a `Text` that prints the `counter` value
- a `Row` that has two `FloatingActionButton`s.
One button increments and the other decrements the counter.
The application is complete.
In Visual Studio, on the bottom bar,
click on the device you want to emulate.
We are going to use an iPhone 14 Pro Max emulator
to showcase the application.
After choosing the device, click `F5` or
`Run > Start Debugging`.
This will build the app and run it in the emulator.
Your app should now look like this :tada:.
|  |  |  |
|:--:|:-:|:-:|
# Running on a real device 🤳
Having an emulator is handy but at the end of the day,
users are going to be using the application on their devices
either be it an Android or an iPhone.
## Android
Let's do a rundown on how to get it working
on an Android Device.
Don't worry, it is super easy!
Firstly, you need to connect your phone to the computer
with a USB Cable.
Your device needs to have **Developer Option** and
**USB Debugging** turned on in the device settings.
In OnePlus' case, this is where you turn it on.
If you're not finding the developer option, go to `About`
section of the phone in the settings
and tap the build number multiple times,
until a message shows that you are now a developer.
The steps should look like the following image.
After having these settings turned on and your device connected to the computer,
you can check if the device is being detected by running:
```sh
flutter devices
```
In our case, by running this command, we verify that
our OnePlus is detected.