2

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?

1

3 Answers 3

8

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.

1
  • 3
    You can add rules on analysis_options.yaml for auto adding trailing comas. require_trailing_commas: true
    – Sucipto
    Jul 17, 2022 at 0:02
0

You can also get the same indentation by adding commas between the braces and hit the indentation button:

  • VS Code: alt + shift + f
  • Android Studio: ctrl + alt + l

Works perfectly fine for me :)

Adding Commas like:

onChanged: (s) {
          navigation.update();
          if (s == '') {
            program.name = 'UNNAMED${navigation.programsCounter}';
            return;
          }
          program.name = s.toUpperCase();
        },),);

After indentaion:

    onChanged: (s) {
      navigation.update();
      if (s == '') {
        program.name = 'UNNAMED${navigation.programsCounter}';
        return;
      }
      program.name = s.toUpperCase();
    },
  ),
);
4
  • 2
    That doesn't really answer the question though.
    – Scorb
    Oct 26, 2020 at 19:17
  • 1
    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 :)
    – Hamza
    Oct 26, 2020 at 19:19
  • 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.
    – Scorb
    Oct 26, 2020 at 19:27
  • 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 :)
    – Hamza
    Oct 26, 2020 at 19:50
0

I had the same issue, @Akif's answer did it for me. Make sure you have a comma at the end of your closing ) and the formatter will work as expected.

Without commas at the end your formatter will do this:

void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(
      title: Text('My First App'),
    ))));

If you add the commas at the end the results will look like this:

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('My First App'),
          ),
        ),
      ),
    );

So i guess it's good practice to always add a comma even if there's only 1 element for formatting purposes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.