<Flutter> 빌드 페이지 만들기

빌드페이지를 만들기 위해 구현한 주요 기능을 먼저 작성해보았다
1. 파일 가져오기 버튼 클릭시, 로컬에서 내 파일 가져오기
2. 드레그 앤 드롭으로 로컬에서 내 파일 가져오기
3. 파일전송 버튼 클릭 시, fireStorage로 파일 전송하기(파일은 날짜별로 분류)
4. 분류된 파일을 최신 순으로 페이지에 나타나고 클릭 시, URL로 다운로드
5. 더보기 버튼으로 파일 개수 조절하기

1.파일 가져오기

file_picker 라이브러리를 사용해서 구현하였다
하나의 파일만 가져와서 업로드 할거라 배열이 아닌 uint8Lint에 파일을 저장
변수 fileName에 파일의 이름을 넣고
변수 file에 파일 데이터를 저장

file !=null이면 가져온 파일 이미지를 보여주고
file =null이면 파일가져오기 버튼을 눌러서 파일 선택

import 'package:file_picker/file_picker.dart';

  Uint8List? file;
  String? fileName;

//내 브라우저에 있는 파일 업로드
  void _onpickFiles() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['csv', "png", "jpg", "binary", "pdf"],
    );
    if (result != null && result.files.isNotEmpty) {
      setState(() {
        file = (result.files.first.bytes);
        fileName = result.files.first.name;
      });
    } else {
      print("이미지를 업로드하세요");
    }
  }
  
 Column uploadFile(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: file != null
          ? [
              ...[
                GestureDetector(
                  onTap: onDeleteFile,
                  child: SizedBox(
                    width: 200,
                    height: 200,
                    child: Image.memory(file!),
                  ),
                ),
              ],
            ]
          : [
              const Text("파일을 끌어 놓아주세요"),
              const SizedBox(
                height: 20,
              ),
              CupertinoButton(
                onPressed: _onpickFiles,
                color: Theme.of(context).primaryColor,
                child: const Text('파일 가져오기'),
              ),
              const SizedBox(
                height: 50,
              ),
            ],
    );
  } 

2. 파일 드레그 앤 드롭

드래그앤드롭은 destop_drop 라이브러리를 사용해서 구현

import 'package:desktop_drop/desktop_drop.dart';

//파일 드레그 결과
  void onDragDone(details) async {
    if (details != null && details.files.isNotEmpty) {
      fileName = details.files.first.name;
      file = await details.files.first.readAsBytes();
      setState(() {});
    }
  }

  //드레그 영역진입
  void onDragEntered(details) {
    _isDrag = true;
  }

  //드레그 영역아웃
  void onDragExited(details) {
    _isDrag = false;
  }
  
   DropTarget(
              onDragDone: onDragDone,
              onDragEntered: onDragEntered,
              onDragExited: onDragExited,
              child: Container(
                width: 600,
                height: 300,
                decoration: BoxDecoration(
                  color: Colors.grey.shade100,
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(
                    color: file != null || _isDrag
                        ? Colors.blue.shade600
                        : Colors.black26,
                    width: 1.0,
                  ),
                ),
                child: uploadFile(context),
              ),
            ),

페이지를 만들면서 생겨난 질문들 모음~~~

🏈 질문1: flutter에서 메소드와 위젯으로 extract하는 이유가 뭐고 어떤 상황에서 사용하는 것이 더 좋을까요?

메소드
코드의 일부분을 기능단위로 분리하고자 할때 사용
동일한 기능이 여러 곳에서 사용되어야할때 메소드 추출이 유용

위젯
UI를 구성하는 일부분을 재사용하고자 할때 사용
특히 다른 화면에서도 사용되어야할 위젯을 추출하여 재사용성을 높이고 싶을때 위젯화

한줄요약=> 코드의 특정 부분을 분리하고 재사용할 목적이라면 메소드 사용, UI구성 요소를 재사용하고 싶다면 위젯으로 추출하는 것이 좋다

🏈 질문2: initState와 futureBuilder의 차이점이 뭔가요?

initState 는 주로 위젯이 처음 만들어질 때 한 번만 실행해야하는 초기화 코드를 포함한다
데이터를 미리 불러와야 하거나 초기 설정을 해야할때 사용

FutureBuilder 는 비동기 작업의 결과를 기다렸다가 UI를 갱신해야할때 사용
주로 비동기 작업을 수행하고 결과에 따라 UI를 변경해야할때 사용한다

🏈 질문3: XFile 과 Uint8Lint 중에 뭘 써야하죠?

XFile
파일 시스템에서 파일을 나타내는 클래스로 파일을 나타내고 선택된 파일을 처리하는데 사용

Uint8List
Dart에서 제공하는 클래스로 바이트 배열을 나타낸다
주로 바이너리 데이터를 다루는데 사용
dart:typed_data 라이브러리에서 제공(다양한 타입의 바이트 데이터를 다루기 위한 클래스와 유틸리티를 제공)