이번 프로젝트에서 styled widget 패키지를 사용하고 있어, 간략하게 패키지에 대해 정리한다.

Styled Widget 개념 및 사용 가이드

1. Styled Widget이란?

Styled Widget은 Flutter 애플리케이션에서 위젯의 스타일을 더 쉽고 체계적으로 관리할 수 있게 해주는 패키지다.
이 패키지를 사용하면 위젯의 스타일을 선언적이고 재사용 가능한 방식으로 정의할 수 있다.

2. 왜 Styled Widget을 사용하는가?

코드 간소화: 복잡한 스타일 코드를 간단하고 읽기 쉬운 형태로 작성할 수 있다.
재사용성: 한 번 정의한 스타일을 여러 위젯에서 재사용할 수 있다.
유지보수 용이성: 스타일 변경이 필요할 때 한 곳에서 수정하면 모든 관련 위젯에 적용된다.
일관성: 앱 전체에 걸쳐 일관된 디자인을 유지하기 쉬워진다.
가독성: 위젯 트리와 스타일 정의를 분리하여 코드의 가독성이 향상된다.

3. Styled Widget 사용 예제

설치

dependencies:
  flutter:
    sdk: flutter
  styled_widget: ^1.0.0  # 최신 버전으로 대체

기존 플러터에서 작성법

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text(
    'Click me',
    style: TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
  ),
)

Styled Widget을 사용한 작성법

Text('Click me')
  .textColor(Colors.white)
  .fontSize(18)
  .fontWeight(FontWeight.bold)
  .padding(all: 16)
  .decorated(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  )

이 예제에서는 텍스트 위젯에 여러 스타일을 체인 형식으로 적용하고 있다.

스타일 재사용

final buttonStyle = Styled.widget(([Widget? child]) => child)
  .padding(all: 16)
  .decorated(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  )
  .gestures(
    onTap: () => print('Button tapped!'),
  );

Widget myStyledButton() {
  return Text('Click me')
    .textColor(Colors.white)
    .fontSize(18)
    .fontWeight(FontWeight.bold)
    .parent(buttonStyle);
}

이 예제에서는 buttonStyle을 정의하고 여러 버튼에서 재사용할 수 있다.

4. 주의사항

Styled Widget은 기존 Flutter 위젯을 대체하는 것이 아니라 보완하는 도구다.
모든 상황에 적합하지 않을 수 있으므로, 프로젝트의 요구사항에 따라 사용 여부를 결정해야 한다.
팀 내에서 일관된 사용 방식을 정의하고 따르는 것이 중요하다.
실제로 필자는 처음 접했을 때, 스플리팅이 되지 않은 방대한 코드에서 보기에는 오히려 더 가독성이 떨어지고 복잡해보였다.

5. 결론

Styled Widget은 Flutter 애플리케이션의 UI 코드를 더 깔끔하고 유지보수하기 쉽게 만들어주는 강력한 도구다.
특히 큰 규모의 프로젝트나 복잡한 UI를 가진 앱에서 그 장점이 두드러진다.
그러나 프로젝트의 특성에 따라 다른 스타일링 접근 방식(예: 테마 사용, 커스텀 위젯 생성)이 더 적합할 수 있다.
Styled Widget의 도입 여부는 프로젝트의 요구사항과 팀의 선호도를 고려하여 결정해야 한다.