Flutter：AppBar按钮MaterialPageRoute在Android失效，Web端正常

Flutter应用的AppBar内设置按钮和退出按钮在Android移动端点击无任何响应，但Web端可正常触发事件。应用中的TabController在两个平台均运行正常。点击按钮时无错误提示，print语句和断点都未触发，仅输出以下EGL_emulation日志：

AppBar代码 #

String name = FirebaseAuth.instance.currentUser!.displayName.toString();
@override
Widget build(BuildContext context) {
  var appState = context.watch<GroupChannelState>();
  appState.init_groups_list();

  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      bool wide_display = (constraints.maxWidth >= NARROW_SCREEN_WIDTH);
      if (wide_display) {
        return Scaffold(
          appBar: AppBar(
              title: const Text("Euphony"),
              actions: [
                Align(alignment: Alignment.center, child: Text('Welcome ' + name, style: const TextStyle(fontSize: 20), textAlign: TextAlign.center,)),
                ElevatedButton(
                    onPressed: () {
                      
                      //print("Opened Settings Page");
                      debugPrintHitTestResults = true;
                  
                      Navigator.push(context, MaterialPageRoute(builder: ((context) => settingsPage())));
                    },
                    child: const Icon(Icons.settings)
                ),
                ElevatedButton(
                    onPressed: () {
                      /*
                  print("Logged Out");
                  */
                      FirebaseAuth.instance.signOut().then((value) {
                        Navigator.push(context, MaterialPageRoute(builder: ((context) => LoginPage())));
                      });
                    },
                    child: const Icon(Icons.logout_outlined)
                ),
                
              ]
          ),

控制台日志 #

D/EGL_emulation(13690): app_time_stats: avg=44.07ms min=1.15ms max=369.61ms count=22
D/EGL_emulation(13690): app_time_stats: avg=700.50ms min=0.86ms max=10325.35ms count=21
D/EGL_emulation(13690): app_time_stats: avg=578.28ms min=1.93ms max=8910.87ms count=16
D/EGL_emulation(13690): app_time_stats: avg=11.56ms min=1.46ms max=141.75ms count=52
D/EGL_emulation(13690): app_time_stats: avg=37.58ms min=13.05ms max=537.70ms count=40
D/EGL_emulation(13690): app_time_stats: avg=41.91ms min=12.88ms max=854.14ms count=33
D/EGL_emulation(13690): app_time_stats: avg=11.57ms min=1.48ms max=135.72ms count=52

解决方案 #

1. 替换ElevatedButton为IconButton #

AppBar的actions区域设计初衷是容纳IconButton这类轻量组件，ElevatedButton在Android端可能存在手势冲突或点击区域被遮挡的问题。换成IconButton后，既能保留按钮功能，又能适配AppBar的布局逻辑：

actions: [
  Align(alignment: Alignment.center, child: Text('Welcome ' + name, style: const TextStyle(fontSize: 20), textAlign: TextAlign.center,)),
  IconButton(
    onPressed: () {
      debugPrint("Opened Settings Page");
      Navigator.push(context, MaterialPageRoute(builder: ((context) => settingsPage())));
    },
    icon: const Icon(Icons.settings),
    // 可选：设置样式模拟ElevatedButton效果
    style: IconButton.styleFrom(
      backgroundColor: Theme.of(context).colorScheme.primary,
      foregroundColor: Colors.white,
      padding: const EdgeInsets.all(8),
    ),
  ),
  IconButton(
    onPressed: () {
      FirebaseAuth.instance.signOut().then((value) {
        Navigator.push(context, MaterialPageRoute(builder: ((context) => LoginPage())));
      });
    },
    icon: const Icon(Icons.logout_outlined),
    style: IconButton.styleFrom(
      backgroundColor: Theme.of(context).colorScheme.primary,
      foregroundColor: Colors.white,
      padding: const EdgeInsets.all(8),
    ),
  ),
]

2. 移除build方法中的冗余初始化 #

你在build方法里调用了appState.init_groups_list()，每次UI重绘都会执行这个方法，可能导致界面卡顿或间接影响按钮响应。建议把初始化逻辑移到initState（如果是StatefulWidget）：

@override
void initState() {
  super.initState();
  var appState = context.read<GroupChannelState>();
  appState.init_groups_list();
}

如果是无状态组件，考虑用FutureBuilder或者将初始化逻辑放到状态管理类的内部初始化方法中，避免在build周期内重复执行。

3. 确认点击事件目标 #

开启debugPrintHitTestResults = true后，点击按钮时查看控制台输出，确认点击事件是否真的触发到按钮上。如果点击被其他组件拦截，需要调整Actions内组件的布局，比如添加Padding或SizedBox来分隔组件，避免重叠：

actions: [
  Align(alignment: Alignment.center, child: Padding(
    padding: const EdgeInsets.only(right: 16),
    child: Text('Welcome ' + name, style: const TextStyle(fontSize: 20), textAlign: TextAlign.center,),
  )),
  // 按钮之间添加间距
  const SizedBox(width: 8),
  IconButton(...),
  const SizedBox(width: 8),
  IconButton(...),
]

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