.png)
Hello,
I’m working on a new mobile app these days. I’ve set myself a deadline and I plan to release my app on GooglePlay at the end of August. The writing part of the program is mostly done, now I’m researching how I can make my code cleaner, more maintainable, how I can refactor it.
At this stage, I wanted to share what I learned here. Now let’s examine what we can do for clean code.
1. Follow Flutter’s Official Guidelines
The first recommendation we came across was Flutter and Dart’s own documentation.
- Use Dart’s effective practices: Dart’s official guidelines, known as Effective Dart, provide comprehensive advice on how to write readable, maintainable, and effective Dart code. It covers style, documentation, design, and usage guidelines.
- Flutter documentation: The Flutter documentation includes extensive tutorials, sample codes, and best practices. Regularly refer to it to stay updated on the best ways to implement Flutter features.
2. Structure Your Project
Foldering turned out to be more important than I thought. I used to open and name the dart files under the lib folder respectively, but that’s not how it should be done.
- Feature-based structure: Instead of organizing files by type (e.g., putting all models in one folder, all views in another), organize your project by features. For instance, have separate directories for features like
authentication,home,profile. Each feature directory can contain subdirectories for models, views, controllers, etc.
lib/
features/
authentication/
models/
views/
controllers/
home/
models/
views/
controllers- Separate business logic: Patterns like BLoC (Business Logic Component), Provider, or Riverpod help you separate business logic from the UI code. This separation makes the code more modular, testable, and maintainable.
3. Use State Management Wisely
It is also necessary to choose the type of state management carefully. We should not say that I learned provider, I will use this in all my projects.
- Choose appropriate state management: Evaluate different state management solutions such as Provider, Riverpod, BLoC, and Redux. Choose one that fits your project’s needs and complexity. For simpler apps, Provider might be sufficient, while larger apps may benefit from BLoC or Redux.
- Keep widgets simple: Widgets should primarily be concerned with rendering UI. Avoid embedding business logic within widgets. This keeps your UI code clean and your logic reusable.
4. Write Reusable Widgets
Breaking widgets into small pieces that can be reused is very useful when you want to fix or update the code later. However, it is important not to load more than one mission into a widget, especially about UI.
- Break down UI into small widgets: Avoid creating large, monolithic widgets. Instead, break down the UI into smaller, reusable widgets that encapsulate specific pieces of functionality. This modularity makes it easier to test and reuse code.
- Encapsulate widget functionality: Each widget should have a single responsibility. For instance, if you have a
ProfileCardwidget, it should only be concerned with displaying profile information, not fetching it from a server.
5. Follow Naming Conventions
Naming conventions are the first thing to learn. As the project grows, it needs to be planned so that it doesn’t turn into a tangle, fortunately I’m doing it well for now. :)
- Consistent naming: Use a consistent naming convention throughout your codebase. For instance, use
camelCasefor variable names andPascalCasefor class names. - Meaningful names: Choose descriptive names that convey the purpose of the variable or function. Avoid single-character names except in loop counters.
6. Keep Code DRY (Don’t Repeat Yourself)
That’s what reusable widgets are for.
- Avoid duplication: If you find yourself writing the same code in multiple places, refactor it into a reusable function or widget. This reduces the risk of bugs and makes maintenance easier.
- Centralize configurations: Store configuration values (e.g., API endpoints, theme data) in a single place. This makes it easier to update them and ensures consistency.
7. Comment and Document
Writing meaningful lines of commentary to help us remember what was done and where after some time has passed saves lives.
- Document your code: Write meaningful comments to explain why certain decisions were made, especially for complex or non-obvious code blocks.
- Use Dartdoc: Add Dartdoc comments to your public APIs to generate useful documentation for your codebase. This helps other developers (and your future self) understand how to use your code.
8. Use Linting and Code Analysis
I first heard about linter in Google Digital Workshop’s Flutter course. Certain rules can be added to the project file and the coding process can be accelerated or automated.
- Enable linting: Use the Dart analyzer and linter to enforce coding standards and catch potential issues early. The
analysis_options.yamlfile can be configured to specify linting rules. - Customize linter rules: Adjust the linter rules to fit your team’s coding standards. For example, you might enforce a rule that all public methods have documentation comments.
9. Optimize Performance
I may have learned the importance of the const keyword too late, if it doesn’t need to be rebuilt every time, if it doesn’t change, it is a const.
- Avoid unnecessary rebuilds: Use
constconstructors, keys, and efficient state management to minimize unnecessary widget rebuilds. For instance, usingconstconstructors can help Flutter determine that a widget tree doesn't need to be rebuilt. - Profile your app: Use Flutter’s profiling tools (like the Dart DevTools) to identify and fix performance bottlenecks. This can help you understand where your app spends most of its time and optimize accordingly.
10. Write Tests
I continue to research the test writing phase. I will write a separate article on this.
- Unit tests: Write unit tests for your business logic. This ensures that your logic works correctly and makes refactoring safer.
- Widget tests: Write widget tests to ensure your UI behaves as expected. This can catch regressions and ensure your UI works correctly under various conditions.
- Integration tests: Write integration tests to verify the complete flow of your app. These tests run on real or simulated devices and ensure that all parts of your app work together as expected.
11. Version Control
Git and GitHub are very important for keeping track of project versions. We may want to look retrospectively to see where and what I changed, or we can avoid a possible data loss. After every feature I add in my application, I always send it to git.
- Use Git effectively: Commit changes frequently with meaningful messages. Use branches for new features and bug fixes to keep the main branch stable.
- Code reviews: Conduct regular code reviews to maintain code quality and share knowledge among team members. This can catch potential issues early and ensure consistent coding standards.
12. Keep Dependencies Updated
- Update regularly: Regularly update your Flutter and Dart SDKs, as well as package dependencies. This ensures you have the latest features, bug fixes, and security patches.
- Check for breaking changes: Review the changelog for breaking changes when updating dependencies. This helps you understand what changes you need to make to your code to accommodate the updates.
13. Use Extensions and Utilities
Helper functions can be used to optimize simple operations. For example, in my last project, I wanted to pluralize the category names coming from the database and I used it in a similar way.
- Create utility functions: Extract common functionality into utility functions or extensions. This helps keep your code DRY and organized. For example, you might create an extension on
Stringto add a method for capitalizing the first letter
extension StringExtension on String {
String capitalize() {
return this[0].toUpperCase() + substring(1);
}
}When I searched for what we can do to write clean and sustainable code in Flutter, I gathered what I found under these headings. If you have anything to add, you can write in the comments. I hope it was useful.
Thanks for reading.
Selin.
.png)
