如何在Flutter中制作半圆形滑块。

Question

如何在Flutter中制作半圆形滑块。

flutterdartflutter-layout

5

我是Flutter的新手，正在开发一款音乐应用。我想要一个半圆（180度）或更大的半圆（180度-240度）滑块，用于增加或减少音量。

参考图像

注意：

- Sumit

1

好的，看起来很不错。您需要帮助解决什么具体问题？ - nvoigt

@nvoigt 我想为我的应用程序制作一个与上面图片类似的滑块。并且通过移动滑块来增加或减少音量。我不知道如何制作这样的滑块。 - Sumit

4

那么您需要阅读一本好书或有关该主题的指南。本网站是用于询问“具体”问题的。“具体”问题是指特定的问题。如果您还无法明确您的问题，因为您根本不知道如何做，那么您需要从更广泛的角度开始。例如，一本书或教程。 - nvoigt

我不知道如何做到这一点，但你需要自定义绘制它或找到一个已经提供这样滑块的包。 - Arsh Shaikh

@nvoigt 我已经实现了水平的增减音量滑块，但我想让它看起来像上面的图片。我可以使用我当前项目中使用的同样一个滑块吗，还是我需要实现不同的滑块？ - Sumit

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tanuj · Accepted Answer

您可以从 pub.dev 使用 sleek_circular_slider。

请将其添加到 pubspec.yaml 的依赖项中。

dependencies:
    sleek_circular_slider : ^1.1.0

运行 flutter packages get 命令以获取依赖。

将其导入到您的项目文件中。

import 'package:sleek_circular_slider/sleek_circular_slider.dart';

然后，您可以像这样创建滑块 -

        final SleekCircularSlider(
            min: 0,
            max: 100,
            initialValue: 0,
            onChange: (double value) {
              // callback providing a value while its being changed (with a pan gesture)
            },
            onChangeStart: (double startValue) {
              // callback providing a starting value (when a pan gesture starts)
            },
            onChangeEnd: (double endValue) {
              // callback providing an ending value (when a pan gesture ends)
            },
            innerWidget: (double value) {
              //This the widget that will show current value
              return Center(child: Text("${value.toInt().toString()} %", style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w200),));
            },
          ),

这将创建类似于这样的东西 -

您可以在这里阅读更多的自定义选项。