모음/[코드팩토리의 플러터 프로그래밍]
[코드팩토리의 플러터 프로그래밍] 8장. 블로그 웹앱 : 콜백함수, 웹뷰, 네이티브 설정 - 앱바/웹뷰 구현
ttoance
2024. 8. 27. 06:07
환경 : mac m1
1. 앱바 구현하기
앱바 구현하기 · soo-toance/2024-flutter-chapter8-blog-webapp@30c0383 (github.com)
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)
3. main.dart 파일 수정 : WidgetsFlutterBinding.ensureInitialized()
- runApp 함수는 내부적으로 WidgetsFlutterBinding.ensureInitialized() 함수를 실행중인데, 이는 앱을 실행할 준비가 됐는지 확인하는 역할을 함
- 일반적인 플러터 프레임워크에서는 직접 실행할 필요가 없지만, statelesswidget에서는 직접 실행해주어야 함.
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)
반응형