[Flutter] 멀티패키지 적용

홍석·2024년 3월 10일

플러터 멀티패키지를 통해 <웹과 앱의 공통 코드>들을 유지하면서 개발해보자
또한, 앱의 구조를 기능별로 분리하면서 하나의 모노리스 구조를 논리적으로 분할해보자

멀티패키지 세팅

초기 세팅 - 빈 디렉토리에서 시작

mkdir apps data

앱 추가

cd apss
flutter create --platform=ios,android ./mobile_app
flutter create --platform=web ./web_app
cd ..
flutter create --template=package core
cd data
flutter create --template=package model
flutter create --template=package api

그다음
1. android studio -> settings-Lauages & Frameworks -> Flutter에서
Flutter SDK path 설정하기
2. file -> Project에서
SDK, Language level 설정하기


이후 yaml에서 path를 지정해주면 된다


멀티패키지 활용

dio인터셉터 의존성주입
-> 웹과 앱에서 jwt 재발급 로직을 구현할때, 앱에서는 재발급요청을 보낼때, fcmToken을 같이 보내는 경우가 있을 수 있다.

그럴경우 인터셉터의 로직분기처리가 필요하기 때문에
ApiClient에서 필요한 dio를 앱패키지와 웹패키지에서 따로 주입해주자!


///////// data패키지 api_client.dart /////////
final apiClientProvider = Provider<ApiClient>((ref) {
  ///main file에서 override를 통해 의존성 주입
  throw UnimplementedError();
});


()
abstract class ApiClient {
  factory ApiClient(Dio dio, {String baseUrl}) = _ApiClient;

}

///////// apps패키지 main.dart /////////
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    ProviderScope(
      overrides: [
        apiClientProvider.overrideWith((ref){
          final dio = ref.watch(dioProvider);
          return ApiClient(dio, baseUrl: BASE_URL);
        }),
      ],
      child: const App(),
    ),
  );
}

///////// apps패키지 dio.dart /////////
final dioProvider = Provider<Dio>((ref) {
  final dio = Dio();
  dio.interceptors.add(CustomInterceptor());
  return dio;
});

class CustomInterceptor extends Interceptor{
	///jwt관련로직
}
profile
bayy1216.tistory.com <- 블로그 이전했습니다 🥹

0개의 댓글