[Flutter] 플러터 Color 컬러 Class 분할 및 Style 변수 적용 관리

 

대부분 플러터에서 Colors. 함수를 호출하여 Hex 코드로 컬러를 설정 하시지만.

뒤에 계시는 찐찐 개발자님들은 컬러를 Class로 분리하여 style 변수로 관리하십니다.

사실 이러한 스타일 변수 관리는 비단 컬러만이 아닌 폰트 스타일 및 Front View 작업에서는 흔하게 사용되어야 뒤에 계시는 개발자님들이 좋아 하십니다. 또한 다른 앞개발자 담당이 변경되더라도 쉽게 코드 분석이 가능하기에 반드시 필요한 작업이라 생각됩니다.

 

우선 폴더하나 만들고 dart 파일 하나 생성하고 커럴 class 생성해줍니다.

 

class AppColors {
  static const Color pink = Color(0xffe11475);
  static const Color coral = Color(0xffff7ea5);
}

 

그리고 텍스트 컬러 또는 컨테이너 백그라운드 컬러 등등 Color 함수가 사용되는 부분 에서는 모두 호출하여 사용이 가능합니다.

 

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: const [
      Text(
        '커피는 제가 탈터니',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w500,
          color: AppColors.pink,
        ),
      ),
      Text(
        '분위기는 손님이 타세요',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w500,
            color: AppColors.coral,
          )
      )
    ],
  ),
)

 

뭐, 이렇게 가능합니다. ㅎㅎ

 

다음에는 TextStyle 함수의 스타일을 Class로 생성하여 쉽게 관리하는 방법에 대해 포스팅 하겠습니다.

더 좋은 방법이 있으시다면 한수 배울 수 있게 댓글 부탁드려요 ㅠ.ㅠ