DARTFMT messes up @Component decorator formatting

Issue

This is a bug, so I don’t know if I’m posting in the right place. Please let me know where to post instead if this is the wrong place.

What you see below is the exact formatting produced by running dartfmt on the code below. As you can see, the formatting of the @Component decorator is atrocious.

I’m using Dartfmt 1.0.12 as provided by the latest Dart 2 developer release.

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

import 'routes.dart';

@Component(selector: 'my-app', templateUrl: 'app_component.html', directives: [
  routerDirectives
], providers: [
  const ClassProvider(Routes),
], styleUrls: [
  'package:angular_components/app_layout/layout.scss.css'
])
class AppComponent {
  final Routes routes;

  AppComponent(this.routes);
}

Solution

Insert a comma just before the closing bracket of @Component(...) and you’ll probably get what you expect.

This is what dartfmt produces once the comma is inserted:

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

import 'routes.dart';

@Component(
  selector: 'my-app',
  templateUrl: 'app_component.html',
  directives: [routerDirectives],
  providers: [
    const ClassProvider(Routes),
  ],
  styleUrls: ['package:angular_components/app_layout/layout.scss.css'],
)
class AppComponent {
  final Routes routes;

  AppComponent(this.routes);
}

Answered By – Patrice Chalin

Answer Checked By – Marie Seifert (FlutterFixes Admin)