Dynamic height with scrollable for custom length of steps about step-progress-indicator

[kevin4dhd]

any solution?

[SandroMaglione]

Hi @pratikbutani (cc @kevin4dhd)

The height of each step with StepProgressIndicator is computed based on the parent container size. Therefore, if you want the size of the each step to change based on a dynamic value, you should change the height of the container.

Below an example:

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Box(height: 100),
            Box(height: 200),
            Box(height: 300),
            Box(height: 400),
            Box(height: 500),
          ],
        ),
      ),
    );
  }
}

class Box extends StatelessWidget {
  final double height;
  const Box({
    Key? key,
    required this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.black,
          width: 2,
        ),
      ),
      width: 100,
      height: height,
      child: const Indicator(),
    );
  }
}

class Indicator extends StatelessWidget {
  const Indicator({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const StepProgressIndicator(
      totalSteps: 10,
      currentStep: 5,
      size: 20,
      direction: Axis.vertical,
    );
  }
}

---

The principle is the same if your parent container is scrollable:

class ScrollContainerSize extends StatelessWidget {
  const ScrollContainerSize({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          height: 300,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Box(height: 500),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Box extends StatelessWidget {
  final double height;
  const Box({
    Key? key,
    required this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.black,
          width: 2,
        ),
      ),
      width: 100,
      height: height,
      child: const Indicator(),
    );
  }
}

class Indicator extends StatelessWidget {
  const Indicator({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const StepProgressIndicator(
      totalSteps: 10,
      currentStep: 5,
      size: 20,
      direction: Axis.vertical,
    );
  }
}