Proper flutter/dart formatting

Question

I am working in some flutter code. The code stacks closing braces on the same line. In addition, when I run "Format Document" in VSCode, it also stacks the braces on a single line.

Like this (see last line)...

return Container(
    width: 200,
    child: CupertinoTextField(
        maxLength: 10,
        textCapitalization: TextCapitalization.characters,
        focusNode: focusNode,
        decoration: BoxDecoration(
            border: Border.all(color: Colors.white.withOpacity(0))),
        style: accentTextStyle,
        placeholder: "NAME",
        textAlign: TextAlign.center,
        keyboardAppearance: Brightness.dark,
        controller: _textController,
        onChanged: (s) {
          navigation.update();
          if (s == '') {
            program.name = 'UNNAMED${navigation.programsCounter}';
            return;
          }
          program.name = s.toUpperCase();
        }));

But in the flutter docs and example code, all of the examples use the follow format (where braces are on separate lines).

return Container(
  width: 200,
  child: CupertinoTextField(
    maxLength: 10,
    textCapitalization: TextCapitalization.characters,
    focusNode: focusNode,
    decoration: BoxDecoration(
        border: Border.all(color: Colors.white.withOpacity(0))),
    style: accentTextStyle,
    placeholder: "NAME",
    textAlign: TextAlign.center,
    keyboardAppearance: Brightness.dark,
    controller: _textController,
    onChanged: (s) {
      navigation.update();
      if (s == '') {
        program.name = 'UNNAMED${navigation.programsCounter}';
        return;
      }
      program.name = s.toUpperCase();
    }
  )
);

Which is the proper format? Also, does "Format Document" use the dart extension to get the proper format?

Solution

You can use comma(,) at the end of the braces. Then the 'Format Document' will separate the lines for each brace. Try this:

return Container(
 width: 200,
 child: CupertinoTextField(
    maxLength: 10,
    textCapitalization: TextCapitalization.characters,
    focusNode: focusNode,
    decoration: BoxDecoration(
        border: Border.all(color: Colors.white.withOpacity(0))),
    style: accentTextStyle,
    placeholder: "NAME",
    textAlign: TextAlign.center,
    keyboardAppearance: Brightness.dark,
    controller: _textController,
    onChanged: (s) {
      navigation.update();
      if (s == '') {
        program.name = 'UNNAMED${navigation.programsCounter}';
        return;
      }
      program.name = s.toUpperCase();
    },
   ),
  );

Edit:

Ok, you are looking for the proper method. As mentioned in the official document, you should use trailing commas.

To get good automatic formatting, we recommend you adopt the optional trailing commas.

Comments

[Akif]

Ok, you can look at the editing part at the end of the answer: stackoverflow.com/a/64543605/10659482

[Scorb]

That doesn't really answer the question though.

[Hamza]

Sir, there is no proper format. Its upto you whichever suits you. I just added how to achieve a well formatted code. P.S I didn't hear from any Flutter engineer about formats. They recommended the solution I shared with you :) Cheers, Good day :)

[Scorb]

No there is a correct format, it is the one specified by the dartfmt project which is a an opinionated formatter. So I am curious if VSCode is using this or not, and which format matches.

[Hamza]

I think it is .dart extension maybe, but if you add commas it will format them in proper fashion ending with //Container like comments for more clarification :)