styled_widget

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Styled Widget은 CSS와 SwiftUI를 영감으로 삼아 메서드 체인을 사용하여 위젯을 정의함으로써 위젯 트리 구축을 단순화하는 Flutter 패키지입니다. 스타일 및 레이아웃 속성을 유연하게 적용할 수 있어 더 깔끔하고 가독성 있는 코드를 만듭니다. 이 패키지는 중첩을 줄이고 복잡한 UI에서 유지보수성을 향상시킵니다. 모든 주요 플랫폼을 지원하므로, 선언적이고 표현력 있는 방식으로 Flutter 인터페이스를 구축하고자 하는 팀에게 이상적입니다.

사용 사례

깨끗하고 읽기 쉬운 UI 만들기
중첩 위젯 구조 줄이기
재사용 가능한 UI 컴포넌트 만들기
메서드 체인을 통한 스타일링 간소화
빠른 UI 프로토타이핑

주요 기능

위젯 생성을 위한 메서드 체이닝
CSS 유사 스타일링 구문
SwiftUI를 영감으로 한 API 설계
크로스 플랫폼 호환성
최소한의 보일러플레이트
반응형 레이아웃 지원

적합한 대상

간결한 UI 코드를 원하는 개발자
코드 가독성을 우선시하는 팀
복잡한 위젯 계층을 가진 프로젝트
프론트엔드 중심의 플러터 개발
빠른 UI 프로토타이핑

고려 사항

새 사용자를 위한 학습 곡선
깊은 체인에서 발생할 수 있는 성능 오버헤드
원시 위젯과 비교해 사용자 정의가 제한됨
추가 패턴 없이 고도로 동적 또는 상태 중심의 UI에는 적합하지 않습니다
다른 스타일 라이브러리와 충돌할 수 있습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Simplifying your widget tree structure by defining widgets using methods.

Thanks to the introduction of extension methods in Dart 2.7.0, styled_widget makes it possible to build widget tree`s more readable and efficient.

styled_widget is build as a tool to enhance your Flutter development experience and to seamlessly integrate with your codebase.

Showcase

Design, Code	Design, Code	Design, Code

Basic example

styled_widget has a bottom up approach to building widget`s. This means you start with the inner most element and layer widget`s on top. The following example is structured as follows: Icon -> blue circle -> light blue circle -> card -> background

Icon(OMIcons.home, color: Colors.white)
  .padding(all: 10)
  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)
  .padding(all: 15)
  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)
  .padding(all: 20)
  .card(
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  )
  .alignment(Alignment.center)
  .backgroundColor(Color(0xffEBECF1));

Raw Flutter (click to show)

DecoratedBox(
  decoration: BoxDecoration(
    color: Color(0xffEBECF1),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Card(
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Color(0xffE8F2F7),
            shape: BoxShape.circle,
          ),
          child: Padding(
            padding: EdgeInsets.all(15),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Color(0xff7AC1E7),
                shape: BoxShape.circle,
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Icon(
                  OMIcons.home,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);