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 分类

安装插件