[Flutter] Conditional import 하는 방법.

Flutter 사용 시 dart.html 같은 Web 에서만 build 되는 것을 import 할 때 사용하는 방법이다. 

 

간단한 예제로  아래와 같은 트리로 설명해보자면. 

lib / 

     main.dart

     web.dart

     app.dart

     platform_screen.dart

 

 

1. platform_screen.dart 파일을 생성. 

export 'app.dart' if (dart.library.html) 'web.dart';

 

2. app.dart 파일 생성. ( 파일은 app.dart 이고 class 명은 PlatfromWidget )

class PlatformWidget extends StatelessWidget {
  const PlatformWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Text("앱");
  }
}

 

3. web.dart 파일 생성. ( 파일은 app.dart 이고 class 명은 PlatfromWidget )

import 'dart:html' as html;
import 'dart:ui_web' as ui_web;

import 'package:flutter/material.dart';

class PlatformWidget extends StatefulWidget {
  const PlatformWidget({super.key});

  @override
  State<PlatformWidget> createState() => _WebState();
}

class _WebState extends State<PlatformWidget> {
  late html.IFrameElement _iframeElement;
  late html.EventListener _eventListener;

  @override
  void initState() {
    super.initState();
    _initIFrameElement();
    _initEventListener();
  }
  
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: _naverMapWidget(),
      ),
    );
  }

 

 

 

 

4. main.dart 파일에 platform_screen.dart 를 import 후 PlatformWidget() 넣어준다. 

import 'platform_screen.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const PlatformWidget()
    );
  }
}