README.md 4.46 KB
Newer Older
1
# vanilla example
2

3
The vanilla example uses only the core Widgets and Classes that Flutter provides out of the box to manage state. The most important of these: the `StatefulWidget`.
4

5
## Key Concepts
6

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
  * Share State by Lifting State Up - If two Widgets need access to the same state (aka data), "lift" the state up to a parent `StatefulWidget` that passes the state down to each child Widget that needs it.
  * Updating State - To update state, pass a function from the Parent `StatefulWidget` to the child widget.
  * Local persistence - The list of todos is serialized to JSON and stored as a file on disk whenever the State is updated. 

## Lifting State

Let's start with a Simple Example. Say our app had only 1 Tab: The `List of Todos Tab`.

 ```
+------------+
|            |
|            |
|            |
|   List     |
|   of       |
|   Todos    |
|   Tab      |
|            |
|            |
+------------+
```

Now, we add a sibling Widget: The `Stats Tab`! But wait, it needs access to the List of Todos so it can calculate how many of them are active and how many are complete. So how do we share that data? 

It can be difficult for siblings to pass their state to each other. For example, what if you call `setState` in the `List of Todos Tab` to add a Todo: How would Flutter know it also needs to re-build the `Stats Tab` to reflect the latest count?

```
+-------------+                 +-------------+
|             |                 |             |
|             |                 |             |
|             |                 |             |
|             | Gimme dem Todos |             |
|   List of   | <-------------- +   Stats     |
|   Todos     |                 |   Tab       |
|   Tab       |                 |             |
|             |    No. Mine.    |             |
|             + --------------> |             |
|             |                 |             |
|             |                 |             |
+-------------+                 +-------------+
```

So how do we share state between these two Widgets? Let's Lift the state up to a Parent Widget and pass it down to each child that needs it!

```
     +-------------------------+
     |                         |
     |   Keeper of the Todos   |
     |    (StatefulWidget)     |
     |                         |
     +-----+--------------+----+
           |              |
           |              |
+----------|--+       +---|---------+
|          |  |       |   |         |
|          v  |       |   v         |
|             |       |             |
|             |       |             |
|   List of   |       |   Stats     |
|   Todos     |       |   Tab       |
|   Tab       |       |             |
|             |       |             |
|             |       |             |
|             |       |             |
|             |       |             |
+-------------+       +-------------+
```

Now, when we change the List of Todos in the `Keeper of the Todos` widget, both children will reflect the updated State! This concept scales to an entire app. Any time you need to share State between Widgets or Routes, pull it up to a parent Widget. Here's a diagram of what our app actually looks like!

```
   +------------------------------------------+
   |                                          |
   |      VanillaApp (StatefulWidget)         |
   |                                          |
   |    Contains List<Todo> and other State   |
   |                                          |
   +------------------------------------------+
             |                           |
+------------|---------------+  +--------|--------+
|            v               |  |        v        |
|                            |  |                 |
|      Main  Tabs Screen     |  | Add Todo Screen |
| +----------+  +----------+ |  |                 |
| |          |  |          | |  |                 |
| | List     |  |          | |  |                 |
| | of       |  |  Stats   | |  |                 |
| | Todos    |  |  Tab     | |  |                 |
| | Tab      |  |          | |  |                 |
| +----+-----+  +----------+ |  |                 |
|      |                     |  |                 |
+------|---------------------+  +-----------------+
       |
+------|---------+
|      v         |
|                |
|  Todo Details  |
|  Screen        |
|                |
+------+---------+
       |
       |
+------|---------+
|      v         |
|                |
|   Edit Todo    |
|   Screen       |
|                |
+----------------+

```