[프로젝트] 영상플레이어 (2) 조건에 따른 다른 위젯 렌더링

들어가기 앞서...

비디오가 담기지 않았을때와 담겼을떄의 뷰를 조건부로 랜더링 하겠다.

---

본문으로...

1. 코드 정리!

1) body 함수로 뺴자!

Scaffold(
    body: renderEmpty()
);

 Widget renderEmpty() {
    return Container(
      width: MediaQuery.of(context).size.width,
      decoration: getBoxDecoration(),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _Logo(),
          SizedBox(
            height: 30.0,
          ),
          _AppName(),
        ],
      ),
    );
  }

2) 로고를 클릭하면 이미지를 선택하게!

// 함수 파라미터로 넘겨주기
_Logo(onTap: onLogoTap,),
...
// 버튼 클릭시 이벤트
	void onLogoTap() async {
    	ImagePicker 패키지로 갤러리의 비디오 가져오기 
        final video = await ImagePicker().pickVideo(source: ImageSource.gallery,);
      }
...
  
  class _Logo extends StatelessWidget {
  // onTap 함수 담을 변수 선언
  final VoidCallback onTap;

  const _Logo({Key? key, required this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Image(
        image: AssetImage("asset/img/logo.png"),
      ),
    );
  }
}

ios android 잘 작동 한다.

 

 

 

2. 조건에 맞게 뷰 출력 되게 분기처리 추가!

비디오가 있을 경우의 뷰와 없을 경우의 뷰를 보여줘야한다.

class _VideoHomeScreenPageState extends State<VideoHomeScreenPage> {
// XFile : 이미지 피커에서 제공해주는 파일 클래스이다. 모든 이미지와 비디오를 리턴 받을 수 있다.
  XFile? video;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    // 비디오 있을때 없을때 분기처리
        body: video == null ? renderEmpty(): renderVideo()
    );
  }

  // 비디오 있을 때 뷰
  Widget renderVideo() {
    return Center(
      child: Text('video 있다.'),
    );
  }
  // 비디오 없을 때 뷰
  Widget renderEmpty() {
    return Container(
      width: MediaQuery
          .of(context)
          .size
          .width,
      decoration: getBoxDecoration(),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _Logo(onTap: onLogoTap,),
          SizedBox(
            height: 30.0,
          ),
          _AppName(),
        ],
      ),
    );
  }
}

---

끝으로...

1. ImagePicker 패키지를 통해서 갤러리의 비디오 가져오기
2. 분기처리 진행하기

---