[Flutter] 230115 - 동영상 플레이어

tissue·2023년 1월 15일

Flutter

목록 보기
4/8
post-thumbnail

수강 강의: https://url.kr/inflearn
진도: 59강 / 127강


[PushRelpacement]

PushReplacement: 직전 Stack을 삭제하고 새로운 것을 push하여 대체한다.

예를 들어, 원래 Stack에 [HomeScreen(), RouteOne(), RouteTwo()] 이 있었다고 하자.
이때 RouteTwo 화면에서 에서 PushReplacement를 이용해서 RouteThree로 갔다면 Stack에 있던 RouteTwo 는 삭제되고 RouteThree가 들어간다.
PushReplacement를 할 경우 Stack: [HomeScreen(), RouteOne(), RouteTree()]
그냥 Push를 할 경우 Stack: [HomeScreen(), RouteOne(), RouteTwo(), RouteTree()]

따라서 PushReplacement를 이용해서 들어간 RouteThree에서 Pop을 하면 RouteOne으로 돌아간다.

[maybePop]

첫 스크린인 HomeScreen에서 Pop을 하면 HomeScreen이 Stack에서 삭제되어 Stack에 아무것도 없게 된다. 빈 화면이 보이는 것이다. 이런 경우를 막기 위해서 maybePop을 이용한다.

onPressed: () {
	Navigator.of(context).maybePop();
	},
	child: Text('Maybe Pop'),
)

maybePop : Stack안에 Page가 있을 때만 Pop을 실행함

=> RouteOne에서 maybePop을 하면?
RouteOne에서 maybePop을 하면, Stack이 있으므로 그냥 Pop을 실행했을 때와 동일하게 실행된다.


[canPop]

canPop : canPop은 True, False값을 반환한다.
Pop을 할 수 있는 경우: True 반환
Pop을 할 수 없는 경우: False 반환

onPressed: () {
	Navigator.of(context).canPop();
	},
	child: Text('Maybe Pop'),
)

따라서, maybePop은 canPop이 Ture가 나올 때 쓸 수 있다.


[WillPopScrope]

HomeScreen에서 뒤로가기를 하는 경우, iOS에서는 뒤로가기 버튼이 없기 때문에 뒤로가기가 불가능하지만, Android에서는 뒤로가기 버튼을 누르면 그냥 앱이 종료된다.
앱이 종료되는 것을 막기 위해서 Stack에 Page가 없는 경우 Event를 줄 수 있다.

WillPopScrope(
	onWillPop: () synce {
		// true - 뒤로가기 가능
		// false - 뒤로가기 불가능
		return true;
	}
	child: (페이지)
)

true를 넣으면 child 페이지에서 뒤로가기가 가능하고, False를 넣으면 child 페이지에서 뒤로가기가 불가능하다.

(참고) 뒤로가기만 불가능하고, Pop 버튼이 있는 경우 Pop을 누르면 Pop이 정상적으로 잘 실행된다.


[Viedo Player]

  • video_player 플러그인
  • image_picker 플러그인
  • Stack 위젯
  • AspectRatio 위젯

본래 VideoPlayer

[그래디언트]

Container에서는 decoration을 쓸 수 있다.

decoration: const BoxDecoration(
	color: Colors.red,
),

Conatiner에서 decoration을 쓰기로 했으면 color는 꼭 decoration 안에 들어가야 한다.

단색이 아니라 그라데이션 색상을 사용하려면 어떻게 해야할까?

decoration: const BoxDecoration(
	gradient: LinearGradient(
		begin: Alignment.topCenter, // 어디서부터 시작할지
		end: Alignment.bottomCenter, // 어디에서 끝날지
		colors: [
			Colors.black, // 시작 색상
			Colors.blue, // 종료 색상
		]),
        ),

gradient를 사용해서 그라데이션 효과를 줄 수 있다.


영상이 선택되면 screen은 똑같이 homeScreen인데 화면에 나오는 Widget만 바꿔서 동영상 플레이어가 나오도록 만들어보자.

[ImagePicker]

void onLogoTap() async {
	final video = await ImagePicker().pickVideo(
		source: ImageSource.gallery, // 갤러리에서 소스 선택하기
	);
}

ImagePicker는 async, await을 사용한다.
갤러리에서 받아오고싶기 때문에 ImageSource.gallery로 받아온다
(그 외의 ImageSource. 메소드)
Camera : 카메라에서 소스를 받아옴

[갤러리에 이미지, 동영상 넣어주는 방법]



Android의 경우에는 download 안에 드래그해서 옮겨와주면 된다.
iOS의 경우, 사진은 없지만, Android의 경우와 동일하게 갤러리에 파일을 드래그해서 옮겨주면 된다.

[이미지를 고르지 않는 경우 대비]

이미지를 고르지 않는 경우를 대비해서

if (video != null) {
	setState(() {
		this.video = video;
	});

XFile? video;로 먼저 선언해주고, video가 null이 아닌 경우에만 this.video에 방금 받아온 video를 넣어준다.

[이미지를 고른 경우 홈 화면에 renderEmpty 대신 비디오 플레이어를 띄운다]

Widget build(BuildContext context) {
    return Scaffold(
      body: video == null ? renderEmpty() : renderVideo(),
    );
  }

[Positioned]

하위 위젯을 Postioned로 감싸줌

Positioned(
	top: // 위에서 0만큼 떨어진 곳에 포지션
    left: // 왼쪽에서 0만큼 떨어진 곳에 포지션
    right: @ // 오른쪽에서 @만큼 떨어진 곳에 포지션
    bottom: // 아래에서 0만큼 떨어진 곳에 포지션
)

[ERROR]

원래 버튼을 누르면 실행이 돼야하는데.. 지금 이걸 못함.. ㅠㅠㅠㅠ
나중에 다시 해봐야겠다..

profile
Better than Yesterday!

0개의 댓글