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

auto_size_widget 표지
패키지 상세v0.0.4

auto_size_widget

위젯의 모서리를 드래그하여 자식 위젯의 크기를 조절할 수 있는 플러터 위젯입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
153
좋아요
38
Pub 점수
130

패키지 설치

flutter pub add auto_size_widget

패키지 개요

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

auto_size_widget 패키지는 자식 요소의 크기를 모서리를 드래그하여 동적으로 조정할 수 있는 Flutter 위젯을 제공하여 직관적인 레이아웃 조정을 가능하게 합니다. 앱 내에서 사용자가 요소를 수동으로 크기 조정해야 하는 인터랙티브 UI용으로 설계되었습니다. Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하여 크로스플랫폼 개발에 유연성을 제공합니다. 기존의 Flutter 레이아웃과 원활하게 통합되며 직접 조작을 통해 사용자 경험을 향상시킵니다.

사용 사례

  • 인터랙티브 UI 디자인
  • 동적 레이아웃 조정
  • 사용자 중심 위젯 크기 조정
  • 크로스 플랫폼 반응형 인터페이스
  • 인터랙티브 레이아웃 프로토타이핑
  • 실시간 UI 사용자 정의

주요 기능

  • 모서리 드래그 리사이즈 기능
  • 크로스 플랫폼 호환성
  • Flutter 위젯과의 간편한 통합
  • 모든 주요 플랫폼을 지원합니다
  • 최소한의 설정 필요
  • 반응형 레이아웃 동작

적합한 대상

  • UI 디자이너가 상호작용 가능한 레이아웃을 프로토타이핑하고 있습니다
  • 사용자 정의 가능한 대시보드를 구축하는 개발자
  • 수동으로 위젯 크기를 조정해야 하는 앱
  • 다이나믹 UI를 갖춘 크로스플랫폼 애플리케이션
  • 상호작용 요소가 있는 교육 또는 창의적 도구

고려 사항

  • 다른 제스처 감지기와 충돌할 수 있습니다
  • 복잡한 자식 요소로 인한 성능 영향
  • 중첩 레이아웃에서 주의 깊게 다뤄야 합니다
  • 정적 또는 읽기 전용 UI에 적합하지 않습니다
  • 추가 로직 없이 단일 자식 크기 조정에 제한
  • 터치 제스처와 관련된 접근성 문제

원본 README

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

Auto Size Widget

A Flutter widget that can resize the child widget by dragging the widget corner.

Installation

  1. Add the latest version of the package to your pubspec.yaml (and run 'dart pub get'):
dependencies:
    auto_size_widget: ^0.0.3
  1. Import the package and use it in your Flutter app.
import 'package:auto_size_widget/auto_size_widget.dart';

Example

  1. To resize both the height and the width of the widget

initialWidth and initialHeight should be different from maxWidth and maxHeight respectively.

AutoSizeWidget(
  initialWidth: 120,
  initialHeight: 120,
  maxWidth: 320,
  maxHeight: 320,
  boxDecoration: BoxDecoration(
    border: Border.all(width: 1, color: Colors.grey),
    borderRadius: BorderRadius.circular(5)),
  child: Image.network(
    'https://docs.flutter.dev/assets/images/dash/early-dash-sketches2.jpg',
    fit: BoxFit.fill,
  ),
),
  1. To resize the height of the widget

initialWidth and maxWidth should be same to ensure that the width does not change on resize.

AutoSizeWidget(
  initialWidth: 250,
  initialHeight: 120,
  maxWidth: 250,
  maxHeight: 280,
  boxDecoration: BoxDecoration(
    border: Border.all(width: 1, color: Colors.grey),
    borderRadius: BorderRadius.circular(5),
  ),
  child: const SelectableText(
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
  ),
),           
  1. To resize the width of the widget

initialHeight and maxHeight should be same to ensure that the height does not change on resize.

AutoSizeWidget(
  initialWidth: 150,
  initialHeight: 200,
  maxWidth: 300,
  maxHeight: 200,
  boxDecoration: BoxDecoration(
    border: Border.all(width: 1, color: Colors.grey),
    borderRadius: BorderRadius.circular(5)),
  child: TextFormField(
    keyboardType: TextInputType.multiline,
    maxLines: 3 * 120,
    textAlign: TextAlign.start,
    decoration: const InputDecoration(
      focusedBorder: InputBorder.none,
      contentPadding:
        EdgeInsets.symmetric(vertical: 11, horizontal: 15),
      hintText: "Enter text here"
    ),
  ),
),                  

카테고리

소스 저장소

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

아직 데이터가 없습니다.