Flutter - 코딩마스터하기|사진 업로드,게시하기2

horizontal scroll tags

여기서 태그들은 라이브러리를 사용할 것이다. pub.dev에서 flutter_tags를 사용해보자. 강의는 0.4.8+2이고 나는 최신 버전인 flutter_tags: ^0.4.9+1 를 사용하였다. 그리고 share_post_screen으로 가서 Tags()를 만들어 준다. 우리는 가로 스크롤이 되게 할 것이므로 horizontalScroll을 true로 해준다. 그리고 우선 여기에 사용할 List를 상단에 만들어 준다. List<String> _tagItems로 []에 아무 단어 30개 정도를 넣어준다. 그리고 Tags에서 itemCount에 _tagItems.length를 해준다. 그리고 이 Tags의 높이 부분인 heightHorizontalScroll은 30으로 해준다. itemBuilder에 (index)=> ItemTags()를 만들어 준다. title에는 _tagItems[index], index 에는 index를 해준다. color은 선택된 아이템 상태로 Colors.red를 해주고 activeColor은 기본 상태의 색인데 grey[200]정도로 해준다. 그외에도 color의 옵션들이 여러개 있는데 직접 색을 넣어보면서 해보면 된다. borderRadius는 circular(4)로 해주고 그림자가 너무 많이 있어서 elevation은 2정도로 해주면 된다.

---

  List<String> _tagItems = [
    'quam',
    'elementum',
    'pulvinar',
    'etiam',
    'non',
    'quam',
    'lacus',
    'suspendisse',
    'faucibus',
    'interdum',
    'posuere',
    'lorem',
    'ipsum',
    'dolor',
    'sit',
    'amet',
    'consectetur',
    'adipiscing',
    'elit',
    'duis',
    'tristique',
    'sollicitudin',
    'nibh',
    'sit',
    'amet',
    'commodo',
    'nulla',
    'facilisi',
    'nullam',
    'vehicula',
    'ipsum',
    'a',
    'arcu',
    'cursus',
    'vitae',
    'congue',
    'mauris',
    'rhoncus',
    'aenean',
    'vel',
  ];
          Tags(
            horizontalScroll: true,
            itemCount: _tagItems.length,
            heightHorizontalScroll: 30,
            itemBuilder: (index) => ItemTags(
              title: _tagItems[index],
              index: index,
              splashColor: Colors.grey[800],
              color: Colors.red,
              activeColor: Colors.grey[200],
              textActiveColor: Colors.black87,
              borderRadius: BorderRadius.circular(4),
              elevation: 2,//떠있는 높이. 그림자가 더 많이 나옴

            ),
          ),

---

section switch layout

태그 부분 밑에 각 sns에 같이 올리는 스위치 section부분을 만들어 보자. 전에 만들었던 _sectionButton 부분을 복사해서 _sectionSwitch를 만들어주고 trailing 부분의 아이콘을 삭제한뒤에 CupertionoSwitch를 넣어준다. 그냥 Swtich를 써도 되지만 IOS 모양의 스위치를 넣어주려면 CupertionoSwitch를 써주면 된다. value는 true로, onChanged는 (onValue){}를 해주면 정상적으로 나온다. 그리고 이부분은 스위치가 움직여야 하므로 stateful로 변경해줘야 한다. 여기서 전체를 변경 시킬 수 있지만 _sectionSwitch의 return 부분을 flutter widget로 빼준다. 그리고 stateful 로 변경 해주면 된다. 기본 클래스에 final String title를 만들어 주고 key 부분에 this.title를 {}밖에 넣어줘서 필수로 만들어 준다. 그리고 state 클래스 네에 bool checked = false;를 만들어 주고 Text()에 title를 widget.title로 해주면 된다. CupertinoSwitch에 value에는 checked를 넣어주고 onChanged에 setState를 생성해준뒤 checked = onValue;를 넣어주면 된다. 기존 _sectionSwitch는 삭제해주고  _tags()아래 _divider를 하나 생성해 준뒤 SectionSwtich를 3개 만들어 주고 각각 Facebook, Instagram, Tumblr을 넣어준뒤 실행하면 스위치도 잘 바뀌고 정상 작동하는 것을 볼 수 있다. 태그와 스위치 사이가 너무 좁아서 _tags()와 _divider사이에 SizedBox에 height를 common_s_gap만큼 주면 된다.

---

      body: ListView(
        children: [
          _captionWithImage(),
          _divider,
          _sectionButton('Tag People'),
          _divider,
          _sectionButton('Add Location'),
          _tags(),
          SizedBox(height: common_s_gap,),
          _divider,
          const SectionSwitch('Facebook'),
          const SectionSwitch('Instagram'),
          const SectionSwitch('Tumblr'),
          _divider,
        ],
      ),

class SectionSwitch extends StatefulWidget {
  final String title;
  const SectionSwitch( this.title,{
    Key key,
  }) : super(key: key);

  @override
  State<SectionSwitch> createState() => _SectionSwitchState();
}

class _SectionSwitchState extends State<SectionSwitch> {
  bool checked = false;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(
        widget.title,
        style: TextStyle(fontWeight: FontWeight.w400),
      ),
      trailing: CupertinoSwitch( //그냥 switch 써도 되지만 IOS 모양 쓰려면 이걸로
        value: checked,
        onChanged: (onValue){
          setState(() {
            checked = onValue;
          });
        },
      ),
      dense: true,
      contentPadding: EdgeInsets.symmetric(
        horizontal: common_gap,
      ),
    );
  }
}

---

resize image

스토리지에 이미지를 올리기 전 이미지를 리사이즈 해보자. repo - helper 폴더에 image_helper.dart 새파일을 만들어 준다. decodeImage를 사용하기 위해서 import 'package:image/image.dart';를 해주자. 그냥 사용하려면 잘 나오지 않아 미리 import 해주자. 우선 오리지날 파일을 byte로 읽어와서 Image object로 변경해준다. 그 뒤 300x300으로 사이즈를 줄여 준다.  줄여준 파일을 기존 오리지날 파일의 경로를 읽어 온다. 이때 0부터 length-3까지 읽어온다. 이러면 사진 찍었을때 png인데 png 전까지 읽어 와주고 거기에 jpg로 해줘서 파일을 jpg로 변경해준다. 그리고 encodeJpg로 퀄리티를 50으로 낮춰준 후 File 형식으로 다시 만들어주고 리턴해 주는 방식이다.(단 문제는 이 부분이 오래 걸릴수 있음, 이부분을 하면서 프로세싱이 안멈추게 할것인가를 다음시간에 배울 것임)

---

File getResizedImage(File originImage){
  Image image = decodeImage(originImage.readAsBytesSync());  //오리지날 파일을 바이트로 읽어와서 Image object 로 읽음
  Image resizedImage = copyResizeCropSquare(image, 300); //사이즈 줄임 정사각형으로 만들어줌

  File resizedFile =  File(originImage.path.substring(0, originImage.path.length-3)+"jpg"); // 0 처음 부터 오른쪽에서 -3 곧 png부분 제외하고 가져와서 jpg로 변경
  resizedFile.writeAsBytesSync(encodeJpg(resizedImage, quality: 50)); //퀄리티 줄임
  return resizedFile;
}

---

use isolate to resize the image

 

repo 폴더에 image_network_repository.dart 파일을 만들어 준다. firestore 와 연결해줄 부분이다. 그 부분에서 try catch를 이용해서 할 것이다. 우선 클래스 네에 Future<void> uploadImageNCreateNewPost(File originImage)를 만들어 주고 async 해준다. 그리고 그안에 try catch를 만들어 준다. 그리고 try안에 final File resize = await compute()를 만들어 준다. compute 안에는 메소드, 파일 순서로 넣어 주면 된다. 그리고 파일크기가 얼마나 변경 되었는지 확인하기 위해 print해본다. share_post_screen에 build 의 return위에 imageNetworkRepository.uploadImageNCreateNewPost(imageFile); 를 넣어줘서 리사이즈 되게 해준다. 실행해 보면 사이즈가 줄어든 것을 알 수 있다.

---

class ImageNetworkRepository {
  Future<void> uploadImageNCreateNewPost(File originImage) async {
    try {
      final File resized = await compute(
          getResizedImage, originImage); // compute는 메소드명, 거기에 들어갈 파일? 로 전달해주면됨.
      originImage
          .length()
          .then((value) => print('original image size: $value'));
      resized.length().then((value) => print('resized image size: $value'));
    } catch (e) {}
  }
}

ImageNetworkRepository imageNetworkRepository = ImageNetworkRepository();

---

show loading while processing(modal bottom sheet)

사진 프로세스를 처리하는 동안 로딩바를 보여주자. 우선 위젯 build 안에서 업로드 하던 부분을 버튼의 onPressed 안에 집어 넣어주고, image_network_repository에서 try의 가장 하단에 await Future.delayed(Duration(second:3)) 으로 프로세스 진행 후 3초정도 기다리게 해준다. 로딩바를 보여주는 방법이 여러개인데 이번에는 showModalBottomSheet를 사용해서 해보자. onPressed 안에 showModalBottomSheet를 만들어 주고 context: context,를 해준다. builder은 (_) => MyProgerssIndicator(),를 해준다. 이때 ()안에 _를 해주는데 원래는 context를 넣지만 여기선 사용을 하지 않으므로 그냥 _를 넣어서 사용해준다. 그리고 isDismissible: false로 해준다. 이것은 해당 모달창이 올라왔을때 바깥부분을 누르면 꺼지게 하는 옵션인데 로딩동안 기다려야 하므로 false를 해준다. enableDrag도 같은 이유로 false로 해준다. 로딩창이 imageNetworkRepository.uploadImageNCreateNewPost(imageFile);를 기다리고 해야 하므로 앞에 await를 해주고 onPressed에 () async {}를 해주면 된다. 그리고 창을 닫아주기 위해 await 후에 Navigator.of(context).pop();를 해준다. 실행해보면 share시에 모달창으로 로딩이 뜨고 3초 후 정도에 꺼지는 것을 알 수있다.

---

          FlatButton(
            onPressed: () async {
              showModalBottomSheet(
                context: context,
                builder: (_) => MyProgressIndicator(),
                //원래 빌더에 ()안에 context가 와야하는데 context를 사용 안하므로 _ 로 해준다
                isDismissible: false,
                //이 창의 바깥 눌렀을때 끝나게 해줄것이냐
                enableDrag: false, //드래그를 하게 해줄 것이냐.
              );
              await imageNetworkRepository.uploadImageNCreateNewPost(imageFile);
              Navigator.of(context).pop(); //await 되고 나면 pop으로 꺼짐짐
            },
            child: Text(
              "Share",
              textScaleFactor: 1.4,
              style: TextStyle(
                color: Colors.blue,
              ),
            ),
          ),

class ImageNetworkRepository {
  Future<void> uploadImageNCreateNewPost(File originImage) async {
    try {
      final File resized = await compute(
          getResizedImage, originImage); // compute는 메소드명, 거기에 들어갈 파일? 로 전달해주면됨.
      originImage
          .length()
          .then((value) => print('original image size: $value'));
      resized.length().then((value) => print('resized image size: $value'));
      await Future.delayed(Duration(seconds: 3,));
    } catch (e) {}
  }
}

---

upload image to firebase storage

firebase storage에 업로드 하기위해서 라이브러리를 사용하자. 해본결과 firebase_storage: ^3.1.6 에서 정상작동하므로 우선 이 버전을 사용해 준다. 기존 try문에서  resized를 해주는 부분을 빼고 지운다. 그리고 postKey를 넘겨 주는 부분과 putFile해주는 부분을 추가해준다. share_post_screen에서 postKey를 넘겨준다.

---

class ImageNetworkRepository {
  Future<StorageTaskSnapshot> uploadImageNCreateNewPost(File originImage, {@required String postKey}) async {
    try {
      final File resized = await compute(
          getResizedImage, originImage); // compute는 메소드명, 거기에 들어갈 파일? 로 전달해주면됨.
      final StorageReference storageReference = FirebaseStorage().ref().child(_getImagePathByPostKey(postKey));
      final StorageUploadTask uploadTask = storageReference.putFile(resized);
      return uploadTask.onComplete;
    } catch (e) {
      print(e);
      return null;
    }
  }

  String _getImagePathByPostKey(String postKey) => 'post/$postKey/post.jpg';
}

ImageNetworkRepository imageNetworkRepository = ImageNetworkRepository();

---

위코드처럼 작성후 uploadImageNCreateNewPost를 넘겨주는 부분에서 postKey:postKey까지 해주고 실행하면 로딩바가 나오고 정상적으로 스토리지에 폴더가 생성된것을 볼 수 있다. 안을 확인하면 업로드가 된것을 볼 수 있다.

 

get image download link and show the image

업로드 된 이미지를 앱으로 가져와서 보여줘 보자. image_network_repository.dart에서 하단에 메소드를 하나 만들어 주자. Future<dynamic>으로 getPostImageUrl(String postKey) 라는 메소드를 만들자. 다운로드 Url을 가져오는 메소드 이다. return에 FirebaseStorage().ref().child(_getImagePathByPostKey(postKey)).getDownloadURL();로 다운로드 경로를 가져오면 된다. 이제 이 부분을 post.dart에서 _postImage()에서 불러오면 된다. 우선 그것을 위해서는 CachedNetworkImage를 StreamBuilder로 감싸준다. 그리고 StreamBuilder을 FutureBuilder<dynamic>으로 변경해주고 stream 옵션을 future로 변경해준다. 그리고 CachedNetworkImage였던 위젯을 Widget로 변경해준다. future 부분에 imageNetworkRepository.getPostImageUrl('이미지가 저장된 postKey'),를 해줘서 Future<dynamic>의 값을 가져온다. 그리고 builder안에 if(snapshot.hasData)일때 기존 return 부분을 다 넣어주고, else 에 MyProgressIndicator를 return해준다. 여기서 로딩 부분이 겹치므로 위젯의 상단에 Widget progress =  MyProgressIndicator( containerSize: size.width, );를 만들어 주고 CachedNetworkImage의 placeholder안의 return에 progress와 방금 만들었던 if문의 else에 return에 progress를 넣어주면 된다. 그럼 정상적으로 피드화면에 방금찍은 사진이 보이는것이 보인다.

---

 

 

post.dart
  Widget _postImage() {
    Widget progress = MyProgressIndicator(
      containerSize: size.width,
    );
    return FutureBuilder<dynamic>(
      future: imageNetworkRepository
          .getPostImageUrl('1637063370169_QMaZBYr2CwfIH3i8ykqLSBWG83l2'),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return CachedNetworkImage(
            //flutter의 이미지는 캐시를 안함 창이 바뀔때마다 새로 불러옴. 그래서 저장해놓은 이미지를 쓰기 위해서 이걸 씀.
            imageUrl: snapshot.data.toString(),
            placeholder: (BuildContext context, String url) {
              return progress;
            },
            imageBuilder: (BuildContext context, ImageProvider imageProvider) {
              return AspectRatio(
                aspectRatio: 1,
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              );
            },
          );
        } else {
          return progress;
        }
      },
    );
  }​

image_network_repository.dart
class ImageNetworkRepository {
  Future<StorageTaskSnapshot> uploadImageNCreateNewPost(File originImage, {@required String postKey}) async {
    try {
      final File resized = await compute(
          getResizedImage, originImage); // compute는 메소드명, 거기에 들어갈 파일? 로 전달해주면됨.
      final StorageReference storageReference = FirebaseStorage().ref().child(_getImagePathByPostKey(postKey));
      final StorageUploadTask uploadTask = storageReference.putFile(resized);
      return uploadTask.onComplete;
    } catch (e) {
      print(e);
      return null;
    }
  }

  String _getImagePathByPostKey(String postKey) => 'post/$postKey/post.jpg';


  Future<dynamic> getPostImageUrl(String postKey){
    return FirebaseStorage().ref().child(_getImagePathByPostKey(postKey)).getDownloadURL();
  }
}

ImageNetworkRepository imageNetworkRepository = ImageNetworkRepository();

---

다음시간엔 storage에 저장한 post 데이터를 데이터베이스에 저장하는법을 해보자.