Dart-code: Wrong indent while formatting nested children in an array

[dimsuz]

While using a Ctrl+Shift+I formatter tool I always got great results until I stumbled onto this odd indent behavior:

Notice how indent of Column widget fields is off by 2 indent levels.
What I believe it should look like (manually formatted):

If I remove Expanded widget which wraps the Column widget, indent starts to behave normally.

Version info:

VS Code

Version: 1.30.0
Commit: c6e592b2b5770e40a98cb9c2715a8ef89aec3d74
Date: 2018-12-11T22:21:33.585Z
Electron: 2.0.12
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
OS: Linux x64 4.19.8-arch1-1-ARCH

Dart Code

Name: Dart
Id: dart-code.dart-code
Description: Dart language support and debugger for Visual Studio Code.
Version: 2.21.1
Publisher: Dart Code
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dart-code.dart-code

P.S. I might have given a too generic name to this issue, maybe it should be renamed after you understand the issue.

[DanTup]

Thanks for the report. I think this is actually expected - I can repro with this code:

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Column(
      children: const <Widget>[],
    ));
  }

The issue is the two closing parens at the end )). There's no trailing comma between them, which means Expanded is not being formatted "the flutter way". If you insert it it ends up formatted like this:

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: const <Widget>[],
      ),
    );
  }

Similarly, if you insert a , between the last two parens in your method, it gets reformatted like this:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Row(children: <Widget>[
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const <Widget>[
              Text('test'),
              Text('test'),
            ],
          ),
        )
      ]),
    );
  }

Hope this helps!

[dimsuz]

Oh, I didn't know this comma-related convention exists for Flutter formatting. Thanks!

[DanTup]

It's not specific to Flutter, but it was added because the original formatting wasn't so readable for Flutter code. Basically if the formatter finds a trailing comma then it will put each argument indented on its own line, and without it it'll try to put it all on one line, wrapping with the original rules.

There's more info on the site at: https://flutter.io/docs/development/tools/formatting#using-trailing-commas

Hope this helps!

[dimsuz]

Understood. But still I find it a bit odd that here

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Column(
      children: const <Widget>[],
    ));
  }

children being the child of Column has lower indent level than child chich is the parent of Column. Most other formatters I've used up until now would've put children to the right of child, not to the left of it — to highlight the nesting.

But if it's a convention in Dart community, than I guess it's a matter of habit.

[DanTup]

Yeah, I think that's weird too. I think it's because you have a trailing comma for children so it's formatted that line so it'd fit in if the rest had trailing commas. I think as long as you consistently use them (or not), it'll format well.

But then, it could be a bug. The formatting isn't actually done by Dart Code, it comes from the official dart_style package, so this may get a better answer there :-)

[dimsuz]

OK, thank you for all the help!