Flutter 플랫폼 환경에 따라 import 다르게 적용하기

목적

공식문서를 읽는데 어려움이 있어서 Firebase FCM을 구현방법을 찾는 도중 9.x.x 최신버전 적용에 대한 자료를 찾았다. 플러터 웹과 앱 동시에 알림을 구현하는 예제를 발견하여서 플랫폼 환경에 따라 import를 다르게 적용하는 선수지식이 필요하여 포스팅을 하게 되었다.

폴더 및 파일 구조가 중요함

lib
|   main.dart
|	
\---check
    |
    +---CheckFile.dart
    |
    |
    \---checkPack
        | 
        +---err.dart
        |
        |
        +---web.dart [html패키지를 사용한 위젯 구성]
        |
        |
        \---app.dart [io패키지를 사용한 위젯 구성]

import 되는 파일마다 같은이름, 같은타입을 반환하는것도 매우 중요하다.

err.dart

String get pr => "환경을 알수 없는 오류입니다.";

app.dart

String get pr => "앱 환경 입니다.";

web.dart

String get pr => "웹 환경 입니다.";

checkFile.dart

export 'package:flutter_app/check/checkPack/err.dart
if(dart.libray.io) 'package:flutter_app/check/checkPack/app.dart
if(dart.libray.html) 'package:flutter_app/check/checkPack/web.dart";

main.dart

import 'package:flutter/material.dart';
// main.dart에서 import는 중간에서 분기해주는 checkFile.dart를 불러옵니다.
import 'package:flutter_app/check/checkFile.dart' as check;

void main() => runApp(
	MaterialApp(
    	title: "flutter 2 app with web",
        onGenerateRoute: (RouteSettings rs){
        	return MaterialPageRoute(
            	settings: RouteSettings(name: '/'),
                maintainState: false,
                builder: (BuildContext context) => LoginPage()
);

login_page.dart 사용

Text(${check.pr}),