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

refresh_loadmore 표지
패키지 상세v2.0.7

refresh_loadmore

하단으로 당기면 새로 고침하고 상단으로 당기면 더 많은 데이터를 로드하는 기능을 지원하는 Flutter 컴포넌트

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
143
좋아요
27
Pub 점수
160

패키지 설치

flutter pub add refresh_loadmore

패키지 개요

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

리스트에 하단으로 당기면 새로 고침하고 상단으로 당기면 더 많은 항목을 로드하는 인터페이스를 제공하는 플러터 패키지입니다. 스크롤 가능한 콘텐츠에서 사용자 상호작용을 향상시킵니다. Android, iOS, 웹, macOS, Windows, Linux 등 주요 모든 플랫폼에서 부드러운 애니메이션과 사용자 정의 가능한 새로 고침/로드 상태를 지원합니다. 뉴스, 소셜 미디어 타임라인, 제품 목록과 같은 동적 데이터 피드 구현에 적합합니다. 컴포넌트는 가볍고 ListView 및 기타 스크롤 가능한 위젯과 원활하게 통합됩니다.

사용 사례

  • 동적 목록 업데이트
  • 소셜 미디어 피드 로딩 중
  • 전자상거래 제품 페이징
  • 실시간 데이터 동기화
  • 무한 스크롤 인터페이스

주요 기능

  • 하단으로 당겨 새로 고침 제스처
  • 위로 당겨서 더 불러오기 제스처
  • 사용자 지정 가능한 새로 고침 표시기
  • 크로스 플랫폼 호환성
  • 부드러운 애니메이션 전환
  • 사용자 정의 가능한 로딩 상태

적합한 대상

  • 데이터 중심 앱을 개발하는 개발자
  • 무한 스크롤이 필요한 앱
  • 일관된 UI 패턴이 필요한 팀
  • 다중 플랫폼을 대상으로 하는 프로젝트
  • 최소한의 보일러플레이트를 원하는 사용자

고려 사항

  • 스크롤 가능한 위젯과의 통합이 필요합니다
  • 복잡한 UI의 경우 사용자 정의 스타일링이 필요할 수 있습니다
  • 성능은 데이터 소스의 효율성에 따라 달라집니다
  • 정적 콘텐츠에 적합하지 않습니다
  • 제한된 내장 오류 처리

원본 README

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

refresh_loadmore

A Flutter component that supports pull-down refresh and pull-up to load more data (一个组件,支持下拉刷新,上拉加载更多数据).

Getting Started

Add this line to pubspec.yaml ( 添加这一行到pubspec.yaml)

dependencies:
     refresh_loadmore: ^2.0.7

How To Use

Use the class RefreshLoadmore

Properties and functions:

  /// Callback function on pull down to refresh | 下拉刷新时的回调函数
  final Future<void> Function()? onRefresh;

  /// Callback function on pull up to load more data | 上拉以加载更多数据的回调函数
  final Future<void> Function()? onLoadmore;

  /// Whether it is the last page, if it is true, you can not load more | 是否为最后一页,如果为true,则无法加载更多
  final bool isLastPage;

  /// Child widget | 子组件
  final Widget child;

  /// Prompt text widget when there is no more data at the bottom | 底部没有更多数据时的提示文字组件
  final Widget? noMoreWidget;

  /// Prompt widget when loading new data at the bottom | 正在加载数据时的提示组件
  final Widget? loadingWidget;

  /// Prompt padding for body if needed | 你可以自定义padding
  final EdgeInsetsGeometry? padding;

  /// You can use your custom scrollController, or not | 你可以使用自定义的 ScrollController,或者不使用
  final ScrollController? scrollController;

Examples

import 'package:flutter/material.dart';
import 'package:refresh_loadmore/refresh_loadmore.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// is the last page | 是否为最后一页
  bool isLastPage = false;

  List? list;
  int page = 1;

  @override
  void initState() {
    super.initState();
    loadFirstData();
  }

  Future<void> loadFirstData() async {
    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        list = [
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg',
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg',
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg'
              'adsgafg',
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg'
        ];
        isLastPage = false;
        page = 1;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: list != null
          ? RefreshLoadmore(
              onRefresh: loadFirstData,
              onLoadmore: () async {
                await Future.delayed(Duration(seconds: 1), () {
                  setState(() {
                    list!.addAll(['123', '234', '457']);
                    page++;
                  });
                  print(page);
                  if (page >= 3) {
                    setState(() {
                      isLastPage = true;
                    });
                  }
                });
              },
              noMoreWidget: Text(
                'No more data, you are at the end',
                style: TextStyle(
                  fontSize: 18,
                  color: Theme.of(context).disabledColor,
                ),
              ),
              isLastPage: isLastPage,
              child: list!.isNotEmpty
                  ? Column(
                      children: list!
                          .map(
                            (e) => ListTile(
                              title: Text(e),
                              trailing: Icon(Icons.accessibility_new),
                            ),
                          )
                          .toList(),
                    )
                  : Center(
                      child: Text('empty'),
                    ),
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}



Renderings

images images images

카테고리

의존성

의존성 목록 1 개

소스 저장소

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

아직 데이터가 없습니다.