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

ensure_visible_when_focused 표지
패키지 상세v1.2.0

ensure_visible_when_focused

이 위젯이 포커스를 얻을 때마다 특정 위젯으로 스크롤하는 편리한 Flutter 위젯입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
1.6만
좋아요
53
Pub 점수
160

패키지 설치

flutter pub add ensure_visible_when_focused

패키지 개요

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

특정 위젯이 포커스를 얻을 때 뷰포트를 자동으로 스크롤하여 해당 위젯이 보이도록 하는 플러터 위젯입니다. 긴 콘텐츠를 가진 폼에 이상적이며, 입력 필드가 키보드에 의해 가려지는 것을 방지함으로써 사용성을 향상시킵니다. 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼에서 작동하며 원활한 사용자 경험을 제공합니다. 복잡한 스크롤 로직 없이 기존 폼 레이아웃에 쉽게 통합할 수 있습니다.

사용 사례

  • 모바일 장치에서의 폼 입력
  • 긴 양식에서 포커스된 필드로 스크롤하기
  • 웹 및 데스크톱 앱의 접근성 향상
  • iOS 및 Android에서 키보드 겹침 방지
  • 동적 폼 요소의 가시성 보장
  • 다중 플랫폼 애플리케이션에서 UX 향상

주요 기능

  • 포커스 시 자동 스크롤
  • 크로스 플랫폼 호환성
  • 필요한 설정 최소화
  • 모든 스크롤 가능한 컨테이너와 호환됩니다
  • 추가 종속성 없음
  • 중첩 스크롤 뷰를 지원합니다

적합한 대상

  • 접근성 있는 폼을 개발하는 개발자
  • 긴 또는 동적 폼을 가진 앱
  • 다중 플랫폼 Flutter 프로젝트
  • 사용자 경험을 우선시하는 팀
  • 최소한의 보일러플레이트를 필요로 하는 프로젝트
  • 키보드 상호작용이 있는 폼

고려 사항

  • 사용자 정의 스크롤 동작에 영향을 줄 수 있습니다
  • 적절한 부모 스크롤 컨텍스트가 필요합니다
  • 스크롤되지 않는 레이아웃에는 적합하지 않습니다
  • 과도하게 사용할 경우 레이아웃 지연을 유발할 수 있습니다
  • 제한된 사용자 정의 옵션
  • 명시적 포커스 관리와 함께 사용하는 것이 가장 좋습니다

원본 README

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

Buy Me A Coffee

Introduction

I was having a hard time scrolling to a specific wdget in a scenario where I had a very large form, with lots of form fields.

I found an issue with no concrete answer https://github.com/flutter/flutter/issues/58877

After digging a litlle deeper I found a solution to this problem https://www.didierboelens.com/2018/04/hint-4 -ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/. Hence the idea of ​​creating and making this widget available.

This widget solves this problem in a very elegant way. You just have to give the same FocusNode of the widget you want to scroll to.

Basic Usage

The widget is very simple to use. You need to Wrap your widget on a EnsureVisibleWhenFocused widget. You have to pass the FocusNode of the widget you want to scroll to when it's given focus.

EnsureVisibleWhenFocused(
    focusNode: _focusNode,
    child: TextFormField(
        focusNode: _focusNode,
    ),
)

With the setup above, every time the TextFormField gains focus, a scroll will be made to it.

You can give focus to a field just doing:

_focusNode.requestFocus();

You can configure more things, such as the scroll duration and it's curve.

enter image description here

Suggestions & Bugs

For any suggestions or bug report please head to issue tracker.

카테고리

소스 저장소

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

아직 데이터가 없습니다.