Implementing "Mobile step progress bar" from the material guidelines - flutter

Question

The material design guidelines used to have a section on steppers: https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps . This included various stepper types, including "Mobile step progress bar":
Flutter has a Stepper class, but very scantily documented. How would I implement the kind of stepper seen above?
There's a request for documentation on Github that touches on this topic, but so far, there aren't any clear guides on how to implement this.

Answer 1

I don't think Flutter's stepper class is the same stepper you're talking about. It's meant for a completely different purpose.
As for your "stepper", it's actually quite simple to make one yourself. I've done it two ways - one with a LinearProgressIndicator and the other with a simple gradient, but you could also do it pretty easily with a custompaint.
I've included it within a PageView example as that seems to be what you're doing with it. Some of the PageView code is cribbed from the flutter gallery pagination example and actually that page would probably be worth looking at as well.
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
PageController _pageController = new PageController(initialPage: 0);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PageView(
children: <Widget>[
Center(child: Text("Page 1")),
Center(child: Text("Page 2")),
Center(child: Text("Page 3")),
Center(child: Text("Page 4")),
],
controller: _pageController,
physics: AlwaysScrollableScrollPhysics(),
),
bottomNavigationBar: Column(
children: <Widget>[
Container(
height: 10,
margin: EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
child: GradientPageIndicator(
pageController: _pageController,
pageCount: 4,
primaryColor: Colors.blue,
secondaryColor: Colors.blue.withOpacity(0.2),
),
),
Container(
height: 10,
margin: EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
child: ProgressPageIndicator(
pageController: _pageController,
pageCount: 4,
primaryColor: Colors.blue,
secondaryColor: Colors.blue.withOpacity(0.2),
),
),
],
mainAxisSize: MainAxisSize.min,
),
),
);
}
}
class ProgressPageIndicator extends AnimatedWidget {
final PageController pageController;
final int pageCount;
final Color primaryColor;
final Color secondaryColor;
final num height;
ProgressPageIndicator({
#required this.pageController,
#required this.pageCount,
#required this.primaryColor,
#required this.secondaryColor,
this.height = 2.0,
}) : super(listenable: pageController);
#override
Widget build(BuildContext context) {
return Container(
height: height,
child: LinearProgressIndicator(
backgroundColor: secondaryColor,
valueColor: Tween(begin: primaryColor, end: primaryColor).animate(kAlwaysCompleteAnimation),
value: (pageController.page ?? pageController.initialPage) / (pageCount - 1),
),
);
}
}
class GradientPageIndicator extends AnimatedWidget {
final PageController pageController;
final int pageCount;
final Color primaryColor;
final Color secondaryColor;
final num height;
GradientPageIndicator({
#required this.pageController,
#required this.pageCount,
#required this.primaryColor,
#required this.secondaryColor,
this.height = 2.0,
}) : super(listenable: pageController);
#override
Widget build(BuildContext context) {
double pagePosition = (pageController.page ?? pageController.initialPage) / (pageCount - 1);
double alignPosition = pagePosition * 2 - 1;
print("PagePosition: $pagePosition, alignPosition: $alignPosition");
return Container(
height: height,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [primaryColor, secondaryColor],
begin: Alignment(alignPosition - 0.0001, 0),
end: Alignment(alignPosition + 0.0001, 0),
),
),
);
}
}