timeline_listダウンロードtimeline_listソースコードのダウンロード

timeline_list

ウェブサイトデータ

1.0.0

ダウンロード

フラッタータイムラインウィジェット

カスタムマーカー、アイコン、柔軟なポジショニングオプションを備えた垂直タイムラインを表示するための高度にカスタマイズ可能なフラッターウィジェット。

フラッタータイムラインリストスクリーンショット

警告

？ドキュメントはLLMSを使用して作成されました。エラーやタイプミスに気付いた場合は、プルリクエストを送信するか、問題を作成してください。

特徴

3つのタイムラインポジション： 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,
        ),
      ),
    ]));