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/blocs/cachebloc/cache_bloc.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 'bloc/topic_picture_bloc.dart';
import 'widgets/practice_header_widget.dart';
class TopicPicturePage extends StatelessWidget {
  const TopicPicturePage({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TopicPictureBloc(
          PageController(),
          3
      )
        ..add(RequestDataEvent())
        ..add(InitMessageChannelEvent()),
      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));
        }
      },
      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: (){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 == 1) {//听音选图
                            return _pageViewVoicePictureItemWidget(topics);
                          } else if (topics?.type == 2) {//听音选字
                            return _pageViewVoiceWordItemWidget(topics);
                          } else if (topics?.type == 3) {//看题选字
                            return _pageViewWordItemWidget(topics);
                          } else if (topics?.type == 4) {//看题选图
                            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(
                  'What to do when the sentence question is very long and needs a line break',
                  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(
                    itemCount: topics?.topicAnswerList?.length??0,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context,index){
                      return _decodeImageWidget(index);
                    }),
              ),
            ],
          ),
        );
      });
  Widget _decodeImageWidget(int index) => 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: const DecorationImage(
                        fit: BoxFit.fitWidth,
                        image: NetworkImage('https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714')
                    )
                ),
              ),
            ),
          ),
        );
      });
  ///看题选字
  Widget _pageViewWordItemWidget(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Text(
                  'What to do when the sentence question is very long and needs a line break',
                  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(
                    itemCount: topics?.topicAnswerList?.length??0,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context,index){
                      return _decodeWordWidget(index);
                    }),
              ),
            ],
          ),
        );
      });
  Widget _decodeWordWidget(int index) => 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(
                          'yellow',
                          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: [
                  Image.asset('voice'.assetPng,height: 33.h,width: 30.w,),
                  10.horizontalSpace,
                  Text(
                      'yellow',
                      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,
                    itemCount: topics?.topicAnswerList?.length??0,
                    itemBuilder: (BuildContext context,int index){
                      return _decodeVoiceImageWidget(1,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: const DecorationImage(
                        fit: BoxFit.fitWidth,
                        image: NetworkImage('https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714')
                    )
                ),
              ),
            ),
          ),
        );
      });
  ///听音选字
  Widget _pageViewVoiceWordItemWidget(CourseProcessTopics? topics) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Image.asset('voice'.assetPng,height: 33.h,width: 30.w,),
              26.verticalSpace,
              SizedBox(
                width: 163.w * (topics?.topicAnswerList?.length??0),
                height: 143.h,
                child: ListView.builder(
                    itemCount: topics?.topicAnswerList?.length,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context,int index){
                      return _decodeVoiceWordImageWidget(index, topics!.topicAnswerList![index]);
                    }),
              ),
              // Row(
              //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
              //   children: [
              //     Offstage(
              //       offstage: topics.topicAnswerList!.length <= 1,
              //       child: _decodeVoiceWordImageWidget(1,topics.topicAnswerList![0]),
              //     ),
              //     Offstage(
              //       offstage: topics.topicAnswerList!.length <= 2,
              //       child: _decodeVoiceWordImageWidget(2,topics.topicAnswerList![1]),
              //     ),
              //     // Offstage(
              //     //   offstage: topics.topicAnswerList!.length <= 3,
              //     //   child: _decodeVoiceWordImageWidget(3,topics.topicAnswerList![2]),
              //     // ),
              //     // Offstage(
              //     //   offstage: topics.topicAnswerList!.length <= 4,
              //     //   child: _decodeVoiceWordImageWidget(4,topics.topicAnswerList![3]),
              //     // )
              //   ],
              // )
            ],
          ),
        );
      });
  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:'https://up.enterdesk.com/edpic_source/16/e7/0d/16e70d550daff77cbac31fae5e1651d4.jpg',
              height: 186.h,
              width: 186.w,
            ),
            160.horizontalSpace,
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  'voice'.assetPng,
                  height: 52.h,
                  width: 46.w,
                ),
                70.verticalSpace,
                GestureDetector(
                  onTap: () {
                    if (bloc.isVoicing) {
                      return;
                    }
                    bloc.add(VoiceXsTestEvent('Hello', 0,context.read<CacheBloc>().userEntity!.id));
                  },
                  child: Image.asset(
                    'micro_phone'.assetPng,
                    height: 75.w,
                    width: 75.w,
                  ),
                )
              ],
            )
          ],
        );
      });
}