Flutter中点击Logout按钮后按钮样式意外变更的修复咨询

初始欢迎界面：

成功登录后的首页：

Logout按钮初始样式：

点击Logout按钮后，按钮样式意外变为：

请问该如何修复此问题？

以下是HomeScreen源代码：

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ListItem(),
    );
  }
}

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

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

class ListItemState extends State<ListItem> {
  final int listLength = 30;
  late List<String> users = [];

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  @override
  void dispose() {
    users.clear();
    super.dispose();
  }

  void fetchUsers() async {
    final uri = Uri.parse('${Constants.apiUrl}/users');
    Response response = await get(uri, headers: Constants.apiHeader);
    final body = jsonDecode(response.body);
    setState(() {
      users = List<String>.from(body);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("UserList"),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return const WelcomeScreen();
                  }),
                  // ModalRoute.withName('/'),
                );
              },
            ),
          ],
        ),
        body: ListBuilder(
          isSelectionMode: false,
          selectedList: users,
          onSelectionChange: (bool x) {},
        ));
  }
}

class ListBuilder extends StatefulWidget {
  const ListBuilder({
    super.key,
    required this.selectedList,
    required this.isSelectionMode,
    required this.onSelectionChange,
  });

  final bool isSelectionMode;
  final List<String> selectedList;
  final Function(bool)? onSelectionChange;

  @override
  State<ListBuilder> createState() => _ListBuilderState();
}

class _ListBuilderState extends State<ListBuilder> {
  void _toggle(int index) {
    if (widget.isSelectionMode) {
      setState(() {
        widget.selectedList[index] = widget.selectedList[index];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: widget.selectedList.length,
        itemBuilder: (_, int index) {
          return ListTile(
              onTap: () => _toggle(index),
              leading: const Icon(Icons.person),
              title: Text(widget.selectedList[index]));
        });
  }
}

1. 移除嵌套的MaterialApp #

HomeScreen作为页面组件，无需返回MaterialApp——整个应用的根节点应该已经有一个MaterialApp提供全局主题和导航上下文，嵌套会导致上下文冲突，引发样式异常。

修改HomeScreen代码：

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

  @override
  Widget build(BuildContext context) {
    // 直接返回ListItem，移除嵌套的MaterialApp
    return const ListItem();
  }
}

2. 优化Logout导航逻辑 #

当前用Navigator.push会把WelcomeScreen添加到路由栈顶，原HomeScreen仍留在栈中，可能导致返回时的状态异常。改用Navigator.pushReplacement替换当前路由，确保HomeScreen被移除出栈：

修改IconButton的点击逻辑：

IconButton(
  icon: const Icon(Icons.logout),
  onPressed: () {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) {
        return const WelcomeScreen();
      }),
    );
    // 如果WelcomeScreen是应用根路由，也可以用popUntil直接回到根：
    // Navigator.popUntil(context, ModalRoute.withName('/'));
  },
),

3. 修复ListBuilder中的无效代码 #

原_toggle方法里的widget.selectedList[index] = widget.selectedList[index];是无效赋值，而且widget的属性不可直接修改。如果需要实现列表项选择功能，应该在ListItemState中维护独立的选中状态列表：

修改ListItemState： #

class ListItemState extends State<ListItem> {
  final int listLength = 30;
  late List<String> users = [];
  // 添加选中状态列表
  late List<bool> selectedStates = [];

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  @override
  void dispose() {
    users.clear();
    selectedStates.clear();
    super.dispose();
  }

  void fetchUsers() async {
    final uri = Uri.parse('${Constants.apiUrl}/users');
    Response response = await get(uri, headers: Constants.apiHeader);
    final body = jsonDecode(response.body);
    setState(() {
      users = List<String>.from(body);
      // 初始化选中状态
      selectedStates = List.generate(users.length, (_) => false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("UserList"),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () {
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return const WelcomeScreen();
                  }),
                );
              },
            ),
          ],
        ),
        body: ListBuilder(
          isSelectionMode: false,
          users: users,
          selectedStates: selectedStates,
          onSelectionChange: (bool x) {},
          // 传递切换选中状态的回调
          onToggle: (index) {
            setState(() {
              selectedStates[index] = !selectedStates[index];
            });
          },
        ));
  }
}

修改ListBuilder： #

class ListBuilder extends StatelessWidget {
  const ListBuilder({
    super.key,
    required this.users,
    required this.selectedStates,
    required this.isSelectionMode,
    required this.onSelectionChange,
    required this.onToggle,
  });

  final bool isSelectionMode;
  final List<String> users;
  final List<bool> selectedStates;
  final Function(bool)? onSelectionChange;
  final Function(int) onToggle;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: users.length,
        itemBuilder: (_, int index) {
          return ListTile(
              onTap: () => onToggle(index),
              leading: const Icon(Icons.person),
              title: Text(users[index]),
              // 可选：在选择模式下显示复选框
              trailing: isSelectionMode 
                  ? Checkbox(value: selectedStates[index], onChanged: (_) => onToggle(index))
                  : null);
        });
  }
}

修复说明 #

• 嵌套MaterialApp是样式异常的核心原因：多MaterialApp会导致多个独立的主题、导航上下文，点击按钮时上下文切换引发样式错乱。
• 替换路由而非添加路由：避免栈中残留旧页面，防止返回时出现异常状态。
• 修正ListBuilder的状态管理：避免直接修改不可变的widget属性，通过回调维护父组件的状态，符合Flutter的状态管理规范。

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