Create an app that has a single button in the center of the screen. The text (title) on the button will be our output.

When you first run the app, it loads the value of our single record from Firestore. The button's title should show the text in quotes below, with the disabled status given in parathesis. You should do this in an async function that you start when your screen is shown for the first time. We should see this in order:

• "loading" (button is disabled)
• "value: 0" (button is enabled)

So, initially, the button says loading, and is disabled. Then, when the record is loaded, it says value: 0 and becomes enabled.

At this point, when you press the button, we increase the value by one. Again, you can do this in an async function. We use the value that we had read before, which is 0. We increase that local value by 1 and record the result back to Firestore. Then, we read it back from Firestore and display it on the button again. So, we see these on the button, in order:

• "saving" (disabled)
• "loading" (disabled)
• "value: 1" (enabled)

The single record in Firestore should actually have the value 1 at this point.

Note that the loading phases can be too fast for you to see. You can use various approaches to test this:

• by turning of network connection and then turning it on
• by adding artificial delays that you await on
• by setting breakpoints and stepping over code in the debugger.

I need these in react native and also flutter.