WebView 사용법

목차
1. WebView
2. AppBar 

 

WebView 를 이용하면 웹사이트를 앱으로 띄울수있다.

 

1. https://pub.dev/ 접속 

Dart packages

 

2. 설치 플러그인 검색

ex) webview

- likes,인기도가 높은 플러그인일수록 좋다.  

flutter.dev 는 구글 플러터 공식 팀이다. -> 되도록 공식팀에서 만든걸 받아야 유지보수 및 호환성이 좋다.

3. 복사해서 pubspec.yaml 파일의 dependencies 위치 밑에다 붙여넣기 

주의! : 적용후 pub get 꼭 눌러줘야됨

4.플러그인 내부 설명서 따라서 설정 변경 

 

platformException 이 날 경우 

console 에서 앱 정지후

terminal 에서 아래 flutter clean 실행 후 다시해본다. 

flutter clean

 이렇게 하는 이유는 네이티브 코드가 ios , android 별로 작성돼있는데, 처음부터 다시 패키징을 해줘야 

ㄴ네이티브 코드를 제대로 사용할 수있다. 

 

잘되는지 확인

-> 자동완성으로 WebView 가 떠야한다.

WebVIew 를 이용하면, 웹사이트를 앱으로 볼수있다. 

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        body:WebView(
          initialUrl: 'https://blog.codefactory.ai', // 앱으로 보려는 웹사이트 url
          javascriptMode: JavascriptMode.unrestricted, // 자바 스크립트 실행법(유튜브 링크)
        ),
      );
  }
}

보려는 사이트를 initalUrl 에 넣으면

아래같이 뜸 

유튜브 링크를 뜨게 만들려면 javascriptMode 를 unrestricted 로 설정해주면 된다. 

좌 적용 전 / 우 적용 후 

 

AppBar 

AppBar란? : 앱 상단의 타이틀 배너 

 

색깔 과 정렬 

좌 적용 전 / 우 적용 후

return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange, // 타이틀 색
          title: Text('Code Factory'), // 타이틀 명
          centerTitle: true, // 타이틀 가운데 정렬
        ),
        body:WebView(
          initialUrl: 'https://blog.codefactory.ai', // 앱으로 보려는 웹사이트 url
          javascriptMode: JavascriptMode.unrestricted, // 자바 스크립트 실행법(유튜브 링크)
        ),
      );