颤振滑块（activeTrackHeight 和 inactiveTrackHeight）答案

【问题标题】：Flutter Slider (activeTrackHeight and inactiveTrackHeight)颤振滑块（activeTrackHeight 和 inactiveTrackHeight）
【发布时间】：2021-02-10 04:52:27
【问题描述】：

为什么 activeTrackHeight 和 inactiveTrackHeight 长度不同？我希望它们的长度相同。如何修复我的代码？请帮忙。

我使用 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),
          valueIndicatorColor: Colors.orange,
          overlayColor: Colors.transparent,
          activeTrackColor: Colors.black,
          activeTickMarkColor: Colors.red,
          inactiveTrackColor: Colors.black,
          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(
              'activeTrackHeight and inactiveTrackHeight',
            ),
            Container(
              width: 140,
              height: 240,
              child: Transform.scale(
                scale: 4.0,
                child: Slider(
                  value: val,
                  min: 0,
                  max: 2,
                  divisions: 2,
                  onChanged: (double value) {
                    setState (() {
                      val = value;
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： android flutter android-studio slider statefulwidget

【解决方案1】：

将trackShape: RectangularSliderTrackShape() 添加到您的SliderThemeData：

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

【讨论】：