Flutter弹窗显示插件question_showdialog的使用

在本示例中，我们将展示如何使用question_showdialog插件来实现弹窗功能。此插件可以用于在视频播放过程中显示问题弹窗，并允许用户进行选择或提交答案。

使用步骤

1. 添加依赖

首先，在pubspec.yaml文件中添加question_showdialog依赖：

dependencies:
  flutter:
    sdk: flutter
  question_showdialog: ^1.0.0

然后运行以下命令以更新依赖项：

flutter pub get

2. 创建主应用

接下来，创建一个主应用类MyApp，并在其中初始化VideoPlayerController和设置初始界面。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:question_showdialog/lib/showdialog.dart';
import 'package:video_player/video_player.dart';

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

var isQ = false;

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: isQ?AppBar(
          toolbarHeight: 50,
        ):AppBar(
          toolbarHeight: 0,
        ),
        body: VideoQuestion(),
      ),
    );
  }
}

3. 创建视频问题页面

创建VideoQuestion类，用于加载视频并监听视频播放时间。

class VideoQuestion extends StatefulWidget {
  const VideoQuestion({Key? key}) : super(key: key);

  [@override](/user/override)
  State<VideoQuestion> createState() => _VideoQuestionState();
}

var s1 = ["What is the Topic Name?", "Widget of this Week"];
var s2 = ["How many arguments in Draggable Widget?", "What is the class should be added in Data?"];
var s3 = ["What widget is used with Draggable?", "How many argument for Dragtarget Widget?"];
var s4 = ["How many widget learnt today?"];

// 其他数据定义...

class _VideoQuestionState extends State<VideoQuestion> {
  late VideoPlayerController _controller;
  PageController buttonCarouselController = PageController();
  var questionCount=0;
  var showSubmit = false;
  var showPrev = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/test.mp4');
    _controller.addListener(() {
      setState(() {});
    });
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();

    if(!_controller.value.isPlaying){
      Timer.periodic(Duration(seconds: 1), (timer) {
        var vale = _controller.value.position;
        for(var i in time){
          if(i == vale.inSeconds){
            if(_controller.value.isPlaying){
              showDialog(context: context, builder: (context){
                return QuestionDialog(
                  sectionCount: vcout,
                  isRadioButton: true,
                  questionList: qq,
                  questionOptionList: qq_o,
                  questionCheckBoxList: qq_b,
                  nextPressed:(v,isSubmitButon,a,b) async{
                    print("====QuestionCo $b");
                    if(isSubmitButon){
                      vcout++;
                      var val = _controller.value.position.inSeconds;
                      await _controller.seekTo(Duration(seconds: val+1));
                      await _controller.play();
                    }
                  },
                  prevPressed:(v){}
                );
              });
            }
            _controller.pause().then((value){
              setState(() {
                isQ = true;
              });
            });
          }
        }
      });
    }
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 其他方法定义...
}

4. 定义弹窗逻辑

在视频播放过程中，当达到特定时间点时，通过showDialog调用QuestionDialog来显示问题弹窗。

showDialog(context: context, builder: (context){
  return QuestionDialog(
    sectionCount: vcout,
    isRadioButton: true,
    questionList: qq,
    questionOptionList: qq_o,
    questionCheckBoxList: qq_b,
    nextPressed:(v,isSubmitButon,a,b) async{
      print("====QuestionCo $b");
      if(isSubmitButon){
        vcout++;
        var val = _controller.value.position.inSeconds;
        await _controller.seekTo(Duration(seconds: val+1));
        await _controller.play();
      }
    },
    prevPressed:(v){}
  );
});

5. 完整示例代码

以下是完整的示例代码，展示了如何在视频播放过程中显示问题弹窗并处理用户输入。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:question_showdialog/lib/showdialog.dart';
import 'package:video_player/video_player.dart';

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

var isQ = false;

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: isQ?AppBar(
          toolbarHeight: 50,
        ):AppBar(
          toolbarHeight: 0,
        ),
        body: VideoQuestion(),
      ),
    );
  }
}

class VideoQuestion extends StatefulWidget {
  const VideoQuestion({Key? key}) : super(key: key);

  [@override](/user/override)
  State<VideoQuestion> createState() => _VideoQuestionState();
}

var s1 = ["What is the Topic Name?", "Widget of this Week"];
var s2 = ["How many arguments in Draggable Widget?", "What is the class should be added in Data?"];
var s3 = ["What widget is used with Draggable?", "How many argument for Dragtarget Widget?"];
var s4 = ["How many widget learnt today?"];

// 其他数据定义...

class _VideoQuestionState extends State<VideoQuestion> {
  late VideoPlayerController _controller;
  PageController buttonCarouselController = PageController();
  var questionCount=0;
  var showSubmit = false;
  var showPrev = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/test.mp4');
    _controller.addListener(() {
      setState(() {});
    });
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();

    if(!_controller.value.isPlaying){
      Timer.periodic(Duration(seconds: 1), (timer) {
        var vale = _controller.value.position;
        for(var i in time){
          if(i == vale.inSeconds){
            if(_controller.value.isPlaying){
              showDialog(context: context, builder: (context){
                return QuestionDialog(
                  sectionCount: vcout,
                  isRadioButton: true,
                  questionList: qq,
                  questionOptionList: qq_o,
                  questionCheckBoxList: qq_b,
                  nextPressed:(v,isSubmitButon,a,b) async{
                    print("====QuestionCo $b");
                    if(isSubmitButon){
                      vcout++;
                      var val = _controller.value.position.inSeconds;
                      await _controller.seekTo(Duration(seconds: val+1));
                      await _controller.play();
                    }
                  },
                  prevPressed:(v){}
                );
              });
            }
            _controller.pause().then((value){
              setState(() {
                isQ = true;
              });
            });
          }
        }
      });
    }
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 其他方法定义...
}