[플러터(flutter) 입문] 블로그 웹 앱 만들기

1.사전지식

• material design & app bar 두 가지 지식을 이용하여 UI를 구성

app bar : 앱 맨 위에 페이지 이름이나 앱 이름이 적혀있는 것. 이런 형태의 UI를 그려주는 위젯

1) 콜백 함수

: 일정 작업이 완료되면 실행되는 함수 - 특정 조건이 성립될 대 실행

2) 웹뷰 위젯

: 프레임워크에 내장된 브라우저를 앱의 네이티브 컴포넌트에 임베딩하는 기능

• 앱에서 웹 브라우저 기능을 구현해주는 기능 (속도가 느리고, 애니메이션이 부자연스러움)
• 기존에 만든 웹사이트를 손쉽게 활용 가능
• 웹뷰의 위젯 속성 p.179 참고

3) 안드로이드와 IOS 네이티브 설정

: 최소한의 네이티브 설정은 필요 (해당 플러그인의 pub.dev에서 확인)

• 네이티브 설정이 필요한 플로그인은 보통 플로그인 홈페이지에 설정법이 상세히 기재됨.

2. 사전 준비

1. 프로젝트 생성
   1) pubsepc.yaml 설정 : 플러터 프로젝트와 관련된 설정을 하는 파일

• 이미지 및 폰트 지정 혹은 사용할 오픈 소스 프로젝트 명시

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter : 3.0.4

2) 권한 및 네이티브 설정

• 인터넷, https, http 프로토콜 이용 가능 설정

3) 구현

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('Code Factory'),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: (){
              if(controller != null){
                controller!.loadUrl('https://blog.codefactory.ai');
              }
            },
            icon: Icon(
              Icons.home,
            ),
          )
        ],
      ),
      body: WebView(
        onWebViewCreated: (WebViewController controller){
          this.controller = controller;
        },
      initialUrl: 'https://blog.codefactory.ai',
      javascriptMode: JavascriptMode.unrestricted,),
    );
  }
}