[Flutter] Pull To Refresh

목적

Pull To Refresh 구현전 자료를 찾아보고 문서화

내용

공식문서

RefreshIndicator class (Null safety)

A widget that supports the Material "swipe to refresh" idiom.
"새로고침을 위한 스와이프"를 지원하는 위젯이다

When the child's Scrollable descendant overscrolls, an animated circular progress indicator is faded into view. When the scroll ends, if the indicator has been dragged far enough for it to become completely opaque, the onRefresh callback is called. The callback is expected to update the scrollable's contents and then complete the Future it returns. The refresh indicator disappears after the callback's Future has completed.
스크롤할 수 있는 자식들이 오버스크롤 되었을때, 원형 프로그래스바는 뷰에 나타나 움직인다. 스크롤이 끝났을때 만약 인디케이터가 충분히 완전한 공간을 차지하게 드래그 되었을때 onRefresh 콜백함수는 Call 된다. 콜백함수는 스크롤할 수 있는 컨텐츠들을 새로고침할것이고, Future를 리턴할것이다. 새로고침 인디케이터는 콜백함수의 Future가 완료되었을때 사라진다.

The trigger mode is configured by RefreshIndicator.triggerMode.
트리거 모드는 RefreshIndicator.triggerMode를 활용하여 설정할수 있다.

Troubleshooting
Refresh indicator does not show up
The RefreshIndicator will appear if its scrollable descendant can be overscrolled, i.e. if the scrollable's content is bigger than its viewport. To ensure that the RefreshIndicator will always appear, even if the scrollable's content fits within its viewport, set the scrollable's Scrollable.physics property to AlwaysScrollableScrollPhysics:
트러블 슈팅
새로고침 인디케이터가 보여지지 않을때
RefreshIndicator는 나타날것이다.RefreshIndicator의 스크롤할수있는 자식들이 오버스크롤 되었다면
만약 스크롤 가능한 자식들의 콘텐츠가 뷰포트보다 크다면 RefreshIndicator는 항상 나타날것을 보장한다. 설사 스크롤 가능한 자식들의 콘텐츠가 뷰포트 안에 딱 맞을지라도, 스크롤 가능한 자식들의 Scrollable.physics속성을 AlwaysScrollableScrollPhysics:를 활용하여 설정해라.

i.e : 이 약어는 앞에서 언급한 것을 지정하려는 경우에 사용됩니다.(~이다)

ListView(
  physics: const AlwaysScrollableScrollPhysics(),
  children: ...
)

A RefreshIndicator can only be used with a vertical scroll view.
새로고침 인디케이터는 수직 스크롤 뷰랑만 사용할 수 있다.

See also:

• material.io/design/platform-guidance/android-swipe-to-refresh.html

1. 다음 상황에서는 스와이프하여 새로 고침을 사용해서는 안 됩니다.
   탐색 서랍
   홈 화면 위젯
   이동 가능한 콘텐츠
2. 새로 고침 표시기는 새로 고침 활동의 상태를 숨기므로 화면 밖으로 스크롤하지 마십시오. 새로 고침 활동이 전체 화면 대신 카드와 같은 특정 구성 요소와 연결되어 있음을 의미할 수 있습니다.
3. 새로 고침 콘텐츠 위에 새로 고침 표시기를 수평으로 중앙에 놓습니다.
4. 콘텐츠를 방해할 수 있는 위치에 새로 고침 표시기를 수직으로 배치하지 마십시오.

• RefreshIndicatorState, can be used to programmatically show the refresh indicator.
  Refresh Indicator State를 사용하여 프로그래밍 방식으로 새로 고침 표시기를 표시할 수 있습니다.
• RefreshProgressIndicator, widget used by RefreshIndicator to show the inner circular progress spinner during refreshes.
  RefreshIndicator에 의해 사용되는 RefreshProgressIndicator 위젯은 새로고침 되는 동안 내부 원형 프로그래스 스피너를 보여준다.
• CupertinoSliverRefreshControl, an iOS equivalent of the pull-to-refresh pattern. Must be used as a sliver inside a CustomScrollView instead of wrapping around a ScrollView because it's a part of the scrollable instead of being overlaid on top of it.
  CupertinoSliverRefreshControl는 IOS의 pull-to-refresh pattern과 동일하다.

Inheritance

Object >>> DiagnosticableTree >>> Widget >>> StatefulWidget >>> RefreshIndicator

Constructors ...

RefreshIndicator({
    Key? key, 
    required Widget child, 
    double displacement, 
    double edgeOffset, 
    required RefreshCallback onRefresh, 
    Color? color, 
    Color? backgroundColor, 
    ScrollNotificationPredicate notificationPredicate, 
    String? semanticsLabel, 
    String? semanticsValue, 
    double strokeWidth, 
    RefreshIndicatorTriggerMode triggerMode
})
Creates a refresh indicator.

Properties

• backgroundColor → Color?
  The progress indicator's background color. The current theme's ThemeData.canvasColor by default.

• final
  child → Widget
  The widget below this widget in the tree.

• final
  color → Color?
  The progress indicator's foreground color. The current theme's ColorScheme.primary by default.

• final
  displacement → double
  The distance from the child's top or bottom edgeOffset where the refresh indicator will settle. During the drag that exposes the refresh indicator, its actual displacement may significantly exceed this value.
  자식의 탑, 또는 바텀으로부터 새로고침 지시자가 어디에 설정될것인가에 대한 edgeOffset 거리

• final
  edgeOffset → double
  The offset where RefreshProgressIndicator starts to appear on drag start.
  어디에 RefreshProgressIndicator가 나타나기 시작할것인가에 대한 Offset

• final
  hashCode → int
  The hash code for this object. [...]
  @nonVirtual, read-only, inherited

• key → Key?
  Controls how one widget replaces another widget in the tree. [...]
  final, inherited

• notificationPredicate → ScrollNotificationPredicate
  A check that specifies whether a ScrollNotification should be handled by this widget.
  ScrollNotification이 해당 위젯에서 핸들링 되어야하는지 아닌지 명시
  By default, checks whether notification.depth == 0.
  디폴트는 다음과 같다

• final
  onRefresh → RefreshCallback
  A function that's called when the user has dragged the refresh indicator far enough to demonstrate that they want the app to refresh. The returned Future must complete when the refresh operation is finished.
  새로고침 했을때 사용되는 함수.

• final
  runtimeType → Type
  A representation of the runtime type of the object.
  read-only, inherited
  런티임시간에 객체의 타입을 표현

• semanticsLabel → String?
  The SemanticsProperties.label for this progress indicator.
  진행 표시기, null인 경우 MaterialLocalizations.refreshIndicatorSemanticLabel 로 기본 설정됩니다 .

• final
  semanticsValue → String?
  The SemanticsProperties.value for this progress indicator.
  이것은 위젯을 식별하기 위해 화면 읽기 소프트웨어에 의해 semanticsLabel 과 함께 사용되며 , 주로 진행률 표시기와 함께 사용하여 얼마나 멀리 있는지 알려줍니다.
  확정 진행률 표시기의 경우 기본적으로 ProgressIndicator.value 가 백분율로 표시됩니다. 즉, 0.1'10%'가 됩니다.
  이 속성은 iOS 환경 내의 적응 생성자에서 사용되는 경우 무시됩니다.

• final
  strokeWidth → double
  Defines strokeWidth for RefreshIndicator.

• final
  triggerMode → RefreshIndicatorTriggerMode
  Defines how this RefreshIndicator can be triggered when users overscroll.

• final

Methods

• createElement() → StatefulElement
  Creates a StatefulElement to manage this widget's location in the tree. [...]
  stf엘리먼트를 만들고 트리에서 해당 위젯의 위치를 관리한다.

• inherited
  createState() → RefreshIndicatorState
  Creates the mutable state for this widget at a given location in the tree.
  트리안에 주어진 위치에 위젯을 위한 변할수 있는 상태를 만든다.

• override
  debugDescribeChildren() → List<DiagnosticsNode>
  Returns a list of DiagnosticsNode objects describing this node's children.
  해당 노드의 자식들을 묘사하는 DiagnosticsNode 객체들의 리스트를 리턴한다.
  @protected, inherited

• debugFillProperties(DiagnosticPropertiesBuilder properties) → void
  Add additional properties associated with the node.
  노드와 관련된 추가적인 속성을 더한다.

• inherited
  noSuchMethod(Invocation invocation) → dynamic
  Invoked when a non-existent method or property is accessed.
  존재하지 않는 메서드 또는 속성에 관련되었을때 호출(적용)됩니다.

• inherited
  toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
  Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
  객체의 디버그 표현을 리턴한다. 객체는 디버깅 툴과 DiagnosticsNode.toStringDeep에 의해 사용되어진다.

• inherited
  toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
  A string representation of this object.

• inherited
  toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
  Returns a string representation of this node and its descendants.
  자식, 본인의 스트링 표현을 리턴

• inherited
  toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
  Returns a one-line detailed description of the object.
  객체의 상세한 표현을 1줄로 리턴

• inherited
  toStringShort() → String
  A short, textual description of this widget.
  이 위젯의 설명을 짧게 한줄로 리턴

• inherited

Operators

• operator ==(Object other) → bool
  The equality operator.
  @nonVirtual, inherited
  비교 연산자

결론

문서화를 하면서 차근차근 읽어보았다.
문서에서 사용된 어노테이션이나 debugDescribeChildren같은 경우 나중에 여유될때 찾아보자.