如何在 Flutter 中使滑块更长？答案

【问题标题】：How to make slider longer in Flutter?如何在 Flutter 中使滑块更长？
【发布时间】：2021-04-11 04:00:26
【问题描述】：

我制作了滑块，但希望它更长。我也尝试过更改 mainAxisAlignment 但没有结果。请帮我解决这个问题，我想要一个至少为容器宽度一半的滑块

 Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('AGE',style: xcontainer_text_style,),
            Row(
              children: [
                SizedBox(width: 20.0,),
                Expanded(
                  child: SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0),
                        thumbColor: Colors.redAccent[400],
                        overlayColor: Color(0x29ff0116),
                        overlayShape: RoundSliderOverlayShape(overlayRadius: 20.0),
                        activeTrackColor: Colors.white,
                        inactiveTrackColor: Colors.grey[500],
                        trackHeight: 3.0,
                    ),
                    child: Slider(
                      value: age.toDouble(),
                      min: 1.0,
                      max: 100.0,
                      onChanged: (double newValue){
                        setState(() {
                          age = newValue.round();
                        });
                      },
                    ),
                  ),
                ),
                SizedBox(width: 10.0,),

                Expanded(
                  child: Container(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.baseline ,
                      textBaseline: TextBaseline.alphabetic,
                      children: [
                        Text(age.toString(),style: xhieght_container_text_style ),
                        Text('', style: xhieght_container_unit_text_style,)
                      ],
                    ),
                  ),
                )
              ],
            )
          ],
        ),

这就是它的样子--

this is how my app is currently looking

【问题讨论】：

标签： flutter user-interface frontend

【解决方案1】：

将Flex 值添加到您的Expanded 小部件SliderTheme

          Expanded(
            flex: 2,  //increase or decrease this value to change the length of the slider
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(

更多关于Flex小部件Read HERE

更多关于Expanded 小部件Read HERE

【讨论】：