Flutter中NeumorphicToggle的OnChanged触发后按钮无位移 求示例代码

OnChanged触发后界面无切换位移的核心原因是未将组件的选中状态与StatefulWidget的状态变量绑定，触发回调后未调用setState更新状态。

完整示例代码 #

前置依赖配置 #

在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_neumorphic: ^3.2.0

功能实现代码 #

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NeumorphicToggle Demo',
      home: Scaffold(
        backgroundColor: Colors.grey[200],
        body: const Center(child: NeumorphicToggleDemo()),
      ),
    );
  }
}

class NeumorphicToggleDemo extends StatefulWidget {
  const NeumorphicToggleDemo({super.key});

  @override
  State<NeumorphicToggleDemo> createState() => _NeumorphicToggleDemoState();
}

class _NeumorphicToggleDemoState extends State<NeumorphicToggleDemo> {
  // 存储当前选中的索引，必须为State类的成员变量
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return NeumorphicToggle(
      height: 50,
      width: 300,
      // 绑定当前选中的索引
      selectedIndex: _selectedIndex,
      // 配置选中样式
      style: NeumorphicToggleStyle(
        backgroundColor: Colors.grey[200],
        borderRadius: BorderRadius.circular(12),
        thumb: NeumorphicStyle(
          depth: 4,
          color: Colors.grey[300],
        ),
      ),
      // 选项列表
      children: const [
        ToggleElement(
          background: Center(child: Text("选项1", style: TextStyle(fontSize: 16))),
          foreground: Center(child: Text("选项1", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500))),
        ),
        ToggleElement(
          background: Center(child: Text("选项2", style: TextStyle(fontSize: 16))),
          foreground: Center(child: Text("选项2", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500))),
        ),
        ToggleElement(
          background: Center(child: Text("选项3", style: TextStyle(fontSize: 16))),
          foreground: Center(child: Text("选项3", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500))),
        ),
      ],
      // 触发回调时更新状态，必须调用setState
      onChanged: (int index) {
        setState(() {
          _selectedIndex = index;
        });
      },
    );
  }
}

注意要点 #

• 必须使用StatefulWidget维护选中索引变量，不能使用普通变量或者StatelessWidget的成员变量
• selectedIndex属性必须绑定你维护的状态变量，不能写死固定值
• onChanged回调中必须调用setState更新状态变量的值，否则Flutter不会触发UI重绘

内容的提问来源于stack exchange，提问作者Rolandas