[코드팩토리의 플러터 프로그래밍] 8장. 블로그 웹앱 : 콜백함수, 웹뷰, 네이티브 설정 - 앱바/웹뷰 구현

환경 : mac m1

 

1. 앱바 구현하기 

앱바 구현하기 · soo-toance/2024-flutter-chapter8-blog-webapp@30c0383 (github.com)

앱바 구현하기 · soo-toance/2024-flutter-chapter8-blog-webapp@30c0383

 

앱바 구현하기 후 실행

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

class HomeScreen extends StatelessWidget {
  WebViewController webViewController = WebViewController();

  // webviewcontroller가 non-const 이기 때문에 삭제
  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('Code Factory'),
        centerTitle: true,
      ),
      body: Text('Home Screen'),
    );
  }
}

 

---

2. 웹뷰 구현 및 설정하기 

웹뷰 구현 후 실행

 

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

class HomeScreen extends StatelessWidget {
  WebViewController webViewController = WebViewController()
    ..loadRequest(Uri.parse('https://blog.codeFactory.ai'))
    ..setJavaScriptMode(JavaScriptMode.unrestricted);

   ...
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      ...
      body: WebViewWidget(
        controller: webViewController,
      )
    );
  }
}

웹뷰 연결 · soo-toance/2024-flutter-chapter8-blog-webapp@65e3989 (github.com)

웹뷰 연결 · soo-toance/2024-flutter-chapter8-blog-webapp@65e3989

 

 

---

3. main.dart 파일 수정 : WidgetsFlutterBinding.ensureInitialized() 

- runApp 함수는 내부적으로 WidgetsFlutterBinding.ensureInitialized() 함수를 실행중인데, 이는 앱을 실행할 준비가 됐는지 확인하는 역할을 함 

- 일반적인 플러터 프레임워크에서는 직접 실행할 필요가 없지만, statelesswidget에서는 직접 실행해주어야 함. 

widgetsflutterbinding.ensureinitialized 추가 · soo-toance/2024-flutter-chapter8-blog-webapp@d71c053 (github.com)

widgetsflutterbinding.ensureinitialized 추가 · soo-toance/2024-flutter-chapter8-blog-webapp@d71c053

 

---

4. 홈화면 추가 

홈화면 추가 후 실행

 

...
 actions: [
          IconButton(onPressed: () {
            webViewController.loadRequest(Uri.parse('https://blog.codeFactory.ai'));
          },
          icon: Icon(
            Icons.home,
          ))
        ]
 ...

홈화면 추가 · soo-toance/2024-flutter-chapter8-blog-webapp@1b184a2 (github.com)

홈화면 추가 · soo-toance/2024-flutter-chapter8-blog-webapp@1b184a2