티스토리 뷰

Flutter

Flutter webview/플러터 웹뷰

아이언 베어 2020. 12. 12. 02:01

flutter app webview

플러터앱에서 웹사이트 보기

 

 


 

 

 

 

 

먼저 안드로이드 스튜디오에서 플러터 프로젝트를 만든다.

 

 

 

 

 

ios -> Runner ->info.plist에 <false/>하단에

<key>io.flutter.embedded_views_preview</key> <string>YES</string>

을 입력한다.

 

 

 

 

 

왼쪽 목록에서 pubspec.yaml file을 연다.

 

 

 

 

 

dependencies

webview_flutter: ^1.0.7를 추가 한 후 Pub get을 누른다. 

 

 

 

 

 

Process finished with exit code 0 란 메세지가 나타나면 성공.

 

 

 

 

 

main.dart 파일에 기존에 있던 코드를 지우고 다음 코드를 붙여넣기한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://ironbearb.tistory.com/',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}
cs

 

 

 

 

어플을 실행해보면 다음과 같이 화면이 나온다.

 

 

 

 

 

 

 

 

'Flutter' 카테고리의 다른 글

Flutter Building layouts Tutorial  (0) 2020.12.13
Introduction to widgets  (0) 2020.12.13
Row and Column classes  (0) 2020.12.12
Flutter crossAxisAlignment property  (0) 2020.12.12
Flutter layout practice/플러터 레이아웃 연습  (0) 2020.12.12