There are many concepts to understand in mobile development. Among these are pagination in API requests, local storage, error reporting, debugging, testing, linting, and CI/CD.
Following is a list of some open-source Flutter projects that can be used to study and improve our skills. All of these projects offer some useful concepts we can learn from.
Goal
We can learn from other people's code to understand and implement better code ourselves. This is where open-source projects come in. Using open-source projects is one of the best ways to improve our skills.
I look up to them personally. The list could have been much longer, but here I listed a few to get you started.
Let's take a look.
This is a web app. Flutter Web was made available on the stable channel this year. So Photo Booth is a great example of flutter web apps.
Another thing to learn from this is the use of native plugins like cameras. There're also firebase packages like firebase authentication, firebase storage, etc.
The app shows how we can internationalize a flutter app, how to structure folders, and the use of bloc as state management.
To go one step ahead, there's also CI/CD to look at when working with the deployment part. This app has GitHub workflows for testing, analyzing lint rules, deploying the new app version, etc.
The main focus for me though is the tests folder. From mocking a library to test gestures, there are many test cases that we can learn from.
This app is a part of a course. There are different branches for each topic.
As the name suggests, we can learn about error reporting, testing (unit, widget, and integration tests), and debugging.
This is specifically for riverpod package.
This app shows how we can paginate API requests while scrolling, how to cancel a request, and cache the result.
This project is wonderful. It shows how we can structure our code with various state management packages.
In addition to pagination, there's local data persistence as well.
This project is specifically for riverpod package.
This is a ToDo application. The project starts simple with basic functionality and then progresses with new features. There is a different folder for each concept.
This project first introduces various providers. Then it shows how we can use them to pass data in our UI. Next comes how to deal with asynchronous data with Riverpod. There's error handling and cache management as well.
These are the templates/examples from the Flutter team. From "hello world" to "flutter layer architecture" and "platform channel", there is a lot to cover.
This is great for getting started.
Additionally, there's another project with templates, new_flutter_template. This one is still in work in progress I believe. But there are a few samples to look at.
This app shows a number of examples of different widgets.
Besides that, the source code itself is a great example of how to deal with different themes, including font size and locale.
In addition to learning how to build the UI, there are also tests, Github workflows, and linting to look at.
This project focuses on the architecture and folder structure of the source code.
There is a lot of thought given to building a big-scale app codebase.
For state management and backend it's using Riverpod and firebase respectively. The common functionalities signing up, using firebase storage, dealing with APIs and streams, etc are converted with tests.
The other thing I appreciate about this project is the use of linting. Although now with the latest Flutter version, linting comes by default when we create a new app.
Nonetheless, linting is always a good thing to implement in a project.
There are some features/widgets that we might use in more than one app like a fancy animating container. We can make this code reusable if we make a separate package for it and import it into the projects that require it.
The author of this project does this for many UI components (widgets) and certain services like firebase auth. Now whenever the author has to use Firebase authentication, he can simply import the package and save time.
From studying this project can learn how to create a customizable and independent feature or services into a package.
This project seems to have it all. It handles API requests, caching images, managing notifications, localization, navigation, slivers, etc.
The beauty of this codebase is the code reusability. The project has a well-defined structure and uses generic classes.
This project can also be used to learn how to create model classes. Other things to look out for are tests, linting, and Github workflows.
Overall, the code is beautifully written and the project is well structured.
Ever wanted to make your own widgets from scratch? By scratch here, I mean the RenderObject itself.
There is rarely a need for someone to create your own render objects, but when the need arrives we can refer to this project to understand how to create them.
There're also tests written for these widgets.
With application architecture patterns in mind, the Domain-Driven Design pattern is one of the patterns we should be familiar with. This project follows the DDD architecture pattern and has tutorial series with both articles and videos by the author.
Along with DDD, the author has another application and tutorial series for Clean Architecture + Test-Driven Development (TDD).
To learn how to interact and write with the native interface (C APIs) in the dart, also known as ffi, this project is a great example.
As a bonus, there are tests as well.
This is not a flutter application but a repository with a collection of various flutter/dart code snippets.
Nonetheless, the collection is amazing and a great learning tool. There are various small tricks for optimization and such as well.
Final Note
Thank you for reading this article. If you enjoyed it, consider sharing it with other people.
If you find any mistakes, please let me know.
Feel free to share your opinions below.
