timeline_list 다운로드 - timeline_list 소스 코드 다운로드

timeline_list

웹사이트 데이터

1.0.0

다운로드

플러터 타임 라인 위젯

사용자 정의 마커, 아이콘 및 유연한 위치 옵션이있는 수직 타임 라인을 표시하기위한 고도로 사용자 정의 가능한 플러터 위젯.

플러터 타임 라인 목록 스크린 샷

경고

? 문서는 LLM을 사용하여 작성되었습니다. 오류 또는 오타가 표시되면 풀 요청을 제출하거나 문제를 만듭니다.

특징

세 가지 타임 라인 위치 : start (왼쪽), center 또는 end (오른쪽)
? 컨텐츠 또는 아이콘으로 위젯이있는 완전히 사용자 정의 가능한 마커
? 유연한 아이콘 정렬 : 마커의 top , center 또는 bottom
중앙 타임 라인에 대한 개별 마커 위치
역전 된 타임 라인 순서 지원
사용자 정의 스크롤 물리 및 컨트롤러 지원

설치

패키지의 pubspec.yaml 파일에 이것을 추가하십시오.

 dependencies :
  timeline_list : ^0.1.0

용법

간단한 타임 라인

플러터 단순 타임 라인 목록 스크린 샷

 import 'package:timeline_list/timeline_list.dart' ;

Timeline (
  children : [
    Marker (child : Text ( "Step 1" )),
    Marker (child : Text ( "Step 2" )),
    Marker (child : Text ( "Step 3" ))
  ],
)

온 보딩 예제

다음은 사용자 정의 아이콘이있는 온 보딩 타임 라인을 보여주는 고급 예입니다.

플러터 온 보딩 타임 라인 목록 스크린 샷

 var checkIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .green),
    child : Icon ( Icons .check, color : Colors .white, size : 12 ));
var emptyIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .grey));
return Scaffold (
    appBar : AppBar (title : const Text ( "Onboarding example" )),
    body : Column (children : [
      Timeline . builder (
        context : context,
        markerCount : 10 ,
        properties : TimelineProperties (
            iconAlignment : MarkerIconAlignment .center,
            iconSize : 16 ,
            timelinePosition : TimelinePosition .start),
        markerBuilder : (context, index) => Marker (
          child : Padding (
            padding : const EdgeInsets . all ( 8.0 ),
            child : Text ( "Step ${ index + 1 }" ),
          ),
          icon : index >= 8 ? emptyIcon : checkIcon,
          position : MarkerPosition .left,
        ),
      ),
    ]));