flutter3

파란 줄

파란줄은 warning이다.

위처럼 파란 줄이 잔뜩 나오는데 보통 마우스를 올려서 설명을 보면

const를 사용해야 된다고 한다.

왜 const를 써야되는데?

우선 dart의 const를 생각해보자.
const는 complie 전부터 값을 알고있어야 한다.
아래 예시를 보자

const taxAmount =15
const priceAmount =20
var totalPrice =taxAmount + priceAmount

이것들은 constant라서 수정 X, value들은 컴파일 전에 알고있다.
dart 컴파일러가 컴파일하면 두 변수(tax,priceAmount)를 위한 메모리 공간을 만드는 게 아니라 totalPrice의 각 각 변수를 값으로 대체한다.

//컴파일 후
var totalPrice =15 + 20

몇몇 위젯은 constant다. app이 동작하는 데 더 쉽기 때문에 const를 넣어 달라고 warning이 뜨는 것.
그래서 파란 줄이 뜨는 곳에 const를 넣어주면 되는데... 너무 많다.
주의 : 이후 코드가 변화함에 따라 정상이었던 코드가 const로 인해 에러가 발생할 수 있음

그냥 파란줄 안보고 싶은데 어떻게함?

1. ctrl + shift + p
2. open user settings(JSON)
   
3. 문서에 다음 코드를 추가하자. 그리고 main.dart로 돌아와서 저장.

"editor.codeActionsOnSave": {
        "source.fixAll": true
    },

첫번째 중괄호 안에 작성

settings를 수정하여 constant 여야 하는 부분이 자동으로 constant화 됨

가독성이 너무 떨어져서 힘들 때는 setting.json에 다음을 추가

"dart.previewFlutterUiGuidesCustomTracking" : true

vs code 를 재실행 해주면 아래처럼 부모를 알려주는 줄이 생긴다.

자동으로 코드를 포맷하고 정렬, 자동 콤마를 위해서는

"editor.formatOnSave" : true

아래는 내 settings.json 전체 코드다.

{
    "dart.flutterSdkPath": "C:\\flutter",
    "dart.previewFlutterUiGuides": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    "dart.previewFlutterUiGuidesCustomTracking" : true,
    "editor.formatOnSave": true
}

extension : Error Lens

에러 상황에 에러 위치를 좀 더 직관적으로 보여주고, 에러 이유를 화면에 출력해준다.

Code Actions

어떤 요소를 감싸는 위젯을 만들고 싶다면

Ctrl + . (dot) 을 이용하자 (전구를 클릭해서 이용해도 된다.)

거기서 원하는 Action을 선택해서 사용하자. Padding, Wrap with widget 등..
없애고 싶으면 다시 ctrl+.으로 remove widget을 선택하면 된다.

이 기능을 사용하면 불편하게 전체 코드를 잘라내고 위젯을 작성하고 다시 붙여넣는 번거로움을 줄일 수 있다.

투명도 설정

추가 확인이 필요하지만
이전 포스트에서 투명도를 설정할 때 Opacity위젯으로 텍스트를 감싸서 구현했는데,
Colors.white 대신 Colors.white70 처럼 숫자를 뒤에 붙여서 구현할 수도 있는 것 같다.

클래스로 직접 위젯을 만들어보자

이전에 만든 버튼을 재사용할 것임
Button.dart 파일을 작성하자

//Button.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  final String text;
  final Color bgColor;
  final Color textColor;

  const Button({
    super.key,
    required this.text,
    required this.bgColor,
    required this.textColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(45), color: bgColor),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
        child: Text(
          text,
          style: TextStyle(
            color: textColor,
            fontSize: 20,
          ),
        ),
      ),
    );
  }
}

동적으로 동작하게 했기 때문에 이전에 const였던 text가 더 이상 const가 아니게 된다. 따라서 const Padding에서 const를 제거해야함.
(물론 settings.json설정 덕분에 저장만 하면 알아서 해준다.)

이렇게 만든 위젯을 main.dart에 돌아가서 적용해보면 이전과 동일하게 동작하는 걸 확인할 수 있다.