11 things to remember in the next Flutter project

original

https://medium.com/flutter-community/11-things-to-remember-for-your-next-flutter-project-1c7c380895ca

text

Creating a new Flutter project is a good thing - a fresh code base, no legacy code (not yet), null security, the latest version of your favorite package, etc. But at the same time, you should make key decisions at the beginning of the project that will lay the foundation for the future, such as tools, packages, file structures, state management solutions, and test plans. Otherwise, this project will eventually become another bowl of pasta and meatballs. To avoid this, I prepared a list. In my opinion, the most important elements of this project should be decided as early as possible. I hope it helps you, so ーーHappy reading!

1. Static program analysis

I will not write messy code ( source )

Linter is a static analysis tool used to identify and mark programming errors, warnings, and style defects in your code so that you can fix them. In the context of Flutter, this is one of the easiest things to implement and one of the most useful things to keep the code clean.

There are many different rules for your code to follow, but I suggest you use a pre-defined rule, which already follows the best practices based on the Dart style guide:

https://dart-lang.github.io/linter/lints/index.html

https://dart.dev/guides/language/effective-dart/style

No matter which package you choose, you can add or delete any specific static analysis rules in the analysisservices \_ options. yaml file.

2. Localization (l10n)

Localization [Source] ( https://marcosantadev.com/wp-content/uploads/Localization_Tips.jpg

What is localization (l10n for short)?

Localization is the adjustment of a product or service to meet the "look and feel" needs of a specific language, culture, or desired population- TechTarget

It is necessary to build an application that users feel natural, such as using correct translations, date and currency formats, and text orientation. Therefore, localization is a basic tool. Even if you are building a single region/language application, I still recommend that you implement localization as early as possible to separate the text from the UI code. Therefore, they can be reused and adjusted without affecting the code.

Flutter documentation exquisitely explains the process of internationalizing applications. If the default method seems too complicated, or you need some useful extensions and helper methods, there are some popular third-party packages, such as easy_localization , which can help you complete the localization process.

3. Environment (some smell)

Programming environments source

I bet that when someone corrupts data or deletes the entire user table in production, you have heard at least one case from your environment (no pun intended). Believe me, this is not fun at all. Therefore, it is a good practice to create different environments for your project:

The (local) environment is used to drive you crazy: experiment in the code, change data directly in the database, use shortcut keys and hardcode authentication marks or provide simulated data. Have fun and provide these features

Helps you verify changes in your code, test features with "real" data (usually using production data snapshots in this environment), and verify the application before it is released to the production environment. If you have quality assurance engineers in your team, this is where they shine
Environment-An environment used by real users where data corruption is unacceptable (please always make a backup)

Having such an environment can help you safely experiment and verify features before these changes reach the user.

Now, another part-taste. No, no, we are not talking about sweet, salty or sour things-this is just another term used in programming to describe different build variants of an application. For example, you want to make icons and titles, API endpoints, or any other configuration different for each specific environment. To do this, you need to define a different "flavor" that is used when building applications for specific environments. Here are some tips on how to the Create Flavors for Flutter .

4. Continuous Integration and Continuous Delivery

Continuous integration phase (CI) and continuous delivery integration phase (CD) source

After introducing different environments, the natural next step is to automate the process of building, testing, and releasing applications. CI/CD itself is a fairly complex subject, and I am not an expert in this field anyway, so I recommend searching for some other resources on how to automate the different stages of application development.

However, there are many NoOps solutions that are compatible with Flutter, so you can easily automate your development process:

Appcircle;
Codemagic ;
Bitrise;
VS App Center (No Flutter integration yet, but there are some resources to help you set up everything)

Any of these solutions can solve the problem - simply, choose a solution that meets your needs and budget.

5. Backend code

about the back end (1615664a71af62 source )

Have you implemented the backend in any special or less fancy programming language? Very good, you can skip this step, but I still recommend that you check out some cloud solutions for future reference.

In the simplified version, there are two options for the backend part of the application:

Use any programming language and framework you like to implement a custom back-end solution, but later will handle all DevOps so that your code and data can be accessed from the application
Use any cloud solution to accelerate the development process and leave most of DevOps to the cloud provider

If you find the second option very attractive, you can choose some of the cloud platforms that support Flutter:

The cloud platform provides authentication, database, storage, API options, and many other features for your application. If you only need to verify this idea and quickly build an MVP without spending a lot of time on a mature back-end solution, then any of the above is a good choice.

6. Logging, crash data and analysis

(Oh, something wrong 1615664a71b0d5 source )

Logging is underestimated-here, I said it! Everything is fine, until something goes wrong, you need to know this information. When we discuss what should be recorded and what should not be recorded, there is always a grey area. But one thing is always clear: you must know when the application crashes and the cause of the problem. The more data you collect about this incident, the easier it will be to discover and solve the problem.

like 1615664a71b12e Sentry , Firebase Crashlytics , Datadog , Datadog can help you record the most important data, crash reports, and even set up notifications when your application or related services fail.

Another type of logging is to collect user data for analysis purposes. When you are building a brand new, possibly top-notch product, it is crucial to understand the needs of users, their behavior, and how they use the application. For this, various analysis tools can be integrated into your Flutter application, such as Firebase Analytics analysis, App Center Analytics central analysis and many more.

7. Application branding

Material theming (Material theming ( source )

One of the main goals of any application or brand is to gain recognition. Use the right color palette, logos, icons, design elements, content, fonts, and sometimes even layout to make your product stand out. This is the branding of the application. Preparing the basic parts at the beginning will save you a lot of time throughout the project.

If you have prepared your UI prototypes or design components, it is time to transfer them to your application and define themes-colors, fonts, shapes, etc. For convenience, a good guy Mike Rydstrom created an excellent package flex_color_scheme

8. Project structure and status management

(Flutter state management ( source )

Yes, the controversial one. It needs to be clarified that there is no such thing as "best country management solution" or "best application architecture"-if someone doesn't think so, please remember that they may also pour milk into the bowl first, and then Pour the cereal again. This is the worst part-I can't teach you the best way. I can only provide a few options or share my preferences.

Several file structure options for the next Flutter project:

Clean Architecture — A clear separation of concerns, whether it will exist for a long time. To be honest, I don't like this. I think there are too many abstractions in this concept, which may slow down the development process
Layered Architecture relies on the idea of dividing data, business, and presentation logic into different levels. This file structure works well for small and medium-sized projects, but I feel that as the project grows, these layers will become more and more overwhelmed
Modular Architecture (I have described this concept) (I have described this concept here ) ーDividing the code into modules with different functions so that different modules can interact with each other. This is my favorite One-it works smoothly with the group country management solutions (TEAM BLoC, YEAH!). For large projects, the scale is very large. However, it also brings some challenges, such as where the common logic is placed, and different modules should How to communicate etc.

Regarding the issue of state management in "Flutter", I think we have reached the time to use the entire meeting to discuss this issue, but there is no final answer afterwards. I just want to add one point, choose the one you feel most comfortable with. You can find a comprehensive list of options here

9. Code generation

Code generation (code generation ( source )

If you want to simplify some steps and save some development time, you can use code generation in your project. Less coding, more delivery! Code less, deliver more

There are a range of different tools available, whether it is dealing with localization, assets, parsing JSON, generating model classes, implementing service locators, routing, or dealing with immutable state. The only thing to do is to investigate the available tools and packages and choose the best tools and packages to meet your project needs.

For a quick Flutter project start, I recommend checking out Very Good CLI . This will save you hours of configuration (unfortunately, I have learned the hard way).

In addition, last month I also gave a talk about code generation it may be the starting point of Flutter's code generation journey, so check it out!

10. Test Strategy

Application testing ( source )

Is it good or bad to cover 100% of the code with tests? Of course, this is great, but at what price? Think of it this way, and you might fall into an abyss that is destined to fall into trouble, where you spend more time writing tests instead of developing features. To avoid this, you need a testing strategy.

Don't get me wrong-it is a good thing to cover code with tests, and the more hidden the code, the safer it is to implement new features. It’s just that, in my opinion, you should find a balance where the test still brings you more value compared to the time it takes to write the test. For example, this is my test strategy:

Business logic (services, repositories, BLoCs ) should be covered 85-100% in the business logic (service repository, a cluster) should Unit / Integration Tests unit / integration testing ーThis is for all applications in the most important part , So I see great value in testing;
Widget tests should contain all reusable UI components. When a single component is tested correctly, you can start testing a single screen, but don’t be too detailed
End-to-end tests End-to-end tests , covering the main application flow and interaction with the UI. There is no deep magic - just going through some key workflows. The more screens they contain, the better
When the entire user interface is ready and implemented- golden tests ensure that the UI will not be affected by future changes

To be honest, I am still looking for the golden mean in the test, but trust me, you will do better in one project after another.

11. Readme file

Make a README (Readme file ( source )

You heard it right, file. The README file is the most important document in the project, especially when working in a team.

Have you just introduced a new solution that requires code generation? Did you just add a useful bash script to automate this process? Have you implemented a global logger that must be used anywhere in the project? We can't read your thoughts-mention this in the README file!

There is not much documentation (at least I have not encountered such a situation), only lack of information about the project and code. All commands for generating, testing and running code, various file structure decisions, diagrams, external tools and services, and information about different environments (without SECRET KEYS) should be placed here and kept in a separate place. This is a boring job, but it is a very valuable job!

Phew, what a ride... (This car is really good... source )

That's it! Thank you for taking the time to read this article.

Did I miss something? Mention it in the comments! What is your checklist when building a new Flutter application?