“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

We introduced Dart naming conventions earlier. In this article, we introduce Dart code ordering and formatting conventions. It starts with repeating the same line: Code is written for people.

Import Import order

The order of imports itself does not affect code execution, but neat imports make your code look more comfortable and feel more organized. The official recommendation for the import sequence is shown in the following figure.

For peers, the recommendation is to sort them alphabetically (this one is a bit difficult 😂). Here’s an example:

// Correct example
import 'dart:async';
import 'dart:html';

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

import '.. /components/buttons.dart';
import '.. /utils/http.dart';

// Error example (not alphabetically ordered)
import 'package:foo/foo.dart';
import 'package:bar/bar.dart';

import 'foo/foo.dart';
import 'foo.dart';
Copy the code

Export should come after all imports, with a blank line between them

This is easy to understand, the export should be placed after the import, and there is a blank line between them for differentiation. Here is an example:

// Correct example
import 'src/error.dart';
import 'src/foo_bar.dart';

export 'src/error.dart';

// Error example
import 'src/error.dart';
export 'src/error.dart';
import 'src/foo_bar.dart';
Copy the code

Use the Dart Format tool to format the code

Dart provides the Dart Format tool to format code. The simple command is as follows. For details, see the official document: Dart-format.

#Format the current folder file
dart format .
#Format multiple directories or files using space separations
dart format lib bin/updater.dart 
Copy the code

Prettier-code Formatter for VSCode, of course, prettier-code Formatter is recommended.

No more than 80 characters in a single line of code

This is a requirement of most programming languages, large screens may be less perceptive, but the code reading experience is terrible when the screen is small. For Flutter, after Prettier is used, it is a good practice to put a comma after the property so that it wraps automatically. For example, here is the difference between a comma and no comma. Obviously, the reading experience with a comma is better.

// Place a comma after each attribute
PrimaryButton(
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context) =>
            const WindmillIndicatorDemo(),
      ),
    );
  },
  title: 'Windmill Animation',),// No comma
PrimaryButton(
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (BuildContext context) =>
          const WindmillIndicatorDemo(),
    ));
  },
  title: 'Windmill Animation'),
Copy the code

Use Prettier to wrap lines beyond characters. Prettier Prettier can be found in GitHub’s documentation Prettier -vscode

Branch code

For control code with multiple branches, use curly braces to wrap each branch.

// Correct example
if (isWeekDay) {
  print('Bike to work! ');
} else {
  print('Go dancing or read a book! ');
}

// Error example
if (isWeekDay) {
  print('Bike to work! ');
} else print('Go dancing or read a book! ');
Copy the code

Braces may not apply to statements that have only one branch and can be written on a single line (up to 80 characters).

if (arg == null) return defaultValue;
Copy the code

If a line is not complete, use curly braces:

// Correct example
if(overflowChars ! = other.overflowChars) {return overflowChars < other.overflowChars;
}

// Error example
if(overflowChars ! = other.overflowChars)return overflowChars < other.overflowChars;
Copy the code

The operator

For assignments, operators, conditional judgments, arrow functions, etc., there is a space before and after the operators to enhance the reading experience. The following examples compare, which reading experience is better, at a glance!

// Correct example
double r = 3.0;
double area = pi * r * r;
_elevation = _elevation == 0 ? 10.0 : 0.0;
if (area <= 2.0) {
  print('Less than 2.0.');
}

MaterialPageRoute(
  builder: (BuildContext context) => const AnimatedWidgetDemo(),
),

// Error example
double r=3.0;
double area=pi*r*r;
_elevation=_elevation==0?10.0:0.0;
if (area<=2.0) {
  print('Less than 2.0.');
}

MaterialPageRoute(
  builder: (BuildContext context)=>const AnimatedWidgetDemo(),
),
Copy the code

conclusion

This article describes the order in which the Dart language is imported and exported, as well as the most basic rules for coding. The same rules apply to other languages, just remember: Code is written for people! Pay attention to your code naming style and coding style, and then use some formatting tools to make your code look neat!

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!