Flutter - Как добавить виджет внутри дорожки виджета Slider

Question

У меня есть простой виджет Slider, и я хочу добавить несколько контейнеров внутри дорожки в разных точках.

Необходимое изображение результата

Текущий код

      Slider(
  max: 500,
  value: _playerValue, 
  onChanged: (double value){
    setState(() {
      _playerValue = value;
    });
  },
),

Answer 1

Я не думаю, что это возможно только с помощью ; или, по крайней мере, мне неизвестно. Однако вы можете добиться этого, используя , с указателями, показанными за полупрозрачной дорожкой ползунка. Демо-фрагмент ниже.

Следует отметить, что контейнер со стопкой маркеров должен иметь горизонтальное поле, такое же, как радиус наложения ползунка; в противном случае контейнер маркера становится шире, чем дорожка.

ВАЖНО: я быстро собрал этот фрагмент только для того, чтобы продемонстрировать возможность отображения маркеров за дорожкой ползунка. Размеры дорожки и маркеры жестко запрограммированы, что, скорее всего, не то, что вам нужно. Я не рекомендую использовать его как есть, а только как руководство.

      import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Slider with Markers',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double sliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Slider With Markers"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SliderTheme(
              data: SliderTheme.of(context).copyWith(
                activeTrackColor: Colors.white60,
                inactiveTrackColor: Colors.white30,
                thumbColor: Colors.white,
                thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10),
                overlayShape: RoundSliderOverlayShape(overlayRadius: 12),
                trackHeight: 12,
              ),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Container(
                    width: double.infinity,
                    margin: const EdgeInsets.symmetric(horizontal: 12),
                    child: Stack(
                      alignment: Alignment.centerLeft,
                      children: <Widget>[
                        marker(left: 15, width: 30),
                        marker(left: 150, width: 50),
                        marker(left: 300, width: 100),
                      ],
                    ),
                  ),
                  Slider(
                    value: sliderValue,
                    min: 0,
                    max: 100,
                    onChanged: ((value) {
                      setState(() {
                        sliderValue = value;
                      });
                    }),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget marker({required double left, required double width}) {
    return Container(
      height: 12,
      width: width,
      margin: EdgeInsets.only(left: left),
      decoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.circular(18),
      ),
    );
  }
}