step-progress-indicator
step-progress-indicator copied to clipboard
Dynamic height with scrollable for custom length of steps
I am using verticle StepProgressIndicator and I want to give dynamic height to it because I am generating steps based on the length of API.
Is there any way to give height dynamically with a scrollable list of indicators?
any solution?
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,
);
}
}
![Screenshot 2022-01-02 at 15 31 49](https://user-images.githubusercontent.com/10065056/147879051-3ae5c3e3-85f6-4e10-9ad0-2e859345dd4a.png)
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,
);
}
}
![Screenshot 2022-01-02 at 15 37 19](https://user-images.githubusercontent.com/10065056/147879210-8261faff-f81e-48a4-9358-b1e3beae4999.png)