Flutter WebView 기본 소스

● main.dart / 2025.03.21 기준 / flutter 4.4.2 / 버전에 따라 실행이 되지 않을 수 있음

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';


String firstUrl = "https://naver.com";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView 예제',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyWebView(),
    );
  }
}


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

  @override
  State<MyWebView> createState() => _MyWebViewState();
}


class _MyWebViewState extends State<MyWebView> {
  late final WebViewController controller;
  bool isLoading = true;
  String currentUrl = firstUrl;

  @override
  void initState() {
    super.initState();
    
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            setState(() {
              isLoading = true;
              currentUrl = url;
            });
          },
          onPageFinished: (String url) {
            setState(() {
              isLoading = false;
            });
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('웹뷰 오류: ${error.description}');
          },
        ),
      )
      ..loadRequest(Uri.parse(currentUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView 예제'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              controller.reload();
            },
          ),
        ],
      ),
      body: Stack(
        children: [
          WebViewWidget(controller: controller),
          if (isLoading)
            const Center(
              child: CircularProgressIndicator(),
            ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () async {
                if (await controller.canGoBack()) {
                  controller.goBack();
                }
              },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_forward),
              onPressed: () async {
                if (await controller.canGoForward()) {
                  controller.goForward();
                }
              },
            ),
            IconButton(
              icon: const Icon(Icons.home),
              onPressed: () {
                controller.loadRequest(Uri.parse(firstUrl));
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

 

● pubspec.yaml 파일 안에서 dependencies 부분을 찾아 "webview_flutter: ^4.4.2" 입력(들여쓰기 매우 중요)

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.2

 

 

● 안드로이드 폰을 위한 내용 추가 

- /android/app/build.gradle 파일 열기 / compileOption 부분을 찾아 / "minSdkVersion 19" 부분 추가(들여쓰기 중요)

    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION        minSdkVersion flutter.mi  
        minSdkVersion 19

 

 

● 아이폰을 위한 내용 추가

- /ios/Runner/info.plist 파일 열기 / 아래 내용을

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

 

- 아래 사진처럼 추가

 

 

그리고 다시 실행하면