Translate-Flutter/lib/page/face_to_face/face_to_face_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/speech_to_text_manager.dart';
import 'package:trans_lark/util/obj_util.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

import 'face_to_face_controller.dart';

class FaceToFaceView extends StatelessWidget {
  FaceToFaceView({super.key});

  final controller = Get.find<FaceToFaceController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      backgroundColor: Colors.black,
      appBar: BaseAppBar(
        backgroundColor: Colors.transparent ,
        backColor: Colors.white,
        onBackTap: controller.onBackTap,
        actionWidget: Padding(
          padding: const EdgeInsets.only(right: 10),
          child: ClipOval(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: controller.onTapRotate,
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: SvgPicture.asset(
                    Assets.svgRotate,
                    width: 24,
                    height: 24,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
      body: Column(
        children: [
          _buildAbove(context),
          _buildUnder(context),
        ],
      ),
    );
  }

  Widget _buildAbove(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => controller.onTapSpeak(false),
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          child: Stack(
            children: [
              Obx(() {
                return Visibility(
                  visible: !controller.selectedUnder.value,
                  child: SpeechToTextManager().isListening.value ? RotatedBox(
                    quarterTurns: 2,
                    child: WaveWidget(
                      config: CustomConfig(
                        colors: [
                          const Color(0xff45A7FE).withOpacity(0.2),
                          const Color(0xff45A7FE),
                        ],
                        durations: [4000, 8000],
                        heightPercentages: [-0.08, -0.08],
                      ),
                      size: const Size(double.infinity, double.infinity),
                      backgroundColor: Colors.transparent,
                      waveAmplitude: 4,
                      // wavePhase: 0,
                      // waveFrequency: 0,
                    ),
                  ) : Container(
                    width: double.infinity,
                    height: double.infinity,
                    color: const Color(0xff45A7FE),
                  ),
                );
              }),
              Obx(() {
                return Container(
                  width: double.infinity,
                  height: double.infinity,
                  padding: EdgeInsets.fromLTRB(30, SpeechToTextManager().isListening.value
                      ? MediaQuery.of(context).padding.top + kToolbarHeight
                      : 0, 30, 40),
                  child: AnimatedRotation(
                    turns: controller.angle.value,
                    duration: const Duration(milliseconds: 500),
                    child: Column(
                      mainAxisAlignment: SpeechToTextManager().isListening.value ? MainAxisAlignment.start : MainAxisAlignment.center,
                      crossAxisAlignment: SpeechToTextManager().isListening.value ? CrossAxisAlignment.start : CrossAxisAlignment.center,
                      children: [
                        if (!controller.selectedUnder.value) ...[
                          SvgPicture.asset(
                            Assets.svgFaceVoice,
                            width: 24,
                            height: 24,
                          ),
                          const SizedBox(height: 20),
                        ],
                        Flexible(
                          child: Visibility(
                            visible: SpeechToTextManager().isListening.value && ObjUtil.isNotEmptyStr(controller.aboveText.value),
                            replacement: const Text(
                              'Please start talking',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 22,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            child: SingleChildScrollView(
                              controller: controller.aboveScrollController,
                              child: Text(
                                controller.aboveText.value,
                                style: const TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  height: 1.8,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildUnder(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => controller.onTapSpeak(true),
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          child: Stack(
            children: [
              Obx(() {
                return Visibility(
                  visible: controller.selectedUnder.value,
                  child: SpeechToTextManager().isListening.value ? WaveWidget(
                    config: CustomConfig(
                      colors: [
                        const Color(0xff87ECB3).withOpacity(0.2),
                        const Color(0xff87ECB3),
                      ],
                      durations: [4000, 8000],
                      heightPercentages: [-0.08, -0.08],
                    ),
                    size: const Size(double.infinity, double.infinity),
                    backgroundColor: Colors.transparent,
                    waveAmplitude: 4,
                    // wavePhase: 0,
                    // waveFrequency: 0,
                  ) : Container(
                    width: double.infinity,
                    height: double.infinity,
                    color: const Color(0xff87ECB3),
                  ),
                );
              }),
              Obx(() {
                return Container(
                  width: double.infinity,
                  height: double.infinity,
                  padding: EdgeInsets.fromLTRB(30, SpeechToTextManager().isListening.value
                      ? 80
                      : 0, 30, MediaQuery.of(context).padding.bottom),
                  child: Column(
                    mainAxisAlignment: SpeechToTextManager().isListening.value ? MainAxisAlignment.start : MainAxisAlignment.center,
                    crossAxisAlignment: SpeechToTextManager().isListening.value ? CrossAxisAlignment.start : CrossAxisAlignment.center,
                    children: [
                      if (controller.selectedUnder.value) ...[
                        SvgPicture.asset(
                          Assets.svgFaceVoice,
                          width: 24,
                          height: 24,
                        ),
                        const SizedBox(height: 20),
                      ],
                      Flexible(
                        child: Visibility(
                          visible: SpeechToTextManager().isListening.value && ObjUtil.isNotEmptyStr(controller.underText.value),
                          replacement: const Text(
                            'Please start talking',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 22,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          child: SingleChildScrollView(
                            controller: controller.underScrollController,
                            child: Text(
                              controller.underText.value,
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                height: 1.8,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}