flutter - 有没有办法在数字步进器小部件下显示滑块？

Question

有没有办法在数字步进器小部件下显示滑块？

根据activeStep数字步进器中的 ，滑块应放置在activeStep.

有什么建议么？

我附上了所需结果的图像。

    @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

尝试这个：

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

Answer 2

您可以为每个项目定义自定义边框，然后Color根据正在回答的当前问题更新属性。完整示例代码：

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),
        )
      ],
    );
  }
}

结果：