Counter example

readme.md

Counter example

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(
        primarySwatch: Colors.blue,
      ),
      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;

  void _continueStep() {
    final isLastStep = _step == _getSteps.length - 1;
    if (isLastStep) {
      debugPrint("Stepper Complete");
    } 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: SizedBox(
        child: Stepper(
          type: StepperType.horizontal,
          currentStep: _step,
          steps: _getSteps,
          onStepContinue: _continueStep,
          onStepTapped: _tapStep,
          onStepCancel: _cancelStep,
        ),
      ),
    );
  }

  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: Colors.blue,
            child: const Center(
              child: Text("Step 01"),
            ),
          ),
        ),
        Step(
          state: _stateStep(1, _step),
          isActive: _step >= 1,
          title: const Text("Address"),
          content: Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
            child: const Center(
              child: Text("Step 02"),
            ),
          ),
        ),
        Step(
          state: _stateStep(2, _step),
          isActive: _step >= 2,
          title: const Text("Finance"),
          content: Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            color: Colors.red,
            child: const Center(
              child: Text("Step 03"),
            ),
          ),
        ),
      ];
}