Flutter Slider（activeTrackHeight和inactiveTrackHeight）

Question

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

我使用 Android studio 4.0 和 Flutter 1.22.3

我尝试了一些定制的 slider 包并在搜索引擎中搜索解决方案，但找不到。

对不起我糟糕的英语。

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;
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 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'),
    );
  }
}