Is there a way to show a slider under the number stepper widget? - flutter

Question

Is there a way to show a slider under the number stepper widget?
Depending upon the activeStep in the number stepper the slider should be placed under the activeStep.
Any suggestions?
I'm attaching an image of the desired result.
#override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
questionsProgressBarWidth = screenWidth - 80.0;
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 20,
),
TutorialTestTopBar(screenWidth: screenWidth),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: quizQuestionWidget,
),
Spacer(),
],
),
),
);
}
Widget get quizQuestionWidget {
if (quizQuestion == null) {
return const Center(child: CircularProgressIndicator());
}
questions = quizQuestion.questions;
upperBound = questions.length;
for (int i = 1; i <= questions.length; i++) {
numbers.add(i);
}
return SizedBox(
height: MediaQuery.of(context).size.height * 0.85,
child: Column(
children: [
NumberStepper(
stepColor: Colors.white,
activeStepColor: Colors.green,
// activeStepBorderColor: Colors.green,
stepRadius: 15,
direction: Axis.horizontal,
lineColor: Colors.white,
numbers: numbers,
activeStep: activeStep,
onStepReached: (index) {
setState(() {
activeStep = index;
});
},
),
//NEED THE SLIDER HERE
Expanded(
child: PageView.builder(
controller: pageController,
onPageChanged: (value) {
setState(() {
pageChanged = value;
});
},
itemBuilder: (context, index) {
return buildContent(questions[index], index, upperBound);
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
previousButton(),
nextButton(),
],
),
],
),
);
}

Answer 1

You can define a custom border for each item, then update the Color property based on the current question being answered. Full example code:
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,
home: SomeScreen(),
);
}
}
class SomeScreen extends StatefulWidget {
#override
_SomeScreenState createState() => _SomeScreenState();
}
class _SomeScreenState extends State<SomeScreen> {
int _currentQuestion = 0;
List<int> _answered = [];
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List<Widget>.generate(
5,
(index) => _buildItem(index),
),
),
Container(
child: FlatButton(
color: Colors.orange,
onPressed: () {
setState(() {
if (!_answered.contains(_currentQuestion))
_answered.add(_currentQuestion);
if (_currentQuestion < 5) {
_currentQuestion += 1;
}
});
},
child: Text('Answer'),
),
)
],
),
),
),
);
}
Column _buildItem(int index) {
return Column(
children: [
Container(
child: CircleAvatar(
backgroundColor:
_answered.contains(index) ? Colors.green : Colors.transparent,
child: Text(
'${index + 1}',
style: TextStyle(color: Colors.black),
)),
),
Container(
height: 10,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: _currentQuestion == index
? Colors.orange
: Colors.transparent),
)
],
);
}
}
Result:

Answer 2

try this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
List<int> _steps = [1, 2, 3, 4, 5];
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _numberStep(),
),
SizedBox(height: 10),
Stack(children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 50),
width: MediaQuery.of(context).size.width,
height: 20,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _sliderStep(),
),
]),
],
),
);
}
List<Widget> _numberStep() {
List<Widget> _stepList = [];
_steps.forEach((step) {
_stepList.add(
Container(
alignment: Alignment.center,
width: 20,
height: 20,
decoration: BoxDecoration(
color: step < 3? Colors.green: Colors.transparent,
shape: BoxShape.circle,
),
child: Text(step.toString()),
),
);
});
return _stepList;
}
List<Widget> _sliderStep() {
List<Widget> _sliderList = [];
_steps.forEach((step) {
_sliderList.add(
Container(
width: 40,
height: 20,
decoration: BoxDecoration(
color: step == 3? Colors.orange: Colors.transparent,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
),
);
});
return _sliderList;
}
}