Flutter Slider (activeTrackHeight and inactiveTrackHeight)

Question

Flutter Slider

Why activeTrackHeight and inactiveTrackHeight length are different ? I hope they are the same length. How do I fix my code ? please help.

I use Android studio 4.0 and Flutter 1.22.3

I tried some custom slider packages and searched for solutions in search engines, but couldn't find one.

sorry my poor English.

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

score 0 · Accepted Answer · answered Feb 10 '21 at 05:19

Add trackShape: RectangularSliderTrackShape() to your 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'),
    );
  }
}

Flutter Slider (activeTrackHeight and inactiveTrackHeight)

1 Answers1