Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Detalhes do pacotev1.0.1

steps

Plugin Flutter para exibir etapas verticais/horizontais com outros widgets do Flutter no Android e no iOS.

pub.dev Documentação da API Código-fonte
Downloads em 30 dias
53
Curtidas
29
Pontos Pub
30

Instalar pacote

flutter pub add steps

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

O pacote steps é um plugin Flutter projetado para exibir indicadores de etapas verticais ou horizontais, ideal para guiar os usuários por processos com múltiplas etapas, como formulários ou fluxos de onboarding. Suporta integração com qualquer widget Flutter, permitindo conteúdo personalizado em cada etapa. Compatível com Android e iOS, oferece uma interface limpa e personalizável para visualizar o progresso. O pacote é leve e fácil de implementar, sendo adequado para aplicativos que exigem pistas intuitivas de navegação.

Casos de uso

  • Fluxos de onboarding
  • Formulários de múltiplos passos
  • Rastreamento de processo
  • visualização da jornada do usuário
  • Sequências de checkout

Principais recursos

  • Layouts de etapa vertical e horizontal
  • Suporte a widget personalizado
  • Compatibilidade multiplataforma (Android e iOS)
  • Integração simples da API
  • Indicação de progresso

Indicado para

  • Desenvolvedores de aplicativos que precisam de indicadores de etapa
  • Designers que querem interfaces de progresso flexíveis
  • Projetos com interações de usuário em múltiplos estágios

Considerações

  • Sem animações embutidas
  • Personalização limitada além da estilização básica
  • Requer manipulação manual do gerenciamento de estado do passo

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Steps package for Flutter

pub package

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

vertical with rich content

horizontal with rich content

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,
                ),
              }
            ],
          ),
        ));
  }
}

Categorias

Linha do tempo

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.