[펫버틀러] 반려 동물 고민 상담 앱 - 개발 9 일차 (메모 이미지 동영상 첨부 화면 개발 / 로그인 토큰 처리 확인 )

• 어제 로그인시 토큰 처리에 대한 개발 후 테스트한 데이터 서버 테이블에 잘 들어가는 지 확인해봤다.
• 주로사용하는 mysql  툴인 HeidiSQL 툴을 이용해서 토큰데이터가 사용자 테이블에 잘들어가는 확인 해보았다.
• 토근데이터는 이후에 사용자가 강아지프로필정보를 넣을때 사용차 체크할때 쓸 수 있고 다양하게 처리 할 수 있다.

 

 

• 그리고 메모장에 이미지 업로드 처리를 위한 picker를 호출하여야 한다. 거기에 쓰이는 컨퍼넌트를 추가 할 수 있다.

https://pub.dev/packages/image_picker

image_picker | Flutter Package

 

• 그리나 카메라 갤러리 동영상 동영상갤러리 를 선택할 수있는 부분이 따로 .UI 구현이 필요하다.
• 별도로 오픈소스 컨퍼넌트가 있지만 아무래도 자체 개발해서 이후 커스터마이징 처리 하는것으로 가닥을 잡았다.

• flutter 관련 UI  소스 

 showDialog(
        context: context,
        builder: (_) => AlertDialog(
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(0.0))),
              content: Builder(
                builder: (context) {
                  // Get available height and width of the build area of this widget. Make a choice depending on the size.
                  var height = MediaQuery.of(context).size.height;
                  var width = MediaQuery.of(context).size.width;

                  return SizedBox(
                    height: 200,
                    width: width,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            InkWell(
                              onTap: () async { 
                              }, // Handle your callback.
                              splashColor: Colors.brown.withOpacity(0.5),
                              child: Ink(
                                height: 80,
                                width: 80,
                                decoration: const BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(8.0)),
                                  image: DecorationImage(
                                    image: AssetImage('assets/icon/camera.jpg'),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            //const Text(' 카메라'),
                            InkWell(
                              onTap: () async { 
                              }, // Handle your callback.
                              splashColor: Colors.brown.withOpacity(0.5),
                              child: Ink(
                                height: 80,
                                width: 80,
                                decoration: const BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(8.0)),
                                  image: DecorationImage(
                                    image:
                                        AssetImage('assets/icon/gallery.jpg'),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            //const Text(' 갤러리')
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            InkWell(
                              onTap: () async {  }
                              }, // Handle your callback.
                              splashColor: Colors.brown.withOpacity(0.5),
                              child: Ink(
                                height: 80,
                                width: 80,
                                decoration: const BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(8.0)),
                                  image: DecorationImage(
                                    image: AssetImage('assets/icon/movie.jpg'),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            //const Text(' 카메라'),
                            InkWell(
                              onTap: () async { 
                              }, // Handle your callback.
                              splashColor: Colors.brown.withOpacity(0.5),
                              child: Ink(
                                height: 80,
                                width: 80,
                                decoration: const BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(8.0)),
                                  image: DecorationImage(
                                    image: AssetImage(
                                        'assets/icon/moviegallery.jpg'),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            //const Text(' 갤러리')
                          ],
                        )
                      ],
                    ),
                  );
                },
              ),
            ));
  }

 

• 다음은 이미지를 받아와서 서버에 올리는 작업을 해보겠다. 
• 아무래도 본격적인 개발에 앞서 어느정도 기술적인 어려운 부분들을 해결 하고 UI부분은 좀더 뒤에 기능구현 하는것으로 한다.