[플러터] 16. 웹 앱 만들기 (2/2) - 구현

웹 앱을 만들기 위한 사전 작업이 끝났다.

이제 진짜 앱을 만들어 보자!!

 

1. 앱이 처음 실행됐을 때 보여줄 화면.

 - lib/main.dart

import 'package:[프로젝트 이름]/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(),
    ),
  );
}

 - import : 다른 파일의 위젯이나 변수등을 불러와서 사용하는 경우에 사용.

  √ 다른 파일에서 불러올 경우 : package:[프로젝트의 이름]/[lib 폴더로 부터의 위치]/파일명(.dart)

  √ 플러그인 기능 사용 시 : package:[플러그인 이름]/[플러그인 이름].dart

 

 - MaterialApp 위젯은 플러터 앱의 최상위 위젯이며 앱이 처음 실행됐을 때 보여줄 화면을 home 매개변수에 입력할 수 있다. 여기서는 HomeScreen() 을 불러와서 첫화면으로 설정한다.

 

2. 홈 화면에서 사용할 HomeScreen 정의

 - lib/screen/home_screen.dart

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

class HomeScreen extends StatelessWidget {
  WebViewController? controller; // 컨트롤러 변수 생성

  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( // 앱바 위젯 추가
        // 배경색 지정
        backgroundColor: Colors.orange,
        // 앱 타이틀 설정
        title: Text('Childeye Blog'),
        // 가운데 정렬
        centerTitle: true,
        actions: [
          IconButton(

            // 눌렀을 때 콜백 함수 설정
            onPressed: () {
              if (controller != null) {

                // 웹뷰에서 보여줄 사이트 실행하기
                controller!.loadUrl('https://childeye.tistory.com');
              }
            },

            // 홈 버튼 아이콘 설정
            icon: Icon(
              Icons.home,
            ),
          ),
        ],
      ),
      body: WebView(  // WebView 추가하기
        initialUrl: 'https://childeye.tistory.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          this.controller = controller; // 위젯에 컨트롤러 저장
        },
      ),
    );
  }
}

 - HomeScreen 위젯 : 웹 앱이 실행되면 가장 먼저 보이는 위젯.

 

 - 웹뷰 컨트롤러 : 홈 아이콘을 눌렀을 때 웹뷰 화면을 변경하려면 위젯 제어 기능이 필요하다. 이 기능을 하는 것이 웹뷰 컨트롤러가 담당한다.

  √ WebViewController 를 저장할 변수를 선언한다.(controller 변수)

  √ 웹뷰 위젯이 생성되면 onWebViewCreated 함수가 실행되는데 이때 WebViewController 를 매개변수로 받는다. 이 값을 controller 변수에 저장하면 웹뷰를 제어할 수 있다.

 

 - 화면 구성 : 앱바와 웹뷰로 이루어져 있음.

  √ 앱바 : 제목과 홈 버튼을 렌더링.

  √ 웹뷰 : 지정한 URL(childeye.tistory.com)의 내용을 표시

 

 - 앱바(AppBar)

  √ HomeScreen 위젯에 앱바를 추가, 제목을 넣어주고 배경색을 설정한다.

  √ 앱바 위젯은 일반적으로 Scaffold 위젯의 appBar 매개변수로 넣어준다.

  √ AppBar 의 배경색을 지정한다.

  √ AppBar 의 중간에 Text 위젯을 넣어주고 가운데 정렬한다.

  √ AppBar 의 actions 매개변수에 홈아이콘을 생성하고 제어한다. actions 매개변수에 위젯을 넣으면 앱바의 오른쪽 끝에 순서대로 위젯이 배치된다.

  √ 홈아이콘을 눌렀을 때 실행할 콜백 함수를 onPressed 매개변수에 정의한다. WebViewController 의 load() 함수를 이용하여 URL 로 이동시킨다. controller 변수에 ! 기호를 추가하는 이유는 controller 변수가 null 이 가능한 타입으로 선언됐기 때문이다. 위 코드에서는 controller 변수가 null 이 아닌 경우에만 load() 함수를 호출하니 ! 를 사용하여 controller 변수는 절대로 null 이 될수 없다고 표현한 것이다.

 

 - 웹뷰(WebView)

  √ 웹뷰 플러그인을 import 하여 사용한다.

  √ Scaffold 의 body 매개변수에 WebView 위젯을 넣는다.

  √ 기본 URL 을 설정하고 자바스크립트도 실행할 수 있도록 한다.

 

에뮬레이터를 실행시키면 다음과 같은 결과물이 된다.

 

웹 앱 완성!!