Flutter Bloc灯泡开关示例失效问题排查求助

核心逻辑错误 #

你的代码中，开关点击事件的触发逻辑完全颠倒了：当前代码在灯泡亮（state.isOn == true）时发送BulbOnEvent，灯泡灭时发送BulbOffEvent，这会导致状态无法正确切换。正确逻辑应该是：灯泡亮时发送关闭事件，灯泡灭时发送开启事件。

修正后的关键代码 #

修改GestureDetector的onTap回调：

onTap: () {
  print('Tapped');
  state.isOn
      ? context.read<BulbBloc>().add(BulbOffEvent()) // 亮灯状态下触发关闭事件
      : context.read<BulbBloc>().add(BulbOnEvent()); // 灭灯状态下触发开启事件
},

其他必要检查项 #

• 确认pubspec.yaml中已正确配置资源路径（否则图片无法加载）：

  flutter:
    assets:
      - assets/images/
  

• 验证图片文件名、路径与代码中的写法完全一致（Flutter对文件名大小写敏感）。

完整修正后的Main.dart #

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

import 'blocs/bulb/bulb_bloc.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: BlocProvider(
            create: (context) => BulbBloc(),
            child: BlocBuilder<BulbBloc, BulbState>(
              builder: (context, state) {
                String bulbImgSrc = state.isOn
                    ? 'assets/images/turned-on.png'
                    : 'assets/images/turned-off.png';
                String switchImgSrc = state.isOn
                    ? 'assets/images/switch-on.png'
                    : 'assets/images/switch-off.png';
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                      width: 200,
                      height: 200,
                      decoration: BoxDecoration(
                        color: Colors.transparent,
                        image: DecorationImage(
                          image: AssetImage(bulbImgSrc),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Tapped');
                        state.isOn
                            ? context.read<BulbBloc>().add(BulbOffEvent())
                            : context.read<BulbBloc>().add(BulbOnEvent());
                      },
                      child: Container(
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          image: DecorationImage(
                            image: AssetImage(switchImgSrc),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

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