Why? What? Who? How?

[nelsonic]

Why?

We need a way of helping people learn Flutter the right way as fast as possible. The "right way" to build anything is to follow best practices for both architecture and reliability. If you are new to a particular language/framework simply search for them: e.g: google.com/search?q=flutter+best+practices For which the many relevant results: (we should summarise these before building the Todo List)

• Official best practices: https://flutter.dev/docs/perf/rendering/best-practices
• Gavin Doughtie - Architecting the Reactive Flutter App: http://youtu.be/n_5JULTrstU [28:43]
• Keep it Simple, State: Architecture for Flutter Apps: https://youtu.be/zKXz3pUkw9A [28:59]
• Effective code in your Flutter app from the beginning: https://medium.com/flutter-community/effective-code-in-your-flutter-app-from-the-beginning-e597444e1273

We know from our experience of building software that Apps without tests fall apart very quickly. (if you are totally new to software engineering in a team, you can be excused for not knowing that TDD is essential to the success of Apps built by multiple people ...) That's why we wrote the github.com/dwyl/learn-tdd tutorial. So it's easy for everyone to learn. We wrote the github.com/dwyl/javascript-todo-list-tutorial to help people practice TDD while building a real-world App. Now there's really no excuse not to follow TDD.

There are already several good examples of Flutter apps: https://github.com/dwyl/learn-flutter/issues/19 If we simply copy one of those Todo List examples without adding any instructions or following best practices we will have failed to add any value. There's no point What does not yet exist is a tutorial that builds an app from scratch following best practices with a full test suite and documentation of all the steps and functions.

Compare and contrast the following two Phoenix Chat examples: a. https://github.com/chrismccord/phoenix_chat_example (the "official" example) b. https://github.com/dwyl/phoenix-chat-example (the @dwyl step-by-step example/tutorial) Which one would you rather learn from as a complete beginner?

Note: this is not meant as a "criticism" of Chris, he is very busy making other awesome things. It's just to point out that there is a huge gap between a basic example and a comprehensive one.

What?

A step-by-step example/tutorial showing people how to build a Todo List App in Flutter following the best practices:

• "Documentation Driven Development" https://opensource.com/article/17/8/doc-driven-development
• "Test Driven Development"
• Whichever architecture is most maintainable one. (suggestions as comments below)

Who?

Anyone @dwyl who wants to learn Flutter can contribute to the example/tutorial provided they understand that we want it to represent the best possible Flutter example possible.

We are writing the example for anyone else in the wider development community who wants to learn Flutter and build their own app(s).

How?

This is a good starting point for code inspiration: https://github.com/brianegan/flutter_architecture_samples/tree/master/redux But we want to write a comprehensive step-by-step guide.

Todo: Build a TodoMVC Clone in Flutter

This is what we need to do for this repository to be considered "done":

• [x] Read and follow all steps in the JavaScript Todo List Tutorial: dwyl/javascript-todo-list-tutorial

  Only by fully understanding the flow of Test Driven Development (TDD) can we build a tutorial that follows best practices.

• [x] Read, understand and summarise how to do TDD in Dart/Flutter: #1
• [x] Ensure that the "setup" instructions in github.com/dwyl/learn-flutter are complete including a "trouble-shooting" section for people who get stuck. We don't want people stumbling at the first hurdle
• [ ] Build a Todo List Application that implements all of the features described in the TodoMVC specification. see: https://github.com/dwyl/javascript-todo-list-tutorial#requirements
• [ ] Split the tutorial into as many sections (markdown files) as needed and
  • [ ] include "previous" and "next" links at the bottom of each file.

[miguelmartins17]

@nelsonic I'm sorry. I thought I was doing it the right way. I'll try to help you get better. Do you want me to change the answers to the questions by the answers you just added?

[nelsonic]

@miguelmartins17 please never apologise when it's my fault for not making it clear. 👍 You are already making a good start on this. 🥇 We need our tutorials to be the best they can be and we don't ever want to be the cause of "bad habits" in people who are learning. That's why we have to be extra proactive in reading about the "best practices" before we write something. Remember the best teacher you ever had and compare them to the worst one you had or heard of. Aspire to be the best teacher, it will automatically make you the best at the subject matter. Always think about the person struggling to learn the subject, you don't want them to ever have a reason to "give up" learning.

[miguelmartins17]

I'm working on summarizing what's here: https://flutter.dev/docs/perf/rendering/best-practices

I'll start work on Flutter's repository. Will we include the information in this document in the Tutorial repository or the Flutter repository ? 💭

[miguelmartins17]

@nelsonic Where should we put Flutter information in the Flutter repository or the Flutter Tutorial ? 🤔

[nelsonic]

Miguel what "Flutter information" are you referring to?

[miguelmartins17]

I'm talking about the summary of the best practices of Flutter

[nelsonic]

learn-flutter

[nelsonic]

If it's a generic principal or practice, it goes in the generic repository. That is the pattern we have followed in all our tutorials.

[miguelmartins17]

Of course then the information regarding these four documents goes to the learn-flutter.

[miguelmartins17]

What do you think of this example of the use of TDD in Flutter ? 💭

https://medium.com/learnfazz/common-mistakes-in-tdd-and-tdd-in-flutter-2bf682071036

[nelsonic]

@miguelmartins17 thanks for sharing the link. 🔗 Please in future, summarise what you learned from reading an article to save others the time. You could have saved me at least an hour by trying to follow the instructions in the link you shared.

While I applaud the author @adalberht for writing the article, (practice is the only way to get better) I really wish they had user a free grammar checker. It makes it really difficult to read when my brain has to stop correcting grammar and focus on the intent ... 🙄

I ran the article through https://www.grammarly.com (free online writing checker) and it wasn't pretty:

(this is why all learning content should be editable so that it can be improved... or perhaps Medium should include grammar checking in their blogging platform...?)

The "Red, Green, Refactor" cycle is good. (looks familiar ... https://github.com/dwyl/learn-tdd#how ...) The post is mega incomplete which super frustrating! I actually tried to follow the post: https://github.com/dwyl/learn-flutter/blob/flutter-tdd-issue%2315/test/image_picker_bottom_sheet_test.dart

I spent hours trying to make's tutorial work but the code simply does not render! I commented on the post: The author seems talented and conscientious, but the Gists and non-functioning code is a major letdown.

I really hate it when people share "gists" of code instead of linking to the full working example! There is no extra effort to put the code on GitHub instead of Gist and it makes the life the person reading the post infinitely easier because they can simply git clone the code and run it!

Along the way I read: https://medium.com/flutterpub/writing-and-running-widget-tests-from-android-studio-d63b9fea21c5 Which lead me to: https://flutter.dev/docs/cookbook/testing/integration/introduction I was able to run the example in the official cookbook: I suggest you try and follow it.

Also, how much of the links Simon shared in #1 have you followed?

---

Addendum:

The author of the post thanked me for my feedback: The outcome is that other people will not suffer the same frustration in future and the author can improve their posts with more extensive/helpful examples.