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

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;
  }
}