[펫버틀러] 반려 동물 고민 상담 앱 - 개발 11 일차 (동영상 썸네일 / 플레이어 적용 )

• 동영상 플레이를 하기 위해서 기본 패키지를 적용했다. 다른패키지는 패키지 dependencies  때문에 적용에 실패했다.
• 섬네일 관련 video_thumbnail 적용해서 사용 했다.

dependencies

  video_player: ^2.4.10

  video_thumbnail: ^0.5.3

 

• 섬네일 관련 소스  VideoThumbnail.thumbnailFile 부분으통해 섬네일을 만들고 byte 형태로 받아서 테이블 컬럼 BLOB타입으로 등록하여 화면에 뿌린다.

 

 if (response.statusCode == 200) {
      // 업로드 후 메모 테이블에 등록
      setState(() async {
        isLoading = false;
        final thumbnailPath = await VideoThumbnail.thumbnailFile(
          video: image.path,
          imageFormat: ImageFormat.JPEG,
          maxWidth:
              128, // specify the width of the thumbnail, let the height auto-scaled to keep the source aspect ratio
          quality: 25,
        );
        imageFile = File(thumbnailPath!);
        final byteFile = ImageProcess.decodeImage(imageFile!.readAsBytesSync());
        _byteImage = base64Encode(ImageProcess.encodePng(byteFile!));
        onSendMessage("$fileName",
            TypeMessage.video, _byteImage.toString());
      });

 

• 메모장에 동영상 화면 섬네일로 보여주고 중간에 플레이 이미지를 넣는다.

   
   //적용 화면
   else if (messageMemo.type == TypeMessage.video)
            Flexible(
                child: Container(
              decoration: BoxDecoration(),
              child: TextButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                        builder: (context) =>
                            CustomerPlayer(url: messageMemo.content)),
                  );
                },
                child: movieImage(messageMemo.etc1),
              ),
            ))
            
            
            
            
            
  // 동영상 이미지 아이콘 넣기          
  Widget movieImage(
    byteImage,
  ) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;

    Image img = Image.memory(
      const Base64Decoder().convert(byteImage),
      fit: BoxFit.cover,
    );

    return Stack(
      children: <Widget>[
        Container(
            width: width,
            height: 200,
            color: Color.fromARGB(255, 254, 111, 2),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0), //or 15.0
              child: Image(image: img.image),
            )),
        const Positioned.fill(
            child: Align(
                alignment: Alignment.center,
                child: Icon(
                  Icons.play_circle,
                  color: Colors.black,
                  size: 50,
                )))
      ],
    );
  }

 

• 동영상플레이 소스를 찾다보니 단순 패키지를 이용해서 적용한 소스를 수정해서 반영했다.
•   CustomerPlayer(url: messageMemo.content)), ==> 이부분 
   
• custom_video_player/example at main · devmemory/custom_video_player · GitHub

GitHub - devmemory/custom_video_player

• 위 패키지를 참조하여 반영한 소스 뒤로가기와 Metrial 감싸기 등을 적용했다.

import 'package:petbutler/custom_video_player.dart';
import 'package:flutter/material.dart';

class CustomerPlayer extends StatelessWidget {
  final String url;
  const CustomerPlayer({Key? key, required String this.url}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var controller = CustomVideoController(videoUrl: url, aspectRatio: 16 / 9);
    return WillPopScope(
        onWillPop: () { // 뒤로가기 눌렀을 때 메모로 돌아가 위해 처리 
          controller.dispose();
          Navigator.pop(context);
          return Future(() => false);
        },
        child: Material(  // Material로감싸줘야 에러가 안난다......
            child: VideoPlayerWidget(
          widgetSize: const Size(400, 300),
          placeHolder: const Center(
            child: CircularProgressIndicator(),
          ),
          videoOption: VideoOption.full,
          videoController: controller,
        )));
  }
}