[Flutter] WebView를 사용하는 방법

pixabay로 부터 입수된 janf93님의 이미지 입니다.

오랜만에 Flutter 관련 포스팅을 하게 되었습니다.
Flutter에서 웹을 띄우는 패키지에 대해서 포스팅을 합니다. 
가장 인기있는 package 는 webview_flutter 입니다.

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

간단하게 만든 소스는 아래와 같습니다.
위의 example 사이트에는 너무 많은 것이 있어서 웹사이트만 딱 띄우는 예제를 포스팅해드립니다.

flutter 에서는 package를 관리하는 pubspec.yaml이 있는데 이곳에 의존성을 추가하셔야합니다. 

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

class MusicList extends StatefulWidget {
  const MusicList({Key? key}) : super(key: key);

  @override
  State<MusicList> createState() => _MusicListState();
}

class _MusicListState extends State<MusicList> {

  final Completer<WebViewController> _controller = Completer<WebViewController>();


  @override
  void initState() {
    super.initState();
    if(Platform.isAndroid){
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    var screenHeight = MediaQuery.of(context).size.height;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('나비드 음악'),
          automaticallyImplyLeading: true,
        ),
        body: Builder(builder: (BuildContext context){
          return WebView(
            initialUrl: 'https://www.genie.co.kr/detail/artistInfo?xxnm=79678096',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
          );
         },
        ),
      ),
    );
  }
}

예제에 initialUrl 만 변경하시면 원하시는 사이트를 띄우실 수 있으실꺼에요 ^^

실행화면입니다.

제가 좋아하는 가수 나비드의 음악이 올려진 사이트를 flutter 에서 올려보았습니다. 
매번 프로젝트를 다른 언어로 하니 힘드네요 
flutter 를 좋아하는 마음으로 올려봅니다.
즐거운 코딩되세요.