파란줄이 생기는 이유?
파란줄이 뜨는 이유를 보면 constant, 전역변수를 쓰라고 권장하고 있다.
constant는 수정할 수 없고, 컴파일 전에 그 value를 알 수 있는 변수이다.
constant 변수는 메모리 공간을 만드는 대신, 값을 검토하고 대체시킨다.
파란줄을 없애려면 어떻게 해야할까?
설정(톱니바퀴 아이콘) > 명령 팔레트 > open user settings 입력
settings.json에 들어가 다음과 같은 코드를 입력하면 된다.
"editor.codeActionsOnSave": {
"source.fixAll": true
},그 후 저장 후에 다시 main.dart로 돌아와 다시 저장하면 파란줄이 사라지게 된다.
constant여야 하는 곳은 자동으로 const가 붙게 된다.
가이드라인 설정하기
설정(톱니바퀴 아이콘) > 설정 > preview 검색 > Dart:Preview Flutter Ui Guides 체크
체크 후 VS code를 종료 후 재시작 하면 다음과 같이 가이드 라인을 확인할 수 있다.
재사용 가능한 위젯, Extract Widget
코드를 작성하다보면 중복되는 위젯을 배치해야 하는 경우가 온다. 그럴 경우 재사용할 수 있는 별도의 위젯으로 따로 추출할 수 있다.
전구 모양의 code action을 클릭하여 Extract Widget을 누르면 위젯을 내보낼 수 있는 기능을 제공한다. 위젯 내보내기를 클릭하면, 내보낼 위젯의 이름을 설정하라고 나온다.
이름을 설정하면 자동으로 위젯을 클래스화 시켜준다.
Stateless 위젯
하지만 우리는 아직 초보이기 때문에 dart언어에 조금 더 익숙해지고자 따로 위젯을 빼는 작업을 직접 할 것이다. 이 과정에서 Stateless 위젯을 치면 자동으로 StatelessWidget 위젯이 셋팅되지만 이 또한 있다는 사실만 알고 우리가 클래스들을 직접 만드는 것에 익숙해져보기로 한다.
build 메소드 실행
모든 위젯은 각자 나름대로의 build 메소드를 실행시켜야한다.
프로퍼티 생성
버튼에 글자색, 배경색, 글자문구가 각자 다를 수 있기 때문에 각 요소들을 프로퍼티들로 설정해준다.
final String text;
final Color bgColor;
final Color textColor;생성자 함수 생성
이렇게 변수를 생성하거나 우리 버튼이 이러한 프로퍼티들을 가지고 있다고 설정해주기 전에, 우리는 항상 생성자 함수(constructors)를 만들어야한다.
const Button(
{super.key,
required this.text,
required this.bgColor,
required this.textColor});놀랍게도 이또한 code action 버튼인 전구를 클릭하면 Create constructor for final fields 버튼이 있다.
하드코딩된 값들을 클래스 프로퍼티 값으로 변경
프로퍼티로 변경된 값들은 그 값들을 미리 알 수 없기 때문에 const가 될 수 없다.
굿굿