lib/pages/practice/topic_picture_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/core/app_consts.dart';
import 'package:wow_english/common/core/user_util.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/common/widgets/ow_image_widget.dart';
import 'package:wow_english/models/course_process_entity.dart';
import 'package:wow_english/pages/practice/topic_type.dart';
import 'package:wow_english/route/route.dart';
import 'package:wow_english/utils/toast_util.dart';
import '../../common/widgets/throttledGesture_gesture_detector.dart';
import 'bloc/topic_picture_bloc.dart';
import 'widgets/practice_header_widget.dart';
class TopicPicturePage extends StatelessWidget  {
  const TopicPicturePage({super.key, this.courseLessonId});
  final String? courseLessonId;
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TopicPictureBloc(
          context,
          PageController(),
          courseLessonId??'',
      )
        ..add(InitBlocEvent())
        ..add(RequestDataEvent())
        ..add(XSVoiceInitEvent(
            {
              'appKey':AppConsts.xsAppKey,
              'service':AppConsts.xsAppService,
              'secretKey':AppConsts.xsAppSecretKey,
              'userId':UserUtil.getUser()!.id.toString(),
            }
        )),
      child: _TopicPicturePage(),
    );
  }
}
class _TopicPicturePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<TopicPictureBloc,TopicPictureState>(
      listener: (context, state){
        if (state is RequestDataState) {
          context.read<TopicPictureBloc>().add(CurrentPageIndexChangeEvent(0));
        }
        if (state is XSVoiceTestState) {
        }
      },
      child: _topicPictureView(),
    );
  }
  Widget _topicPictureView() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              Column(
                children: [
                  PracticeHeaderWidget(
                    title: '${bloc.currentPage}/${bloc.entity?.topics?.length}',
                    onTap: () {
                      popPage(
                          data:{
                            'currentStep':bloc.currentPage,
                            'courseLessonId':bloc.courseLessonId,
                            'isCompleted': bloc.isLastPage(),
                          });
                      // Navigator.pop(context);
                      },
                  ),
                  Expanded(
                    child: PageView.builder(
                        itemCount: bloc.entity?.topics?.length,
                        scrollDirection: Axis.horizontal,
                        controller: bloc.pageController,
                        onPageChanged: (int index) {
                          bloc.add(CurrentPageIndexChangeEvent(index));
                        },
                        itemBuilder: (BuildContext context,int index){
                          CourseProcessTopics? topics = bloc.entity?.topics![index];
                          if (topics?.type == TopicType.audioImageSelect.value) {//听音选图
                            return _pageViewVoicePictureItemWidget(topics);
                          } else if (topics?.type == TopicType.audioCharSelect.value) {//听音选字
                            return _pageViewVoiceWordItemWidget(topics);
                          } else if (topics?.type == TopicType.questionCharSelect.value) {//看题选字
                            return _pageViewWordItemWidget(topics);
                          } else if (topics?.type == TopicType.questionImageSelect.value) {//看题选图
                            return _pageViewItemWidget(topics);
                          } else {//语音问答
                            return _voiceAnswerItem(topics);
                          }
                        }),
                  )
                ],
              ),
              Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Image.asset('bottom_grass'.assetPng)
              )
            ],
          ),
        );
      });
  ///看题选图
  Widget _pageViewItemWidget(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        return SafeArea(
          child: Column(
            children: [
              Text(
                  topics?.word??'',
                  softWrap: true,
                  style: TextStyle(
                      fontSize: 21.sp,
                      color: const Color(0xFF333333)
                  )
              ),
              26.verticalSpace,
              SizedBox(
                height: 143.h,
                width: 143.w * (topics?.topicAnswerList?.length??0),
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: topics?.topicAnswerList?.length??0,
                    itemBuilder: (context,index){
                      return _decodeImageWidget(index,topics?.topicAnswerList?[index]);
                    }),
              ),
            ],
          ),
        );
      });
  Widget _decodeImageWidget(int index,CourseProcessTopicsTopicAnswerList? answerLis) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return Container(
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          child: GestureDetector(
            onTap: () => bloc.add(SelectItemEvent(index)),
            child: Container(
              padding: const EdgeInsets.all(4.5),
              decoration: BoxDecoration(
                color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
              height: 143.h,
              width: 143.w,
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(15),
                    border: Border.all(
                        width: 1.0,
                        color: const Color(0xFF140C10)
                    ),
                    image: DecorationImage(
                        fit: BoxFit.fitWidth,
                        image: NetworkImage(answerLis?.picUrl??'')
                    )
                ),
              ),
            ),
          ),
        );
      });
  ///看题选字
  Widget _pageViewWordItemWidget(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        return SafeArea(
          child: Column(
            children: [
              Text(
                  topics?.word??'',
                  softWrap: true,
                  style: TextStyle(
                      fontSize: 21.sp,
                      color: const Color(0xFF333333)
                  )
              ),
              26.verticalSpace,
              SizedBox(
                height: 143.h,
                width: 143.w * (topics?.topicAnswerList?.length??0),
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: topics?.topicAnswerList?.length??0,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context,index){
                      return _decodeWordWidget(index,topics?.topicAnswerList?[index]);
                    }),
              ),
            ],
          ),
        );
      });
  Widget _decodeWordWidget(int index,CourseProcessTopicsTopicAnswerList? answerLis) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return Container(
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          child: GestureDetector(
            onTap: () => bloc.add(SelectItemEvent(index)),
            child: Container(
              width: 143.w,
              height: 143.h,
              padding: EdgeInsets.only(left: 13.w,right: 13.w,top: 13.h,bottom: 13.h),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                border: Border.all(
                    width: 1.0,
                    color: const Color(0xFF140C10)
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                          answerLis?.word??'',
                          style: TextStyle(
                              fontSize: 20.sp,
                              color: const Color(0xFF333333)
                          )
                      ),
                    ),
                  ),
                  Container(
                    height: 30.h,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
                      borderRadius: BorderRadius.circular(15.r),
                      border: Border.all(
                          width: 1.5,
                          color: const Color(0xFF140C10)
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Image.asset('choose'.assetPng),
                  )
                ],
              ),
            ),
          ),
        );
      });
  ///听音选图
  Widget _pageViewVoicePictureItemWidget(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      bloc.add(VoicePlayEvent());
                    },
                    child: Image.asset(
                      bloc.voicePlayState == VoicePlayState.playing?'reade_answer'.assetGif:'voice'.assetPng,
                      height: 33.h,
                      width: 30.w,
                    ),
                  ),
                  10.horizontalSpace,
                  Text(
                      topics?.word??'',
                      style: TextStyle(
                          fontSize: 20.sp,
                          color: const Color(0xFF333333)
                      )
                  )
                ],
              ),
              26.verticalSpace,
              SizedBox(
                height: 143.h,
                width: 163.w * (topics?.topicAnswerList?.length??0),
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: topics?.topicAnswerList?.length??0,
                    itemBuilder: (BuildContext context,int index){
                      return _decodeVoiceImageWidget(index,topics?.topicAnswerList?[index]);
                    })
                ,
              )
            ],
          ),
        );
      });
  Widget _decodeVoiceImageWidget(int index,CourseProcessTopicsTopicAnswerList? answerList) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return Container(
          padding:  EdgeInsets.symmetric(horizontal: 10.w),
          child: GestureDetector(
            onTap: () => bloc.add(SelectItemEvent(index)),
            child: Container(
              padding: const EdgeInsets.all(4.5),
              decoration: BoxDecoration(
                color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
              height: 143.h,
              width: 143.w,
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(15),
                    border: Border.all(
                        width: 1.0,
                        color: const Color(0xFF140C10)
                    ),
                    image: DecorationImage(
                        fit: BoxFit.fitWidth,
                        image: NetworkImage(answerList?.picUrl??'')
                    )
                ),
              ),
            ),
          ),
        );
      });
  ///听音选字
  Widget _pageViewVoiceWordItemWidget(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              GestureDetector(
                onTap: () {
                  bloc.add(VoicePlayEvent());
                },
                child: Image.asset(
                  bloc.voicePlayState == VoicePlayState.playing?'reade_answer'.assetGif:'voice'.assetPng,
                  height: 33.h,
                  width: 30.w
                )
              ),
              26.verticalSpace,
              SizedBox(
                width: 163.w * (topics?.topicAnswerList?.length??0),
                height: 143.h,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: topics?.topicAnswerList?.length,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (BuildContext context,int index){
                      return _decodeVoiceWordImageWidget(index, topics!.topicAnswerList![index]);
                    }),
              ),
            ],
          ),
        );
      });
  Widget _decodeVoiceWordImageWidget(int index,CourseProcessTopicsTopicAnswerList answerList) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return GestureDetector(
          onTap: () => bloc.add(SelectItemEvent(index)),
          child: Container(
            width: 163.w,
            height: 143.h,
            padding: EdgeInsets.symmetric(horizontal: 10.w),
            child: Container(
              width: 143.w,
              height: 143.h,
              padding: EdgeInsets.only(left: 13.w,right: 13.w,top: 13.h,bottom: 13.h),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                border: Border.all(
                    width: 1.0,
                    color: const Color(0xFF140C10)
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                          answerList.word??'',
                          style: TextStyle(
                              fontSize: 20.sp,
                              color: const Color(0xFF333333)
                          )
                      ),
                    ),
                  ),
                  Container(
                    height: 30.h,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
                      borderRadius: BorderRadius.circular(15.r),
                      border: Border.all(
                          width: 1.5,
                          color: const Color(0xFF140C10)
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Image.asset('choose'.assetPng),
                  )
                ],
              ),
            ),
          ),
        );
      });
  ///语音问答
  Widget _voiceAnswerItem(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state) {
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OwImageWidget(
              name:topics?.picUrl??'',
              height: 186.h,
              width: 186.w,
            ),
            160.horizontalSpace,
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: () {
                    if (bloc.isVoicing) {
                      showToast('正在录音,不能终止');
                      return;
                    }
                    bloc.add(VoicePlayEvent());
                  },
                  child: Row(
                    children: [
                      Image.asset(
                        bloc.voicePlayState == VoicePlayState.playing?'reade_answer'.assetGif:'voice'.assetPng,
                        height: 52.h,
                        width: 46.w,
                      ),
                      10.horizontalSpace,
                      Text(topics?.word??'')
                    ],
                  ),
                ),
                70.verticalSpace,
                ThrottledGestureDetector(
                  throttleTime: 1000,
                  onTap: () {
                    if (bloc.voicePlayState == VoicePlayState.playing) {
                      showToast('正在播放音频,不能终止');
                      return;
                    }
                    if (bloc.isVoicing) {
                      bloc.add(XSVoiceStopEvent());
                      return;
                    }
                    if (topics?.type == TopicType.voiceQuestion.value ||
                        topics?.type == TopicType.voiceWord.value) {
                      bloc.add(XSVoiceStartEvent(topics?.keyWord??'', '0',UserUtil.getUser()!.id.toString()));
                    } else {
                      bloc.add(XSVoiceStartEvent(topics?.word??'', '0',UserUtil.getUser()!.id.toString()));
                    }
                  },
                  child: Image.asset(
                    bloc.isVoicing?'micro_phone'.assetGif:'micro_phone'.assetPng,
                    height: 75.w,
                    width: 75.w,
                  ),
                )
              ],
            )
          ],
        );
      });
}