Flutter 공부 기록 11

지난번에 이미지를 넣어보았었는데, 이미지 아래에 로딩 효과를 넣어보도록 하겠습니다.

사진상으로는 잘 안느껴지지만, 원형으로 돌아가는 효과가 있습니다.

그리고 여러 위젯을 넣기 위해서 구조를 바꾸었습니다.

Column으로 바꾼 후 children을 사용했습니다.

여기서 복습겸 퀴즈를 내보겠습니다.

둘다 중앙에 위치시키려면 어떻게 할까요?

 

타이밍이 안좋아 로딩 효과가 더 잘리긴 했지만, 중앙에 위치하도록 바꾸었습니다.

column이나 row처럼 축을 기반으로 정렬시켜야 하는 것은 mainAxisAlignment 혹은 crossAxisAlignment를 사용하면 됩니다.

 

다시 퀴즈를 내보겠습니다.

로딩 효과를 붉은색으로 넣고,

검은 바탕을 가진 위젯의 높이를 400으로 설정하고,

이미지 위쪽과 효과의 아래쪽 남는 부분을 푸른색으로 바꿔보세요.

힌트는 지난 글에서 유용할 것 같다고 했던 내용입니다.

 

 

높이 400으로 설정하는건 어렵지 않으셨을거고,

색은 다른 위젯과 동일하게 color를 사용하시면 되고,

남는 공간을 차지하게 하는건 Expanded를 사용하시면 됩니다.

 

이번에는 웹뷰를 알아보겠습니다.

웹뷰를 사용하면 이미 만들어져있는 사이트를 보여줄 수 있습니다.

웹뷰는 AOS및 IOS에서만 사용할 수 있습니다. window(chrome)으로 열면 오류납니다.

이번에는 https://riddleuscode.tistory.com/2 이 페이지의 내용을 앱에 넣어보겠습니다.

하지만, 바로 할 수 있는건 아니고, 준비 작업을 해주겠습니다.

 

지난번 설정작업 했을 때 처럼 pubspec.yaml을 열어주세요.

dev_dependencies에 webview_flutter: 3.0.4를 추가해주세요. (들여쓰기도 맞춰주세요)

그러면 Pub get이 상단 우측에 생기는데 눌러주세요. 

 

이번엔 안드로이드 설정입니다. 아래 사진의 경로로 들어가셔서

 

AndroidManifest.xml을 열어주세요.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <application
        android:label="flutter_app1"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">

들어가면 첫번째 줄의 내용은 바로 보이실겁니다.

그 아래 두번째 줄 내용을 추가해주세요. (인터넷 사용 권한 허가)

만약 http 프로토콜을 허용하시려면, 가장 아래줄의 내용도 추가해주세요.

저도 잘 아는 건 아니지만, http는 보안이 상대적 취약하다고 알고 있습니다.

그래서 전 지우겠습니다.

 

그리고 build.gradle도 수정을 해줍니다.

compileSDKVersion을 32로 변경해주고, minSdkVersion을 20으로 변경해줍시다.

(ctrl+F로 찾으면 나옵니다.)

 

이번엔 IOS 설정입니다. (http 프로토콜 허용하는 설정입니다. 원하지 않으시면 이부분 패스하세요.)

 

 

이 경로로 들어가셔서 info.plist를 열어주세요.

바로 처음 <dict> 보이는 줄 아래쪽에 들여쓰기를 넣으며

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInwebContent</key>
    <true/>
</dict>

해당 내용을 추가해주세요.

 

여기까지 오셨으면 설정은 완료입니다..

 

그리고 열심히 시행착오를 거치며 웹뷰가 제대로 나오게 만들었습니다!

시행착오1: WebView를 위젯으로 인식하지 못하길래 원인이 뭘까 고민해 보았는데..

import를 안해서 그랬었습니다. 화면상 2번째 import 꼭 추가해줍시다.

 

시행착오2: A RenderFlex overflowed by Infinity pixels on the bottom. 이런 오류가 뜹니다.

Column 위젯 아래다가 추가했었는데, 아무 위젯 아래다가 넣으면 사이즈가 너무 클경우 overflow가 난다는,

그런 의미인 것 같아 구글링을 하면 찾아본 결과, expanded 아래에 넣어주었습니다.

 

 

아 그리고 설명을 안드렸는데, 

initalUrl은 초기에 화면을 띄울 사이트 주소,

javascriptMode는 자바스크립트의 실행을 허용할지 여부를 결정합니다.

저는 허용했고, 막으려면 javascriptMode: JavascriptMode.disabled 를 넣으시면 됩니다.

책에 나온 그밖의 속성으로는

onWebViewCreated: 웹뷰가 생성되면 실행되는 콜백함수

onWebViewStarted: 웹페이지가 로딩되기 시작하면 실행할 콜백함수를 정의할 수 있다

onPageFinished: 웹페이지 로딩이 끝나면 실행되는부분

onProgress: 웹페이지가 로딩중일때 지속적으로 실행되는 부분

등이 있다고 하는데, 관심있으신 분들은 한번 사용해 보시기 바랍니다..

 

이번 글은 여기까지 작성하도록 하겠습니다.

감사합니다~

(항상 설정이 들어가는 부분은 내용 대비 시간을 많이 잡아먹네요.

전체적인 내용은 적지만, 공부하고 글쓰는 시간은 평소보다 적게 사용하진 않았습니다.)