Flutter 中的滑块开关

发布于 2025-01-14 23:13:24 字数 1196 浏览 0 评论 0原文

我想制作一个像这样的滑动开关

，我也通过 CupertinoSlidingSegmentedControl() 做到了，但它不符合我的要求。我想要一个类似的滑块开关。

我是这样弄的

Neumorphic(
              style: NeumorphicStyle(
                  depth: NeumorphicTheme.embossDepth(context),
                  boxShape: const NeumorphicBoxShape.stadium(),
                  intensity: 1),
              child: ToggleSwitch(
                minWidth: 120.0,
                minHeight: 70,
                cornerRadius: 50.0,
                activeBgColors: const [
                  [Colors.cyan],
                  [Colors.cyan]
                ],
                inactiveBgColor: Colors.grey[200],
                inactiveFgColor: Colors.grey,
                totalSwitches: 2,
                labels: ['Agency', 'Freelancer'],
                radiusStyle: true,
                onToggle: (index) {},
              ),
            
            ),

原文

I want to make a sliding switch like this

and I also made it through CupertinoSlidingSegmentedControl() but it is not meeting my requirements. I would like a similar slider switch.

I've made like this.

Neumorphic(
              style: NeumorphicStyle(
                  depth: NeumorphicTheme.embossDepth(context),
                  boxShape: const NeumorphicBoxShape.stadium(),
                  intensity: 1),
              child: ToggleSwitch(
                minWidth: 120.0,
                minHeight: 70,
                cornerRadius: 50.0,
                activeBgColors: const [
                  [Colors.cyan],
                  [Colors.cyan]
                ],
                inactiveBgColor: Colors.grey[200],
                inactiveFgColor: Colors.grey,
                totalSwitches: 2,
                labels: ['Agency', 'Freelancer'],
                radiusStyle: true,
                onToggle: (index) {},
              ),
            
            ),

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟─花易冷 2025-01-21 23:13:25

你可以使用这个包toggle_switch: ^1.4.0并像这样创建它

SizedBox(
      height: 40,
      child: ToggleSwitch(
        minWidth: 90.0,
        cornerRadius: 20.0,
        activeBgColors: [const [Colors.cyan],const [Colors.cyan]],
        activeFgColor: Colors.white,
        inactiveBgColor: Colors.grey,
        inactiveFgColor: Colors.white,
        initialLabelIndex: 1,
        totalSwitches: 2,
        labels: ['Agency', 'Freelancer'],
        radiusStyle: true,
        onToggle: (index) {
          print('switched to: $index');
        },
      ),
    ),

you can use this package toggle_switch: ^1.4.0 and create it like this

SizedBox(
      height: 40,
      child: ToggleSwitch(
        minWidth: 90.0,
        cornerRadius: 20.0,
        activeBgColors: [const [Colors.cyan],const [Colors.cyan]],
        activeFgColor: Colors.white,
        inactiveBgColor: Colors.grey,
        inactiveFgColor: Colors.white,
        initialLabelIndex: 1,
        totalSwitches: 2,
        labels: ['Agency', 'Freelancer'],
        radiusStyle: true,
        onToggle: (index) {
          print('switched to: $index');
        },
      ),
    ),

回复收藏 0 原文

~没有更多了~