This document contains the approach for clean code and best practices in flutter.

Overview of Flutter

• Definition: Flutter is an open-source UI software development kit created by Google. It allows developers to create natively compiled applications for mobile, web, and desktop from a single code base.

Importance of Clean Code and Best Practices

• Maintainability: Clean code is easier to maintain, understand, and extend by any developer, reducing the cost and effort over the lifecycle of the application.
• Readability: Well-organized code with clear naming conventions and structure is easier to read and understand.
• Scalability: Following best practices ensures that the application can scale efficiently as it grows in size and complexity.

Principles of Clean Code

Naming Conventions : Consistent naming conventions improve readability and make the code base easier to navigate.

• Variables and Methods : Use camelCase for variables, functions, and parameters name. Use descriptive names that convey the purpose. Method name should describe the action or behavior.

// Bad 
var x = 10; 
void foo() {}  

// Good 
var itemCount = 10; 
void fetchData() {}

• Classes: Use PascalCase for class names. Names should reflect the entity or concept.

// Bad
class Foo {}  

// Good
class HomeViewModel {}

• File Name: Name files using snake_case.

Consistent Formatting:

• Indentation: Use consistent indentation (typically 2 spaces for Dart).
• Style Guide: Use tools like flutter_lints to enforce coding standards.
• Braces: Always use braces for conditional statements and loops.

// Bad 
if (condition)   
  doSomething();  

// Good 
if (condition) {   
  doSomething(); 
}

Simplicity: Simplify Logic by Breaking down complex logic into smaller, manageable functions.

// Bad 
bool isEven(int number) {   
  if (number % 2 == 0) {     
    return true;   
  } else {     
    return false;   
  } 
}  

// Good 
bool isEven(int number) => number % 2 == 0;

Code Reviews: Regular code reviews by peer ensure adherence to standards and improve code quality.

Best Practices in Flutter

Organizing Your Project

• Data Layer: Handles data retrieval and storage.

lib/
├── data/
│   ├── models/
│   └── data sources/

• Domain Layer: Contains business logic and use cases.

├── domain/
│   ├── provider/
│   └── repositories/

• Presentation Layer: Manages UI and user interaction.

└── presentation/
    ├── screens/
    └── widgets/

Use Dart’s Strong Typing

• Why: Helps catch errors at compile time rather than at runtime.
• How: Always define types for variables, function parameters, and return types.

Leverage Flutter’s Built-In Widgets

• Why: Flutter provides a rich set of pre-built widgets that are optimized for performance and consistency.
• How: Use StatelessWidget for static content and StatefulWidget when the UI needs to change. Use ‘SearchDelegate’ to implement local search.

Optimize for Performance

• Why: Ensures a smooth and responsive user experience.
• How:
• Avoid rebuilding widgets unnecessarily.
• Use const constructors for widgets that don’t change.
• Minimize the use of setState and use more efficient state management techniques.
• Use RepaintBoundary to limit the area of the screen that needs to be repainted.
• Minimize the use of below widgets as they are expensive to build and manage
• Clip: Clipping operations can be computationally expensive, especially if applied frequently or to complex widgets.
• Opacity: The Opacity widget can cause performance issues because it forces the entire subtree to be composited, even if only a small part of the tree is visible. Consider using the Visibility widget.
• Nested Scroll: Using multiple nested ListViews or ScrollViews can cause performance degradation and lead to complicated scrolling behavior. Consider using a single ScrollView or employing a CustomScrollView with Sliver widgets to create complex scrolling layouts more efficiently.
• AnimatedBuilder with Expensive Build Methods: AnimatedBuilder is powerful for creating animations, but if the builder method contains complex UI logic, it can cause frame drops during animation. Move complex or expensive operations (like: Hitting n/w and parsing response) outside of the builder method, and only update what is necessary during the animation.
• Using Global Keys Excessively: GlobalKeys are powerful but can be memory-heavy and slow down the app because they keep track of widgets across the entire widget tree. Use GlobalKeys only when absolutely necessary, such as when maintaining the state of a widget across different parts of the widget tree.
• Nested Builders: Nesting multiple builders like FutureBuilder inside StreamBuilder can complicate the widget tree and cause unnecessary rebuilds. Combine the logic outside the build method or refactor the code to minimize the nesting of builders.
• Raw Pointer and Gesture Detectors: While GestureDetector and Listener are essential for handling gestures, using them excessively or inappropriately can cause performance issues and unexpected behavior. Prefer using higher-level gesture widgets like InkWell or InkResponse that are optimized for handling common gestures within material design guidelines.

Use Linting and Code Analysis Tools

• Why: Ensures that your code adheres to best practices and coding standards.
• How: Use the flutter_lints package or customize your linter rules. Regularly run flutter analyze to catch potential issues.

Write Unit and Integration Tests

• Why: Ensures that your code is working as expected and helps in catching bugs early.
• How: Use Flutter’s testing framework for writing unit, widget, and integration tests. Aim for good test coverage, especially for critical business logic.

Manage App State Efficiently

• Why: Proper state management ensures that your app remains responsive and maintains a clear separation of concerns.
• How: Choose a state management solution that fits your project, such as Provider, Riverpod, or GetX, and use it consistently across the app.

Keeping Widgets Small and Reusable

• Decompose Widgets: Break down large widgets into smaller, reusable components.

// Bad
class ComplexWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Title'),
          TextField(),
          RaisedButton(onPressed: () {}),
        ],
      ),
    );
  }
}

// Good
class TitleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Title');
  }
}

class InputWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField();
  }
}

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(onPressed: () {});
  }
}

class ComplexWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TitleWidget(),
          InputWidget(),
          ButtonWidget(),
        ],
      ),
    );
  }
}

Use Dependency Injection: Use DI tools/plugins, like GetIt, for injecting dependencies. Avoid to create objects directly.

final getIt = GetIt.instance;

void setup() {
  getIt.registerSingleton<SomeService>(SomeService());
}

// Accessing the service
class SomeWidget extends StatelessWidget {
  final SomeService someService = getIt<SomeService>();

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}