update readme

Author: SimonLab

README.md

@@ -1,8 +1,38 @@
 # Flutter TodoList Tutorial
 
 Create a simple todolist Flutter application
+<div align="center">
+  <img src="https://user-images.githubusercontent.com/6057298/109024720-f4041b00-76b5-11eb-9221-ad8660315a0b.gif" height="600">
+</div>
 
-## Widgets
+To run the project on your machine:
+- make sure you have Dart and Flutter installed: https://flutter.dev/docs/get-started/install
+- clone this repository with `git clone [email protected]:dwyl/flutter-todo-list-tutorial.git`
+- Before running the application check that all the tests are passing with `flutter test`
+
+The application contains the following main folders:
+
+- `lib/models` Contains the `task` and `todolist` models
+- `lib/screens` Contains the different screens of the application. Currently only the tasks screen exists.
+  In the tasks folder you can find the task, tasks and todolist widgets which define the UI of this screen.
+- `lib/widgets` This folder is used to store widgets used on multiple screen, currently this folder is empty
+- `test` This contains the unit, widget and integration tests.
+
+The application is using [Provider](https://pub.dev/packages/provider) to manage the states.
+Providers allow us to notify the UI of the application when a state change. For example when a
+task is toggled the `notifyListener` function is called which let the application knows that a refresh of the
+task's UI is required: 
+
+```dart
+  void toggle() {
+    completed = !completed;
+    notifyListeners();
+  }
+```
+
+## Flutter concepts
+
+### Widgets
 
 Flutter is using Widgets to create the applications' UI.
 Widgets let you declare how and what to render on the screen.
@@ -26,9 +56,9 @@ see also:
 - widget index: <https://flutter.dev/docs/reference/widgets>
 - widget of the week on Youtube: <https://www.youtube.com/watch?v=b_sQ9bMltGU&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG>
 
-## Create a new Flutter application
+### Create a new Flutter application
 
-### A quick CLI tour
+#### A quick CLI tour
 
 You can create a new Flutter project with the following command line:
 
@@ -44,7 +74,7 @@ You can then run the application with `flutter run` and run the tests with `flut
 For the list of command type `flutter help`.
 For more details about a specific command, for example `create`, run `flutter create --help`
 
-### Material Design
+#### Material Design
 
 [Material Design](https://material.io/design/introduction) is a guideline to create user interface.
 Flutter implements the guideline with the [material components widgets](https://flutter.dev/docs/development/ui/widgets/material).
@@ -54,7 +84,7 @@ You can then browse all the material widgets and select the ones required for yo
 
 You have also the possiblity to create an IOs look by using the [Cupertino widgets package](https://flutter.dev/docs/development/ui/widgets/cupertino)
 
-### Main Widgets used
+#### Main Widgets used
 
 - [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html)
 - [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html)
@@ -69,44 +99,4 @@ Note that the `Column` and `Exapanded` widgets are "space" widgets.
 Flutter provide a widget inspector where you can see the full tree
 of the application:
 
-![widget tree](https://user-images.githubusercontent.com/6057298/93480078-f6876b00-f8f4-11ea-95df-3c81321e8284.png)
-
-### Create the application
-
-- [runApp](https://api.flutter.dev/flutter/widgets/runApp.html)
-- [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html)
-
-Dart requires a `main` function to be defined to create the start of your program.
-
-```dart
-void main() {
-    print('hello');
-}
-```
-
-the `runApp` function is used in the main function and takes a widget as parameter.
-This widget becomes the root element of your application and it is displayed on the
-user screen.
-
-The `MaterialApp` widget create a material design application.
-
-```dart
-void main() {
-  runApp(MaterialApp(title: 'TodoList', home: App()));
-```
-
-Note that the `App` widget is created later on as a `StatelessWidget`.
-
-see also:
-
-- <https://medium.com/@greg.perry/decode-materialapp-b730ee4eaed1>
-
-### Stateless and Statefull widget
-
-### Tests
-
-#### Unit tests
-
-#### Widget tests
-
-#### Integration tests
+![widget tree](https://user-images.githubusercontent.com/6057298/93480078-f6876b00-f8f4-11ea-95df-3c81321e8284.png)