Flutter Slider 阴影（如何禁用，如何改变方向）答案

【问题标题】：Flutter Slider shadow (How to disable , How to change the direction)Flutter Slider 阴影（如何禁用，如何改变方向）
【发布时间】：2021-02-23 16:27:08
【问题描述】：

snapshot with Slider widget

第一季度。我想知道如何禁用拇指阴影。

第二季度。我想知道如何改变拇指阴影的方向。我想将方向设置为 RIGHT（而不是 DOWN）。

请帮助我。我使用 Android Studio 4.0 和 Flutter 1.22.3。

我用谷歌搜索了一些带有“颤动滑块拇指阴影”一词的代码但我找不到任何答案。


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        sliderTheme: SliderThemeData(
          trackHeight: 14,
          thumbColor: Colors.white,
          thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
          trackShape: RectangularSliderTrackShape(),
          valueIndicatorColor: Colors.orange,
          overlayColor: Colors.transparent,
          activeTrackColor: Colors.green,
          activeTickMarkColor: Colors.red,
          inactiveTrackColor: Colors.green,
          inactiveTickMarkColor: Colors.grey,
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double val=1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Q1. Shadow off \n Q2. How to change Shadow direction',
            ),
            Container(
              width: 140,
              height: 240,
              child: Transform.scale(
                scale: 3.0,
                child: Slider(
                  value: val,
                  min: 0,
                  max: 2,
                  divisions: 2,
                  onChanged: (double value) {
                    setState (() {
                      val = value;
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter slider

【解决方案1】：

您必须在 thumbShape 属性上设置高程，例如：

Widget build(BuildContext context) {
        return SliderTheme(
          data: const SliderThemeData(               
               thumbShape: RoundSliderThumbShape(elevation: 0),
          ),
          child: Slider(),

【讨论】：

【解决方案2】：

您需要通过以下方式使叠加层透明：

    SliderTheme(
           data: SliderThemeData(
        
           overlayColor: Colors.transparent,
      ),
      child: Slider( ../))

【讨论】：