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

패키지 상세v0.5.0

value_layout_builder

추가 값이 있는 LayoutBuilder입니다. 레이아웃 중에 계산된 값을 사용하여 위젯을 만들고 싶을 때 유용합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
32.6만
좋아요
20
Pub 점수
150

패키지 설치

flutter pub add value_layout_builder

패키지 개요

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

레이아웃 프로세스 중에 추가 값을 제공하는 LayoutBuilder 확장입니다. 위젯이 레이아웃 제약 조건에 동적으로 반응할 수 있도록 하면서도 이러한 제약 조건에서 유도된 계산된 값을 접근할 수 있게 해줍니다. 크기와 사용자 정의 로직을 동시에 고려해야 하는 반응형 디자인에 특히 유용합니다. 이 패키지는 레이아웃 인식과 상태 기반 계산을 결합하여 유연성을 높이며, 치수와 계산된 데이터에 모두 의존하는 복잡한 UI 컴포넌트에 이상적입니다.

사용 사례

  • 계산된 값과 함께 반응형 레이아웃
  • 제약 조건에 기반한 동적 위젯 크기 조정
  • 레이아웃 인식 로직이 필요한 복잡한 UI 컴포넌트
  • 레이아웃 변경과 연결된 사용자 정의 애니메이션
  • 내부 로직을 갖춘 재사용 가능한 레이아웃 위젯 만들기

주요 기능

  • LayoutBuilder를 추가 값과 함께 확장
  • 레이아웃 중에 동적 값 계산을 지원합니다
  • 컨텍스트 인식 로직을 통해 반응형 디자인을 가능하게 함
  • 최소한의 보일러플레이트
  • 모든 플러터 플랫폼에서 작동합니다

적합한 대상

  • 적응형 UI를 구축하는 개발자
  • 레이아웃 컨텍스트가 필요한 UI 컴포넌트 생성자
  • 반응형 및 동적 레이아웃을 필요로 하는 프로젝트
  • 기능적 또는 선언형 UI 패턴을 사용하는 팀

고려 사항

  • Flutter의 레이아웃 단계에 대한 이해가 필요합니다
  • 간단한 레이아웃에 복잡성을 추가할 수 있음
  • 정적 또는 반응형이 아닌 디자인에는 적합하지 않습니다
  • 값 계산이 무거울 경우 성능에 미치는 영향
  • 레이아웃 빌딩 컨텍스트 내에서만 사용 가능

원본 README

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

value_layout_builder

Pub

A LayoutBuilder with an extra value. It's useful when you want to build a widget with a value computed during layout.

Features

  • ValueLayoutBuilder - The RenderBox version.
  • SliverValueLayoutBuilder - The RenderSliver version.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  value_layout_builder:

In your library add the following import:

import 'package:value_layout_builder/value_layout_builder.dart';

For help getting started with Flutter, view the online documentation.

Usage

ValueLayoutBuilder and SliverValueLayoutBuilder will pair with a custom RenderObject which accepts a one of them as a child.

For example it is used in flutter_sticky_header in order to know how much the header is hidden.

The typical usage is to expose a builder in the parameter of your widget's constructor which takes a BuildContext and the value you want to get from layout, and to pass it from your custom RenderObject.

The following code is a dumb example to show you how to use it:

class _Tester<T> extends SingleChildRenderObjectWidget {
  const _Tester({
    Key? key,
    required this.value,
    required Widget child,
  }) : super(key: key, child: child);

  final T value;

  @override
  _RenderTester<T> createRenderObject(BuildContext context) {
    return _RenderTester<T>(value: value);
  }

  @override
  void updateRenderObject(
    BuildContext context,
    _RenderTester<T> renderObject,
  ) {
    renderObject.value = value;
  }
}

class _RenderTester<T> extends RenderBox
    with RenderObjectWithChildMixin<RenderBox> {
  _RenderTester({
    required T value,
  }) : _value = value;

  T get value => _value;
  T _value;
  set value(T value) {
    if (_value != value) {
      _value = value;
      markNeedsLayout();
    }
  }

  @override
  void performLayout() {
    // We create a specific constraints with the value we want to pass to the builder.
    BoxValueConstraints<T> constraints = BoxValueConstraints<T>(
      constraints: this.constraints,
      value: value,
    );
    child.layout(constraints);
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.paintChild(child, offset);
  }
}

We can then use _Tester<T> like this:

_Tester<String>(
  value: 'test',
  child: ValueLayoutBuilder<String>(
    builder: (context, constraints) {
      // The constraints holds the String value.
      final String value = constraints.value;
      return Text(value);
    },
  ),
)

Sponsoring

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.

Changelog

Please see the Changelog page to know what's recently changed.

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.

카테고리

소스 저장소

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