我正在制作一个 Flutter 应用程序,我很好奇如何制作动画滑块来选择一个值。
类似于这个:https://imgur.com/a/vMouzYB 有这个包吗?
我有一个像条形的东西,但不是这样分割的
Expanded(
flex: 8,
child: Row(
children: [
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"01",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Container(
width: 6,
height: MediaQuery.of(context).size.height / 2.6,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(8),
),
child: Stack(
children: [
AnimatedContainer(
height: _indicatorHeight,
decoration: BoxDecoration(
color: Colors.indigoAccent[700],
borderRadius: BorderRadius.circular(8),
),
duration: Duration(milliseconds: 500),
),
],
),
),
),
Text(
"08",
style: TextStyle(
color: Colors.indigoAccent[700],
fontWeight: FontWeight.bold),
),
],
),
),
答案 0 :(得分:0)
为此,您可以使用 Slider / Widget of the Week video
double _currentSliderValue = 20;
return Slider(
value: _currentSliderValue,
min: 0,
max: 100,
divisions: 5,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
);
剩下的唯一问题是旋转,为此您可以将 Slider 包裹在 RotatedBox
RotatedBox(
quarterTurns: 3,
child: YOURSLIVER
)
在您提供的 gif 中,看起来好像您的条子应该在其他一些小部件上。要实现这一点,您可以使用 Stack / Widget of the Week
或者当显示在整个页面的顶部时,您可以使用一个不可见的 ModalBottomSheet / Medium guide