패키지, 저장소 및 앱 카테고리 검색

패키지 상세v2.1.0

flutter_conditional_rendering

조건부 렌더링을 향상시키고 if-else 및 switch 조건을 지원하는 플러터 패키지입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
9.7천
좋아요
114
Pub 점수
160

패키지 설치

flutter pub add flutter_conditional_rendering

패키지 개요

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

if-else 및 switch 문을 사용하여 위젯 기능을 확장함으로써 UI 개발에서 조건부 렌더링을 단순화하는 플러터 패키지입니다. 실행 시 값에 따라 위젯을 조건부로 표시할 때 더 깔끔하고 가독성 있는 코드를 작성할 수 있도록 도와줍니다. 기존의 플러터 프로젝트에 원활하게 통합되며, Android, iOS, Web, macOS, Windows, Linux 등 주요 모든 플랫폼을 지원합니다. 논리 기반의 가시성 제어가 필요한 동적 UI에 적합합니다.

사용 사례

  • 상태에 기반한 동적 UI 요소
  • 양식 내 조건부 위젯 표시
  • 스위치 기반 레이아웃 변경
  • 사용자 역할 기반 인터페이스 렌더링
  • 간단화된 중첩 삼항 표현식
  • 플랫폼별 로직을 갖춘 반응형 디자인

주요 기능

  • 위젯 트리에서 if-else 구문을 지원합니다
  • switch-case 조건 렌더링을 제공합니다
  • 복잡한 조건에서 반복 코드를 줄입니다
  • 모든 플러터 플랫폼에서 작동합니다
  • pub add 명령을 사용한 최소 설정
  • 깨끗하고 읽기 쉬운 조건 논리

적합한 대상

  • 더 깔끔한 조건부 UI 코드를 원하는 개발자
  • 자주 상태에 따라 렌더링되는 프로젝트
  • 유지보수 가능한 위젯 로직을 우선시하는 팀
  • 플랫폼별 UI 변경이 필요한 앱
  • 선언적 UI 패턴을 사용하는 프론트엔드 개발자

고려 사항

  • 패키지 크기가 약간 증가할 수 있습니다
  • Dart의 표현 구문에 대한 이해가 필요합니다
  • 매우 복잡한 상태 관리에 적합하지 않음
  • 간단한 조건 유형에 국한됨
  • 상태 관리 솔루션과 함께 사용하는 것이 가장 좋습니다
  • 깊이 중첩된 위젯 구조에서 과도한 사용을 피하세요

원본 README

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

flutter_conditional_rendering

A flutter package which enhances conditional rendering, supports if-else and switch conditions.

Why

In flutter if you want to do conditional rendering, you may do this:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        if (someCondition == true)
          Text('The condition is true!'),
      ],
    );
  }
}

But what if you want to use a tertiary (if-else) condition?

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        someCondition == true ?
          Text('The condition is true!'):
          Text('The condition is false!'),
      ],
    );
  }
}

It is okay for a single Text widget, but the readability quickly become very bad when the child widget is multi-layered.

Usage

If-Else condition:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Conditional.single(
          context: context,
          conditionBuilder: (BuildContext context) => someCondition == true,
          widgetBuilder: (BuildContext context) => Text('The condition is true!'),
          fallbackBuilder: (BuildContext context) => Text('The condition is false!'),
        ),
      ],
    );
  }
}
Switch condition:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ConditionalSwitch.single<String>(
          context: context,
          valueBuilder: (BuildContext context) => 'A',
          caseBuilders: {
            'A': (BuildContext context) => Text('The value is A!'),
            'B': (BuildContext context) => Text('The value is B!'),
          },
          fallbackBuilder: (BuildContext context) => Text('None of the cases matched!'),
        ),
      ],
    );
  }
}

Want a list of widgets?

If you want to conditionally render a list of widgets (List<Widget>) instead of a single one. Use Conditional.list() and ConditionalSwitch.list()!

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue. If you fixed a bug or implemented a feature, please send a pull request.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.