[flutter] Error: Undefined name 'window'.

플러터로 앱 뿐만 아니라 웹까지 개발할 일이 생겼습니다.

 

모바일로 web접속할 경우에는 앱 다운로드 유도 페이지를 만들어야 하는데 OS 는 어떻게 체크해야할까 찾아보니 html 속성에 userAgent 라는걸 이용해서 접속 기기를 파악할 수 있다는걸 알았습니다.

 

userAgent 를 사용하기 위해서는 dart:html 을 import 해서 사용해야 합니다.

 

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:html' as html;

class MobileWeb extends StatelessWidget {
  const MobileWeb({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
	...,
      	SizedBox(
          width: double.infinity,
          height: 70,
          child: GestureDetector(
            onTap: () async {
              print('스토어 다운로드 버튼 눌림');

              bool isAndroid() {
                return html.window.navigator.userAgent.contains("Android");
              }

              bool isIOS() {
                return html.window.navigator.userAgent.contains("iPhone") ||
                // html.window.navigator.userAgent.contains("iPad") ||
                // html.window.navigator.userAgent.contains("iPod");
              }

              if (kIsWeb) {
                if (isAndroid()) {
                  // 안드로이드에서 실행 중인 코드
                  print('플레이 스토어 이동');

                  Fluttertoast.showToast(msg: 'play store', gravity: ToastGravity.CENTER);
                } else if (isIOS()) {
                  // iOS에서 실행 중인 코드
                  print('앱 스토어 이동');
                  
                  Fluttertoast.showToast(msg: 'app store', gravity: ToastGravity.CENTER);
                } else {
                  // 다른 모바일 플랫폼에서 실행 중인 코드
                  print('안드로이드 또는 iOS 기기가 아닙니다.');
                  
		  Fluttertoast.showToast(msg: '어디로?', gravity: ToastGravity.CENTER);
                }
              }
            },
            child: Container(
                decoration: const BoxDecoration(color: Colors.black),
                child: const Center(
                    child: Text(
                  '스토어 다운로드 이동',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ],
    ));
  }
}

< 기기별 OS 환경 확인하기 위한 코드 >

 

우선 빌드해서 확인해보려고 실제 안드로이드 단말기와 연결한 후 실행 버튼을 눌렀는데 아래처럼 빌드 에러가 나타났습니다.

 

Error: Undefined name 'window'.

 

import 에 대한 경고

 

경고 내용을 확인해보니 flutter web library 전용은 아무데나 사용하지 못하게끔 되어있다고 하네요.

Documentation 의 내용은 아래 링크에 남겼습니다.

 

https://dart-lang.github.io/linter/lints/avoid_web_libraries_in_flutter.html 

 

 

실행을 해봐야 제대로 분기 처리 되었는지 알 수 있는데 그게 안되네요.

이상없이 실행할 수 있는 방법을 찾아봅니다.

 

stack over flow 를 찾아보니 universal_html 을 이용하면 괜찮다고 하네요.

 

pub.dev 에서 universal_html 을 찾아 인스톨 해줍니다.

 

그리고 아까전에 선언한 코드에서 import 내용만 변경해줍니다.

// import 'dart:html' as html;
import 'package:universal_html/html.dart' as html;

...

 

빌드해보니 아무런 문제 없이 앱이 실행 됩니다.

 

 

 

그리고 실제 기기로 접속해서 확인할 수 있도록 아래 내용을 터미널에 입력하였습니다.

 

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

< 같은 네트워크망에서 브라우저 접속할 수 있도록 하는 명령어 >

 

안드로이드 기기와 iOS 기기의 브라우저로 각각 들어가서 확인해보니 OS 별로 잘 실행 되는것을 확인할 수 있었습니다.

 

Platform 을 이용한 OS 분기 처리가 아니라 web browser에서 분기 처리가 필요한분들은 내용 참고하시면 도움이 될 것 같습니다.