vsc에서 flutter 코드 정렬 할 때, 위젯 별로 정렬되지 않은 문제 해결하기

 

---

 

1. 문제

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(home: Scaffold(body: Center(child: Text("hello world"),),),),
  );
}

# 코드 포맷터 사용 후

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(home: Scaffold(body: Center(child: Text("hello world")))),
  );
}

# 내가 원하는 것

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("hello world"),
        ),
      ),
    ),
  );
}

 

다음과 같이 되어 있는 코드에서 포맷터를 이용하여 코드 정렬을 하면 각 위젯마다 정렬돼서 나오는 것을 원했는데, 위와 같이 한 줄로 나오고 위젯마다 줄 바꿈 돼서 보이지 않는 문제가 발생했다. 

 

 

 

2. 해결 방안

 해당 문제는 Dart SDK 버전 3.7에 도입된 새로운 Dart 포맷터를 이용하여 생긴 문제이다. (아마도 한 줄에 사용된 글자 수가 짧아서 한 줄로 표현하기 위해서 다음과 같이 패치한 듯) 

 

해당 문제를 해결하기 위해서는 flutter프로젝트의 pubspec.yaml 파일에서 다음 값을 변경해 준다. 

 

# 변경 전 
environment:
  sdk: ^3.7.0
  
# 변경 후 (하위 호환성을 추가)
environment:
  sdk: ">=3.6.0 <4.0.0"
  flutter: ">=3.6.0"