[Flutter] Flutter 와 WebView 추가하기

flutter 개발에 입문하는 전진시입니다.

원래는 네이티브 방식으로 iOS와 android를 동시 개발중이었는데 제가 주로 개발하는 프로젝트들이 하이브리드 앱이기 때문에

크로스 플랫폼 방식인 flutter에 발 담궈보려 합니다.

 

Flutter

Flutter는 여러 플랫폼용 앱을 만드는 크로스 플랫폼 개발 프레임워크입니다.

iOS와 android 뿐만 아니라 웹, 데스트 톱 앱 개발도 가능합니다.

처음엔 React Native로 개발을 하려고 했다가 Flutter로 전향했습니다. 이유는 환경셋팅에서 제대로 막혀서,,~

환경셋팅하는데만 일주일 잡아먹은것 같은데 다른 분들은 어떻게 수월하게 진행한건지 너무 궁금합니다,,!

 

flutter의 장점은

• 낮은 진입장벽
• 높은 네이티브 성농
• 예쁜 UI

이 있습니다.

 

** flutter는 개발 언어로 Dart를 사용한다.

 

Flutter 프로젝트에 WebView 추가하기

* 먼저 Android studio - Settings... 에 들어간 후 Plugins 에서 Flutter를 설치한 후 

    Flutter SDK 경로까지 셋팅되었다는 가정하에 시작하겠습니다. 

 

1. pubspec.yaml 파일에 dependencies 추가

 

webview_flutter: ^0.3.24

 

위 코드를 추가하기

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: ^0.3.24

 

 

2. iOS info.plist에 키 값 추가하기

<key>io.flutter.embedded_views_preview</key>
   <string>YES</string>
   <key>NSAppTransportSecurity</key>
   <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
     <key>NSAllowsArbitraryLoadsInWebContent</key>
     <true/>
   </dict>

 

3. AndroidManifest.xml 파일 application 태그에 값 추가하기

android:usesCleartextTraffic="true"

 

Flutter에서 WebView를 사용하기 위한 셋팅은 이정도면 끝난 것 같습니다.

Android 네이티브를 개발할 때 WebView를 사용하려면 인터넷 사용을 위해 permission을 받았어야 하는데

Flutter에서는 이 부분이 생략되는 것 같다. WebView 라이브러리에 포함되어 있을수도? 

 

그럼 main.dart 로 이동합시다.

 

4. pubspec.yaml에 추가한 종속성을 import 해줍니다.

import 'package:webview_flutter/webview_flutter.dart';

 

5. Scaffold 안에 소스를 추가해줍니다. 

저는 naver를 띄워볼거에요 

 

6. 시뮬레이터를 iPhone 13(임의)으로 설정하고 실행합시다

7. 완성 쟌

 

일단 iOS 시뮬레이터로만 테스트 해봤는데요. android 애뮬레이터로 실행해도 정상동작할 듯 싶습니다.

다음 포스팅에서는 main.dart 안에서 사용되는

StatelessWidget, StatefulWidget 와 Scaffold 등 어떤 역할을 하는지 알아보겠습니다. 

 

 

---

WebView에서 만난 에러

 

don't support null safety

 

 

해결방법은 

 

Edit Configurations에 들어가서

Additional run args 에 --no-sound-null-safety 값을 추가하고 apply 후 다시 실행해보자