Stepper Sample

readme.md

Stepper Sample

Created with <3 with dartpad.dev.

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.green),
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _step = 0;
  var _isCompleted = false;

  void _continueStep() {
    final isLastStep = _step == _getSteps.length - 1;
    if (isLastStep) {
      debugPrint("Stepper Complete");
      setState(() {
        _isCompleted = true;
      });
    } else {
      setState(() {
        _step++;
      });
    }
  }

  void _cancelStep() {
    final isFirstStep = _step == 0;
    if (isFirstStep) {
      // Case Step
      debugPrint("First Stepper");
    } else {
      setState(() {
        _step--;
      });
    }
  }

  void _tapStep(int value) {
    setState(() {
      _step = value;
    });
  }

  StepState _stateStep(int currentStep, int indexStep) {
    if (indexStep > currentStep) return StepState.complete;
    if (indexStep == currentStep) return StepState.editing;
    return StepState.indexed;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isCompleted
          ? const Center(
              child: Text("Completed"),
            )
          : Stepper(
              type: StepperType.horizontal,
              currentStep: _step,
              steps: _getSteps,
              onStepContinue: _continueStep,
              onStepTapped: _tapStep,
              onStepCancel: _cancelStep,
              controlsBuilder: (context, datails) {
                return Container(
                  padding: const EdgeInsets.symmetric(vertical: 15),
                  width: MediaQuery.of(context).size.width,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Expanded(
                        child: ElevatedButton(
                          onPressed: datails.onStepContinue,
                          child: Text((_step == _getSteps.length - 1)
                              ? "Confirmar"
                              : "Continue"),
                        ),
                      ),
                      const SizedBox(width: 15, height: 15),
                      Expanded(
                        child: ElevatedButton(
                          onPressed: datails.onStepCancel,
                          style: ButtonStyle(
                            backgroundColor: MaterialStateColor.resolveWith(
                              (state) {
                                if (_step == 0) {
                                  return Theme.of(context)
                                      .colorScheme
                                      .secondary;
                                }
                                return Theme.of(context).colorScheme.primary;
                              },
                            ),
                          ),
                          child: Text("Voltar", style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
    );
  }

  List<Step> get _getSteps => [
        Step(
          state: _stateStep(0, _step),
          isActive: _step >= 0,
          title: const Text("Personal"),
          content: Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            color: Theme.of(context).colorScheme.secondaryContainer,
            child: Center(
              child: Text(
                "Step 01",
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onSecondaryContainer,
                ),
              ),
            ),
          ),
        ),
        Step(
          state: _stateStep(1, _step),
          isActive: _step >= 1,
          title: const Text("Address"),
          content: Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            color: Theme.of(context).colorScheme.primaryContainer,
            child: Center(
              child: Text(
                "Step 02",
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
              ),
            ),
          ),
        ),
        Step(
          state: _stateStep(2, _step),
          isActive: _step >= 2,
          title: const Text("Finance"),
          content: Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            color: Theme.of(context).colorScheme.tertiaryContainer,
            child: Center(
              child: Text(
                "Step 03",
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onTertiaryContainer,
                ),
              ),
            ),
          ),
        ),
      ];
}