Widget fa formázása

Amikor elszaporodnak a kódban a widgetek, akkor van szükség a widget fa formázására.

Adott ez a kódrészlet:

void main() {
  runApp(const MaterialApp(
    home: Scaffold(body: Center(child: Text('Hello World!'))),
  ));
}

Még alig-alig használtunk pár widgetet, de már kezd egy kissé nehezen olvasható lenni.

A VSCode-ban van egy gyorsbillentyű kombináció arra, hogy automatikusan formázzuk a kódot. Ez a SHIFT+ALT+F billentyű kombináció.

Ugyanezt ki tudjuk váltani, ha a View menüből kiválasztjuk a Command Palette… almenüt, majd a megjelenő ablakban elkezdjük beírni a kacsacsőr ( > ) után, hogy Format. Megjelennek a választható lehetőségek, ahonnét a Format Document lesz a nyerő választás:

Akármelyiket is választjuk, a végeredmény ugyanaz lesz. Vagyis… úgy néz ki hatástalan. Valószínűleg túl rövid még a kód ahhoz, hogy a dokumentum formázás életbe léphessen. De mi akkor a megoldás?

A Dart trükkje

A Dartnak van egy ügyes trükkje.

Az egyes zárójelek után tegyünk egy vesszőt ott, ahol a Widget több paramétert is várhatna:

void main() {
  runApp(const MaterialApp(
    home: Scaffold(body: Center(child: Text('Hello World!'),),),
  ),);
}

Ezután már működni fog a formázás. Tehát jöhet például a SHIFT+ALT+F, és íme az eredmény:

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    ),
  );
}

Így már sokkal átláthatóbb és struktúráltabb. Könnyebb áttekinteni az egész Widget fát. Ez egy olyan követendő példa (best practice), amit bármikor alkalmazhatunk, mert szépen formázott, áttekinthető kódot kapunk eredményül.