steps

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

steps 套件是一個 Flutter 插件，專為顯示垂直或水平的步驟指示器而設計，非常適合引導使用者完成多階段流程，例如表單或引導流程。它支援與任何 Flutter 小部件整合，並可在每個步驟中加入自訂內容。相容於 Android 與 iOS，提供乾淨且可客製化的介面來視覺化進度。此套件輕量且易於實作，適用於需要直覺導航提示的應用程式。

適用情境

引導流程
多步驟表單
進程追蹤
使用者旅程視覺化
結帳流程

主要特色

垂直與水平步驟佈局
自定義 widget 支援
跨平台相容性（Android & iOS）
簡單 API 結合
進度指示

適合對象

需要步驟指示器的應用開發者
想要靈活進度 UI 的設計師
具有多階段用戶互動的項目

使用建議

無內建動畫
超出基本樣式之外的自訂功能有限
需要手動處理步驟狀態管理

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Steps package for Flutter

Flutter plugin for displaying vertical/horizontal steps with other Flutter widgets on Android and iOS.

Note: This package is still under development. Feedback welcome and Pull Requests are most welcome!

Installation

First, add steps as a dependency in your pubspec.yaml file.

Example

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

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(title: 'Steps'),
    ));

class Home extends StatelessWidget {
  final String title;
  Home({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          alignment: Alignment.topCenter,
          child: Steps(
            direction: Axis.vertical,
            size: 20.0,
            path: {'color': Colors.lightBlue.shade200, 'width': 3.0},
            steps: [
              {
                'color': Colors.white,
                'background': Colors.lightBlue.shade200,
                'label': '1',
                'content': Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Laborum exercitation',
                      style: TextStyle(fontSize: 22.0),
                    ),
                    Text(
                      'Qui et consectetur esse duis excepteur magna consectetur.',
                      style: TextStyle(fontSize: 12.0),
                    ),
                  ],
                ),
              },
              {
                'color': Colors.white,
                'background': Colors.lightBlue.shade700,
                'label': '2',
                'content': Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Laborum exercitation est veniam',
                      style: TextStyle(fontSize: 22.0),
                    ),
                    Image.asset(
                      'assets/cat.jpg',
                      width: 250,
                      height: 120,
                      fit: BoxFit.cover,
                      alignment: Alignment.center,
                    ),
                    Text(
                      '''
Occaecat qui do mollit
Adipisicing reprehenderit deserunt mollit
Quis officia adipisicing aute
                      ''',
                      style: TextStyle(fontSize: 12.0),
                    )
                  ],
                )
              },
              {
                'color': Colors.white,
                'background': Colors.lightBlue.shade200,
                'label': '3',
                'content': Image.asset(
                  'assets/art.jpg',
                  width: 250,
                  height: 120,
                  fit: BoxFit.cover,
                  alignment: Alignment.center,
                ),
              }
            ],
          ),
        ));
  }
}

搜尋套件、儲存庫與 APP 分類

安裝套件