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

animation_list 표지
패키지 상세v3.1.0

animation_list

간단한 애니메이션 리스트뷰 위젯을 포함한 플러터 패키지 프로젝트입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
1.2천
좋아요
76
Pub 점수
150

패키지 설치

flutter pub add animation_list

패키지 개요

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

화면에 나타날 때 리스트 항목에 부드러운 진입 애니메이션을 제공하는 간단한 애니메이티드 ListView 위젯을 제공하는 플러터 패키지입니다. 리스트 렌더링 중 미세한 시각적 피드백을 통해 사용자 경험을 향상시키고자 하는 개발자를 위한 것입니다. Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하여 크로스플랫폼 애플리케이션에 유용합니다. pub add 명령어를 통해 쉽게 통합되며 성능과 단순성에 중점을 두고 제작되었습니다.

사용 사례

  • 동적 목록에 진입 애니메이션 추가하기
  • 스크롤 가능한 콘텐츠에서 UI 참여도 향상
  • 시각적으로 매력적인 온보딩 화면 만들기
  • 데이터 집약적 인터페이스에서 사용자 피드백 개선

주요 기능

  • 부드러운 항목 등장 애니메이션
  • 크로스 플랫폼 호환성
  • pub와의 간단한 통합
  • 경량이며 성능이 뛰어남
  • 사용자 정의 가능한 애니메이션 타이밍
  • 표준 ListView 기능을 지원합니다

적합한 대상

  • 시각적 완성도를 추구하는 UI 디자이너
  • 인터랙티브 리스트를 구축하는 개발자
  • 매력적인 스크롤 효과가 필요한 앱
  • 다중 플랫폼을 대상으로 하는 프로젝트

고려 사항

  • 매우 큰 목록에서는 성능에 영향을 줄 수 있습니다
  • 기본 애니메이션을 넘어서는 사용자 정의 기능은 제한적입니다
  • Flutter의 애니메이션 프레임워크에 의존합니다
  • 복잡한 전이 로직에 적합하지 않음

원본 README

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

Animation List

A simple animation listview widget.
When it is built, list item is shown by sliding and bouncing.

⚙ Preview


⚡ Installation

Add animation_list: ^3.1.0 to your pubspec.yaml dependecies. And import it:

import 'package:animation_list/animation_list.dart';

ℹ️ How to use

Simply add a Animation List widget with required params.

final List<Map<String, dynamic>> data = [
    {
      'title': '1111',
      'backgroundColor': Colors.grey,
    },
    {
      'title': '2222',
      'backgroundColor': Colors.red,
    },
    {
      'title': '3333',
      'backgroundColor': Colors.yellow,
    },
    {
      'title': '4444',
      'backgroundColor': Colors.blue,
    },
    {
      'title': '5555',
      'backgroundColor': Colors.green,
    },
    {
      'title': '6666',
      'backgroundColor': Colors.orange,
    },
    {
      'title': '7777',
      'backgroundColor': Colors.brown,
    },
    {
      'title': '8888',
      'backgroundColor': Colors.purple,
    },
  ];

  Widget _buildTile(String title, Color backgroundColor) {
    return Container(
        height: 100,
        margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(25)),
          color: backgroundColor,
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimationList(
            animationDirection: AnimationDirection.horizontal,
            duration: 1000,
            reBounceDepth: 10.0,
            children: data.map((item) {
              return _buildTile(item['title'], item['backgroundColor']);
            }).toList()),
      ),
    );
  }

🔧 Properties

Attribute Data type Description Default
key Key Controls how one widget replaces another widget in the tree -
controller ScrollController An object that can be used to control the position to which this scroll view is scrolled -
primary bool Whether this is the primary scroll view associated with the parent PrimaryScrollController -
physics ScrollPhysics How the scroll view should respond to user input -
shrinkWrap bool Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed false
padding EdgeInsetsGeometry The amount of space by which to inset the children -
cacheExtent double The viewport has an area before and after the visible area to cache items that are about to become visible when the user scrolls -
children List The children are required to fill the ListView []
semanticChildCount int The number of children that will contribute semantic information -
dragStartBehavior DragStartBehavior Determines the way that drag start behavior is handled DragStartBehavior.start
keyboardDismissBehavior Key ScrollViewKeyboardDismissBehavior the defines how this ScrollView will dismiss the keyboard automatically ScrollViewKeyboardDismissBehavior.manual
restorationId String Restoration ID to save and restore the scroll offset of the scrollable -
clipBehavior Clip The content will be clipped (or not) according to this option Clip.hardEdge
duration int The milliseconds the animation runs 1300
reBounceDepth double A value of bounce depth 10.0
opacityRange Tween A Tween value of opacity animation range Tween(begin: 0.3, end: 1.0)
animationDirection AnimationDirection A animation direction(vertical / horizontal / both) AnimationDirection.vertical

🤗 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

🙋‍♂️ Support

💙 If you like this project, give it a ⭐ and share it with friends!

buymeacoffee-violet-badge

카테고리

소스 저장소

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

아직 데이터가 없습니다.