Flutter에서 스타일 관리: FontSizeCollection과 ColorsCollection 활용법

Flutter 앱 개발 시 일관적인 디자인 유지를 위해 스타일을 효과적으로 관리하는 것이 중요합니다.

이 블로그에서는 두 가지 유용한 클래스 FontSizeCollection과 ColorsCollection을 소개하여 텍스트 크기와 컬러를 쉽게 관리하는 방법을 설명 드립니다.

 

1. FontSizeCollection

 

FontSizeCollection 클래스는 앱 전체에서 사용되는 폰트 크기를 관리하는 데 도움이 됩니다.

이 클래스는 싱글턴 패턴을 사용하여 앱에서 단일 인스턴스만 생성되도록 보장합니다.

• 코드 설명

class FontSizeCollection {
  static final FontSizeCollection _instance = FontSizeCollection._internal();

  factory FontSizeCollection() {
    return _instance;
  }

  FontSizeCollection._internal();

  double get buttonFontSize => 18.0;
}

• 사용법

final FontSizeCollection fontsize = FontSizeCollection();

Text(
  '회원 가입을 해주셔서 감사합니다.\\n\\n',
  style: TextStyle(
    fontSize: fontsize.buttonFontSize, // buttonFontSize 속성 사용
    color: Colors.black,
    fontWeight: FontWeight.bold,
  ),
);

 

위 코드에서 fontsize.buttonFontSize 속성을 사용하여 버튼 텍스트의 크기를 18.0으로 설정합니다.

마찬가지로 다른 텍스트 스타일 속성값도 필요에 따라 설정할 수 있습니다.

 

2. ColorsCollection

 

ColorsCollection 클래스는 앱 전체에서 사용되는 다양한 색상을 관리하는 데 도움이 됩니다.

마찬가지로 싱글턴 패턴을 사용하여 앱에서 단일 인스턴스만 생성됩니다.

• 코드 설명

class ColorsCollection {
  static final ColorsCollection _instance = ColorsCollection._internal();

  factory ColorsCollection() {
    return _instance;
  }

  ColorsCollection._internal();

  Color get background => Colors.black;
  Color get textColor => Colors.white60;
  Color get iconColor => Colors.white;
  Color get cardColor => Colors.white12;
  Color get stateIsIng => Colors.blue;
  Color get stateIsClose => Colors.red;
}

 

• 사용법

final ColorsCollection colors = ColorsCollection();

Text(
  '확인',
  style: TextStyle(
    color: colors.iconColor, // iconColor 속성 사용
    fontSize: 16.0,
    fontWeight: FontWeight.bold,
  ),
);

 

위 코드에서 colors.iconColor 속성을 사용하여 확인 버튼 텍스트의 색상을 white로 설정합니다.

다양한 UI 요소에 필요한 색상을 ColorsCollection 클래스를 통해 관리할 수 있습니다.

 

3. 장점

• 일관성 유지: 앱 전체에서 일관적인 스타일을 유지하기 쉽습니다.
• 코드 중복 방지: 스타일 값을 한 곳에서 관리하여 코드 중복을 줄일 수 있습니다.
• 유지 보수 용이: 스타일 값을 변경해야 할 때 한 곳만 수정하면 됩니다.

4. 추가 활용법

• 텍스트 스타일

TextStyle titleTextStyle = TextStyle(
  fontSize: FontSizeCollection().titleSize,
  color: ColorsCollection().textColorPrimary,
);

 

• 버튼 스타일

ElevatedButton(
  onPressed: () {},
  child: Text('버튼'),
  style: ElevatedButton.styleFrom(
    primary: ColorsCollection().buttonColor,
    textStyle: TextStyle(
      color: ColorsCollection().textColorOnPrimary,
      fontSize: FontSizeCollection().buttonTextSize,
    ),
  ),
);

 

5. 마무리

 

FontSizeCollection과 ColorsCollection 클래스를 사용하면 Flutter 앱의 스타일을 효과적으로 관리할 수 있습니다.

이를 통해 일관적이고 유지 관리가 용이한 디자인을 구현할 수 있습니다.

 

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg