웹뷰 앱 만들어 보자!

1. 플러터 프로젝트를 만든다.

2. android 폴더 내 세팅을 한다.

 2-1 android - app - build.gradle >> 파일중간에 minSdkVersion이 나오는데 뒤에꺼 지우고 17로 써준다.

minSdkVersion 17

 2-2 android - app - src - AndroidManifest.xml에서 3째줄과 마지막줄을 추가해 준다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.t1_blog">
    <uses-permission android:name="android.permission.INTERNET" />
   <application
        android:label="t1_blog"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">

<uses-permission android:name="android.permission.INTERNET" />

 

android:usesCleartextTraffic="true">

 

3. ios 폴더로 이동한다

  ios - Runner - info.plist파일에서 이걸 추가한다. <dict>를 찾고 그 밑에 아래 소스 추가하기

<dict>
     <key>NSAppTransportSecurity</key>
     <dict>
       <key>NSAllowsArbitraryLoads</key>
       <true/>
     </dict>

4. 웹뷰 모듈을 설치한다. 

    터미널에 flutter pub add flutter_inappwebview 을 친다

   터미널에 flutter pub get 을 친다.

 

5. lib폴더의 main.dart파일을 아래와 같이 코딩한다.

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'dart:async';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Completer<InAppWebViewController> webViewFuture = Completer<InAppWebViewController>();
  late InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("웹뷰"),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () async {
              final controller = await webViewFuture.future;
              controller.loadUrl(urlRequest: URLRequest(url: Uri.parse("https://www.naver.com")));
            },
            icon: Icon(Icons.home),
          ),
          IconButton(
            onPressed: () async {
              final controller = await webViewFuture.future;
              controller.loadUrl(urlRequest: URLRequest(url: Uri.parse("https://www.google.com")));
            },
            icon: Icon(Icons.school),
          ),
          IconButton(
            onPressed: () async {
              final controller = await webViewFuture.future;
              controller.loadUrl(urlRequest: URLRequest(url: Uri.parse("너의 주소")));
            },
            icon: Icon(Icons.bathroom_outlined),
          ),
          IconButton(
            onPressed: () {
              _webViewController.goBack();
            },
            icon: Icon(Icons.arrow_back),
          ),
          IconButton(
            onPressed: () {
              _webViewController.goForward();
            },
            icon: Icon(Icons.arrow_forward),
          ),
        ],
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('https://blog.codefactory.ai')),
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            javaScriptEnabled: true,
          ),
          android: AndroidInAppWebViewOptions(useHybridComposition: true),
        ),
        onWebViewCreated: (controller) {
          _webViewController = controller;
          webViewFuture.complete(controller);
        },
      ),
    );
  }
}

일단 고대로 붙여넣기 해서 해보고, 다른건 검색해서 해본다.

 

그러면 웹뷰는 끝~! 

 

웹주소로 이동이랑 뒤로가기 앞으로가기는 완성이다.