Dart & Flutter Code Formatter

dart_style is the Dart formatter

Dart has one official formatter. dart format on the command line, Format Document in VS Code and Reformat Code in Android Studio all call the same library, dart_style, maintained by the Dart team. This page runs that library compiled to WebAssembly, so the output is what your IDE would produce, which is handy on a machine without the Flutter SDK, in a code review, or when tidying a snippet from an issue tracker. The code is formatted locally and never uploaded.

Like gofmt, dart_style deliberately has almost no configuration. Indentation is always 2 spaces, so the toolbar’s Indent setting has no effect here, and lines are wrapped at 80 columns, the Dart default. Since Dart 3.7 a project can raise that limit with formatter: page_width: in analysis_options.yaml; if yours does, expect lines between 80 and that width to be split here but not in your IDE.

The tall style and trailing commas

Recent versions of dart_style use the “tall” style introduced with Dart 3.7, and that is what you get here. The big change from the older formatter is how it treats trailing commas: the formatter now owns them.

• When an argument list, collection or parameter list has to be split across lines, a trailing comma is added after the last element, and the closing bracket goes on its own line.
• When a construct fits on one line, an existing trailing comma is removed and the construct is joined, so [\n 1,\n 2,\n] becomes [1, 2].

If you learned Flutter when a trailing comma was the trick to force a widget tree onto multiple lines, that trick no longer works: the formatter decides purely by line length. Deeply nested widget trees still end up vertical, because they rarely fit in 80 columns.

To keep a hand-formatted region, such as a matrix or a lookup table, wrap it in // dart format off and // dart format on comments.

What it leaves alone

dart_style only changes whitespace and commas, including blank lines: class declarations are separated from their neighbours by an empty line, as in the counter example below. It does not swap double quotes for single ones (that is the prefer_single_quotes lint), sort imports, add const or remove unused code; those are dart fix and analyzer jobs. Modern syntax parses fine: records, patterns and destructuring, switch expressions, sealed and final classes, class modifiers and extension types.

Input with import 'package:, a void main() or a Widget build( method is recognised automatically. Ctrl/Cmd+Enter reformats the widget tree and Ctrl/Cmd+Shift+C grabs it.

When parsing fails

dart_style refuses to format code it cannot parse, and the message is always the same: “Could not format because the source could not be parsed:”. The useful part is the position, which the editor highlights. Missing semicolons, unclosed braces and unterminated strings are the usual causes. The message does not say which of these it is, so start at the highlighted column and work backwards.

Examples

import 'package:flutter/material.dart';
class Counter extends StatefulWidget{const Counter({super.key,this.step=1});final int step;@override State<Counter> createState()=>_CounterState();}
class _CounterState extends State<Counter>{int count=0;
@override Widget build(BuildContext context){return Column(children:[Text('Count: $count'),ElevatedButton(onPressed:()=>setState(()=>count+=widget.step),child:const Text('Add'))]);}}

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key, this.step = 1});
  final int step;
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count += widget.step),
          child: const Text('Add'),
        ),
      ],
    );
  }
}

sealed class Shape{}
class Circle extends Shape{final double r;Circle(this.r);}
class Square extends Shape{final double side;Square(this.side);}
double area(Shape s)=>switch(s){Circle(:final r)=>3.14159*r*r,Square(:final side)=>side*side};
(String,int) parseLine(String line){final [name,qty]=line.split(',');return (name,int.parse(qty));}
extension type OrderId(String value){}

sealed class Shape {}

class Circle extends Shape {
  final double r;
  Circle(this.r);
}

class Square extends Shape {
  final double side;
  Square(this.side);
}

double area(Shape s) => switch (s) {
  Circle(:final r) => 3.14159 * r * r,
  Square(:final side) => side * side,
};
(String, int) parseLine(String line) {
  final [name, qty] = line.split(',');
  return (name, int.parse(qty));
}

extension type OrderId(String value) {}

Future<List<Order>> fetchOrders(http.Client client,{int page=1,}) async{final res=await client.get(Uri.parse('https://api.example.com/orders?page=$page'));if(res.statusCode!=200){throw HttpException('status ${res.statusCode}');}final data=jsonDecode(res.body) as List<dynamic>;return data.map((e)=>Order.fromJson(e as Map<String,dynamic>)).toList();}

Future<List<Order>> fetchOrders(http.Client client, {int page = 1}) async {
  final res = await client.get(
    Uri.parse('https://api.example.com/orders?page=$page'),
  );
  if (res.statusCode != 200) {
    throw HttpException('status ${res.statusCode}');
  }
  final data = jsonDecode(res.body) as List<dynamic>;
  return data.map((e) => Order.fromJson(e as Map<String, dynamic>)).toList();
}

Common errors and how to fix them

Related tools

• Kotlin formatter
• Swift formatter
• JSON formatter
• YAML formatter
• JavaScript / JSX formatter
• TypeScript / TSX formatter
• Java formatter