플루터(Flutter) 웹뷰(WebView)

WebView?

앱 안에 웹사이트를 띄우는 창입니다. 

모바일안에 브라우저를 넣는 개념입니다. 

저는 웹 개발만 해왔기 때문에 webview로 접근해보도록 하겠습니다. 

 

pub.dev

Flutter와 Dart에서 사용할 수 있는 라이브러리를 다운받을 수 있는 공식 사이트입니다. 

pub.dev 접속하여 web view 검색하여 아래 라이브러리의 제목 옆에 있는 복사 버튼을 눌러주세요. 

프로젝트로 돌아와서, pubspec.yaml 파일에 depenencies 찾아서 복사해온 값을 아래와 같이 넣어주세요. 

그러면 최신 버전의 webview_flutter 가 추가 될 것 입니다. 

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.8
  webview_flutter: ^4.13.0

우측 상단쯤에 있는 pub get 누르면 console 뭐라뭐라 뜨면서 설치가 진행됩니다. 

 

AppBar

앱 화면 맨 위에 있는 가로줄을 의미합니다. 

보통 제목, 아이콘, 메뉴 버튼 등이 들어 갑니다. 

lib-view-home.dart 파일을 생성 및 열어서 아래와 같이 코딩합니다. 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('memory man'),
        centerTitle: true,
      ),
    );
  }
}

main.dart 파일에서 아래와 같이 코딩하고 앱을 실행합니다. 

상단의 초록색 + 텍스트가 appbar 입니다. 

import 'package:flutter/material.dart';
import 'package:mobile_study/view/home.dart';


void main() {

  runApp(
      MaterialApp(
        home: Home(),
      )
  );
}

 

home.dart 파일에다가 webview 패키지를 추가 해보도록 하겠습니다. 

상단에 import 추가해주시면 됩니다. 

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

class Home extends StatelessWidget {
  WebViewController controller = WebViewController();

  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('memory man'),
        centerTitle: true,
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

main 파일로 돌아가서 WidgetsFlutterBinding.ensureInitialized 함수를 추가해주세요. 

앱이 시작되기 전에 flutter의 필수 준비 작업을 시켜주는 코드로 앱이 실행하기전 초기화가 필요할 때 사용합니다. 

webview의 경우 앱이 실행하기전 설정이 필요하므로 해당 함수를 사용합니다. 

import 'package:flutter/material.dart';
import 'package:hello_world/view/home.dart';


void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
      MaterialApp(
        home: Home(),
      )
  );
}

이제 web view를 표현해보도록 하겠습니다. 

home.dart 파일에 불러올 url과 해당 url을 읽는 코드를 작성해주세요. 

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

final url = Uri.parse('https://memoryman.tistory.com/page/page-test');

class Home extends StatelessWidget {
  WebViewController controller = WebViewController()
  ..loadRequest(url);


  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('memory man'),
        centerTitle: true,
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

아래 코드를 통해서 app bar에 버튼을 추가하고 해당 버튼을 클릭했을 때, 새로운 url2 로 이동하도록 되어있습니다. 

최초 앱이 실행되었을 때는 프로필 페이지이지만 홈 버튼을 누르는 순간 네이버로 이동합니다. 

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

final url = Uri.parse('https://memoryman.tistory.com/page/page-test');
final url2 = Uri.parse('https://www.naver.com');

class Home extends StatelessWidget {
  WebViewController controller = WebViewController()
  ..loadRequest(url);


  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('memory man'),
        centerTitle: true,
        actions: [
          IconButton(onPressed: (){
            controller.loadRequest(url2);
          }, icon: Icon(Icons.home))
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}