[펫버틀러] 반려 동물 고민 상담 앱 - 개발 10 일차 (이미지/동영상 첨부 업로드 시 로딩 바 prograss loading bar )

• 서베에 동영상올리고 프로그래스 바(prograss bar) 를 통해 업로드 상태를 확인해야한다.
• 우선 서버 업로드시 진행상황을 알 수 있는 로직을 넣어야한다.
• 아래 두개의 dependencies 로 적용했다.
• dio 패키지는 http 패키지를 이용해서 좀더 편하게 post / get 서버 데이터를 받아 오는데 

 

dependencies:
  dio: ^4.0.6
  flutter_easyloading: ^3.0.5

• dio 패키를 이용해서 우선 OnSendPrograss 통해 업로드 진행상황을 받아 온다.

Future<void> uploadFileServer(File image) async {
    String fileName = DateTime.now().millisecondsSinceEpoch.toString();
    String uploadurl = "$server/file_upload.php";
    FormData formdata = FormData.fromMap({
      "file": await MultipartFile.fromFile(image.path, filename: fileName
          //show only filename from path
          ),
    });
    var dio = Dio();
    Response response = await dio.post(
      uploadurl,
      data: formdata,
      onSendProgress: (int sent, int total) {
        Future.delayed(Duration(milliseconds: 10)).then((value) {
          final currentprograss = (sent / total);
          EasyLoading.showProgress(currentprograss,
              status: '${(currentprograss * 100).toStringAsFixed(0)}%');
          if (currentprograss >= 1) {
            EasyLoading.dismiss();
          }
        });
        //update the progress
      },
    );

    if (response.statusCode == 200) { // 업로드 후 메모 테이블에 등록
      setState(() {
        isLoading = false;
        onSendMessage("$server/uploads/$fileName",
            TypeMessage.video);
      });
      //Fluttertoast.showToast(msg: response.toString() ?? response.toString());
      //print response from server
    } else {
      print("Error during connection to server.");
      Fluttertoast.showToast(
          msg: response.toString() ?? "Error during connection to server.");
    }
 
  }

 

dio | Dart Package

 

• 그런데  받아온 프로그래스 진행%를 화면에 뿌리기위해 Easyloading 을 이용하는데 바로 적용은 안돼고 StatelessWidget 을통해 EasyLoading.init()  초기화화고 home 을 statefulWideget으로 감싸야 한다. 이것 때문에 한참 해맷다.

 

class MemoPage extends StatelessWidget {
  final MemoPageArguments arguments;
  MemoPage({Key? key, required this.arguments}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '메모페이지',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MemoBody(arguments: arguments),
      builder: EasyLoading.init(),
    );
  }
}

class MemoBody extends StatefulWidget {
  MemoBody({Key? key, required this.arguments}) : super(key: key);

• 또는 main.dart를 수정하여야한다.

 

flutter_easyloading | Flutter Package

 

개발하다 보면 직접만드는 것보다 만들어 놓은 패키를 이용하는데 사용법을 몰라 고생하는 경우가 있다. 이럴땐 구글링을 통해 찾아보는데 잘 정리해 두면 다음번에서 활용 가능 하다.