A YOLO Flutter Workshop!

Here we run some scripts to (hopefully) set everything up correctly. Then we YOLO against some Dart and Flutter.

I use Excalidraw for my pretty pictures in \planning\workshop.excalidraw. You should be able to import that file and see what unspeakable horrors I've concocted.

As an administrator, run \windows-setup.ps1 and accept any warnings that get thrown your way^{^}.

Run the following run sudo linux-setup.sh, and accept any warnings that get thrown your way^{^}.

Ask Adam for an API key we can use on the day, and put this in a .env file at the root of the directory

Install the VSCode Flutter extension here

If you're using a physical device:

• Run through the setup steps here for Windows, and here for iOS.

• If your flutter devices call doesn't pick up your device, ensure you've got the correct Android SDK version installed. For example, a Samsung Galaxy S9+ requires Android 10 (API 29). Use the Android Studio SDK to configure & install this, then restart your console and/or reconnect your device.

• Run through the setup steps here.

Note, that you cant do iOS development (from what I can see at least) on a Windows machine (question mark?).

While you can dev for Flutter on Chrome (hell its what I've done most of this workshop on!), my recommendation would be to stick to Android or iOS for your device as they're both first-class citizens of the Flutter world. I think the Web experience is still a bit raw.

If you're determined to do this (my sympathies), you'll have to do some extra setup to make Chrome temporarily forget about CORS and the like, otherwise you wont be able to call any APIs on the net. Apparently you can get around this by running a CORS proxy, but I dont currently know how to do this 🙃

See here on how to tweak Flutter's Chrome setup. I found this approach worked for me.

Alternatively, you can see here for a different approach if the above doesnt work for you.

Stage One - We're fixing some tests.

Stage Two - We're adding some dependencies.

Stage Three - We're Searching and Requesting.

Stage Four - We're creating a better Navigation experience!

Stage Five - We're creating a Search Results page!

Stage Six - We're creating a nice HTTP Client!

Stage Seven - We're creating a Details page with fancy Collapsible Panels!

1. git checkout da38d09: Hello world! - A basic flutter app with some things that need fixing.
2. git checkout 11e95bd: Fix some tests - Lets delve into testing with flutter and make sure our tests are working correctly.
3. git checkout 007021b: Add our dependencies - We need to add a HTTP client and a dotenv library to make our things work!
4. git checkout 30cc4d8: Set up our Search Screen and request something from the tracker.gg API.
5. git checkout 8f3f3ee: Make our nav experience a bit more coherent.
6. git checkout febed85: Add our (completely unnecessary lol) separate search results page!
7. git checkout 1a2c0da: Rework our networking stuff to use a dedicated HTTP client.
8. git checkout faf91f0: Add a details page with a collapsible panel!

1. The state of the FancyButton controller doesnt seem to handle the change for the status property, resulting in the CircularProgressIndicator spinner not loading/showing correctly. It'll eventually just pop into a 'Open result' button instead. NFI what I've done wrong here. The code for this was shamelessly stolen borrowed from this cookbook entry on the Flutter docs. Bonus points if you can figure this out.

   • I'm pretty sure its because I changed my FancyButton's ctor arguments to not use the state variables I'd set up on the search.dart form. I was trying to keep everything within FancyButton, nice and neatly contained. More fool me.

• Spin up a 'dart basics' file
• Rename the current linux script to macos because only macos has Brew lmao
• Change my commit hashes to tags because theyre nicer than commits (thanks vats!)
• Do a linux setup script

^{^ :: whispers :: I did say it was a YOLO workshop.}