[프로젝트] 블로그 웹앱 (2) 프로젝트에 패키지 추가

들어가기 앞서...

이전 게시글을 잘 참고해서 Ios 와 Android 플러터 프로젝트가 잘 실행되는 것을 확인한 뒤 패키지를 추가하는 방향으로 진행을 하자!

---

본문으로...

• 우선은 기본적으로 세팅을 해보자 

main.dart

lib > screen > home_screen.dart

• home_screen 에 WebView 를 추가해주자!

body 에 WebView 위젯을 추가해주자! 자동완성으로 패키지를 import해준다.

 

오류가 발생했습니다. 라고 뜨게 되는데, 자바스크립트는 기능적인 것을 담당하는 언어인데 우리가 자바스크립트를 사용할 수있도록

설정해줘야한다

디폴트로 설정 안함으로 되어있는데, 우리가 설정을 해줘야한다.기본 값은 disable 로 설정 되어있다.

• WebView 위젯에 파라미터를 설정해주자!

initalUrl 은 웹뷰를 실행했을때,  기본적으로 켜지는 url 주소이다.

javascriptMode 는 플러터에서 자바스크립트 기능적인 것을 담당하는 것을 사용할 수 있도록 하는 설정이다.

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
		initialUrl: 'https://hitang.tistory.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

 

우리가 자바스크립트를 실행해주기 위해 javascriptMode 를 설정 했다!

이제 appBar 를 추가해주겠다! 

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('hi my blog'),
      ),
      body: WebView(
        initialUrl: 'https://hitang.tistory.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

appBar 의 default background 는 파란색이다.

그리고 Ios 는 글자의 디폴트값이 가운데 정렬이고, Android 는 왼쪽 정렬이다.

서로 설정이 달라서 그런데, 하나로 통일 시켜주면 된다.

appBar 위젯에 centerTitle 이라는 파라미터를 추가해주자!

그리고 백그라운드로 설정해주자!

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('hi my blog'),
        centerTitle: true,
      ),
      body: WebView(
        initialUrl: 'https://hitang.tistory.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }

 

왼) IOS Simualter 오) Android Emulator

 

 

 

Q. 만약 여기서 centerTitle: false 로 설정하고 Ios, Android 의 앱을 실행해 본다면 ?
A. 둘다 왼쪽 정렬로 된다!

 

 

 

---

끝으로...

1. 웹사이트를 간단하게 패키징 하는 방법을 배웠다.

---