다다음주에 앱 관련 해커톤이 있길래 그곳에 나갈 수 있는 정도의 실력을 지금부터 쌓아보려고 한다!
꾸준히 매일 공부하고 복습해보면서 준비하자!!
콜백함수와 Web View
콜백함수 - 어떤 특정 조건이 충족될시 그 이후에 작동하는 함수를 말한다!
함수를 그냥 정의하면 바로 실행되지만 콜백함수는 특정조건이 성립되야 실행된다!
ex) 웹뷰를 로딩한 후 일을 처리해라!
웹뷰 위젯 - 앱에서 웹 브라우저 기능을 구현하는 기술
웹뷰는 네이티브 컴포넌트에 비해 애니메이션이 부자연스럽고 느린 단점이 있다
하지만 웹뷰를 사용하면 코드 몇 줄로 해당 사이트를 열 수가 있다는 장점이 있긴하다!
WebView(
initialUrl: 'http://naver.com',
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: (String url) {
print(url);
}
),여기서 onPageFinished 함수가 바로 콜백함수가 된다!
화면의 로딩이 끝나면 그 웹의 url을 print한다!!
onPageFinished, onProgress, onPageStarted 등등
onWebViewCreated: 웹뷰 위젯이 생성되면 실행할 콜백함수! 매개변수로
WebViewController가 주여져서 뒤로가기 앞으로 가기 다른 url 가기 가능!
Flutter에서 네이티브 플랫폼 설정하기
다트언어만으로 모든 작업이 가능하면 좋겠지만!!!...
플러터 또한 각각의 네이티브 플랫폼으로 코드가 컴파일되므로 최소한의 네이티브 설정이 필요하다
ex) 인터넷 권한, https프로토콜설정, 사진첩 접근, 푸쉬 권한 등
pubspec.yaml 설정하기
일단 네이티브 설정 하기전에 내가 어떤 외부 플러그인을 가져올지 pubspec.yaml에 작성해줘야한다!!
dependencies:
flutter:
sdk: flutter
webview_flutter: 3.0.4저번에는 cupertino_icons까지 적었어야했는데 이번 과제에서는 따로 작성 안해도 웹뷰가 돌아갔다
안드로이드 네이티브 설정하기
android/app/source/main/manifest.xml에 인터넷 허용을 따로 작성해줘야한다! 그래야 웹뷰가 가능!
자주사용하는 권한들!
INTERNET - 인터넷 사용권한
CAMERA - 카메라 사용권한
WRITE_EXTERNAL_STORAGE - 앱 외부에 파일을 저장할 수 있는 권한
READ_EXTERNAL_STORAGE - 앱 외부의 파일을 읽을 수 있는 권한
VIBRATE - 진동 권한
ACCESS_FINE_LOCATION - GPS와 네트워크로 현재 위치 정확히 가져오는 권한
ACCESS_COARSE_LOCATION - 네트워크만 이용해서 대략적인 위치 정보 가져오는 권한
BILLING - 인앱 결제를 할 수 있는 권한
추가로 http프로토콜은 IOS와 안드로이드에서 현재 막혀있기 때문에 추가 설정으로 풀어줘야한다
<application
android:label="blog_web_app"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher"
android:usesCleartextTraffic="true" // 이거 적어주기!
>android/app/build.gradle → 프로젝트파일, 주로 클래스패스나 레포지토리 정보 입력
android/build.gradle → 모듈 파일이며 의존성이나 버전 정보 관리
IOS 네이티브 설정하기
ios는 더 간단한데 ios/Runner/Info.plist 에 들어가서 코드 몇 줄 작성하면 된다.
작성하는 방식은
<key>NSAppTransportSecurity</key> <String>음악을 재생하는데 권한이 필요합니다</String> --> 권한 요청하는 문구!
<!--추가 코드-->
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsLocalNetworking</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true />
</dict>
</dict>
</plist>아래 부분에 코드를 작성했다. Key하고 내부에 dict를 적으면 추가적인 권한설정이 가능한거 같다!
NSCalendarsUsageDescription - 달력 사용 권한 메세지
NSCameraUsageDescription
NSContactsUsageDescription - 연락처 사용권한 메세지
NSLocationUsageDescription - 위치 정보 사용 권한 메시지
NSPhotoLibraryUsageDescription - 사진 접근 권한 메세지
NSAppTransportSecurity - http프로토콜 접근 권한 설정
블로그 보여주는 앱 구현하기
저번 블로그작성에서 말했듯이 폴더를 나눌거다 지금은 화면 전체를 지정하는 웹뷰만 필요하기 때문에
screen폴더만 만들었다!
main.dart 파일
void main() {
runApp(
MaterialApp(
home: HomeScreen().
),
);
}screen/home_screen.dart 파일
class HomeScreen extends StatelessWidget {
HomeScreen({Key? : key}) : super(key: key);
WebViewController? controller;
@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://codeFactory.ai');
}
},
icon: Icon(
Icons.home,
),
),
],
),
body: WebView(
onWebViewCreated: (WebViewController controller) {
this.controller = controller;
}
initialUrl: 'https://blog.codeFactory.ai',
javascriptMode: JavascriptMode.unrestricted,
),
);
}
}피드백
구글과 네이버도 들어갈 수 있고 홈이 아닌 앞 뒤로 화면 왔다갔다 할 수 있게
저녁 먹고 한번 더 구현하자!
