[英]Is there a way to show a slider under the number stepper widget?
Is there a way to show a slider under the number stepper widget?有没有办法在数字步进小部件下显示 slider?
Depending upon the activeStep
in the number stepper the slider should be placed under the activeStep
.根据数字步进器中的
activeStep
, slider 应放置在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(),
],
),
],
),
);
}
You can define a custom border for each item, then update the Color
property based on the current question being answered.您可以为每个项目定义自定义边框,然后根据正在回答的当前问题更新
Color
属性。 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),
)
],
);
}
}
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.