Flutter1
FLUTTER 공부 1일차
Flutter가 무엇이냐면 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크이다. 언어는 구글이 개발한 Dart를 사용하고 한 마디로 안드로이드 스튜디오에서 안드로이드와 ios 개발이 모두 가능하다는 뜻이다. 안드로이드와 ios에서 같은 material 디자인을 사용하더라고 플랫폼에 따라 다르게 출력되는 단점에 의해 하나의 디자인에서 두 가지 플랫폼으로 나오는 것이 아닌, 플랫폼에 따라 디자인에 맞게 화면을 그려주는 형태이다.
flutter에 관해 검색하던 도중에 Dart언어가 Codementor 선정 2018년도 가장 배우지 말아야 할 언어 순위에서 1위를 한 기록을 발견하고야 말았다. Dart언어는 구글이 웹 프론트엔드 구현을 목적으로 개발한 프로그래밍 언어라고 한다. Dart언어의 장점은 이 언어 하나로 모바일, 웹, 데스크탑, 임베디드까지 커버할 수 있다는 점이다. 유연한 컴파일러 기술을 통해 Dart 언어를 다양한 방식으로 실행 가능하다고 한다. JAVA와 같은 클래스 기반 객체지향의 언어이다.
이러한 언어가 최악의 프로그래밍 언어 1위였던 이유는 무엇일까? 그것은 JavaScript와 다른 점이나 특별한 점이 많지 않아서 “굳이”의 이유를 달고 있다고 한다. 또한 애플, 모질라 기업계에서 부정적인 입장을 보여서 공식적인 언어로 지원은 어려울 전망이라고 한다. 그래도 구글 측에서 낸 언어이기 때문에 아직 가능성이 아예 없다고 보기에는 어려울거 같다. 아, 그리고 플루터가 나온 1년 후의 결과는 14위로 내려갔다고 한다.
1. 플루터 개발 환경 설정
플루터 개발 환경은 딱히 어려운 것이 개인 노트북에서 작성할 때는 어려움이 없었는데 연구실 컴퓨터에서 설정하다보니 난리가 났다. 그 이유에 대해서 파악하고 잘 정리해두록 하자.
기존에 안드로이드 스튜디오를 다운받은 상태였기 때문에 flutter만을 다운하면 됐는데 이상하게 그 과정에서 많이 꼬였다. flutter는 안드로이드 스튜디오의 plugins에서도 다운이 가능하고 따로 다운로드도 가능하다. 또한 중요한 과정이 path를 설정해주는 과정 같다.
시스템 속성 -> 환경 변수 에 가서 JAVA_HOME, ANDROID_HOME을 추가해주고 path에도 추가해준다. ANDROID_HOME은 원래 자동으로 지정이 되는데 지정이 되지 않았다고 오류가 떠서 SDK가 있는 주소로 지정해주었다.
남들과 다르게 나는 이런 오류가 떴었다.
Android Studio를 다운로드 했음에도 불구하고 Android toolchain에서 Android SDK에 대한 오류였는데 이 때문에 ANDROID_HOME을 설정해주었다. 그럼에도 불구하고 오류가 떴는데 처음에는 SDK가 ZOLLA 파일 안에 모두 퍼져 있어서 그런 줄 알았다. 그러던 와중에 찾은 사이트에서 그 과정을 따라했는데 X이 표시가 !이렇게 바뀌게 되었다.
과정은 이러하다.
-
flutter_console.bat 파일 열어서 아래와 같이 폴더 세팅
- SET PATH=C:\src\flutter\bin;%PATH%
-
시스템>고급설정>환경변수> Path에 C:/src/flutter/bin
-
그러면 android licenses에 관한 오류가 뜰 것이다. 그 전에 다른 오류가 뜨면 sdk manager에서 오류가 나는 것이므로 그 문제를 먼저 해결하고 온다. 그 다음 flutter doctor –android-licenses를 입력하면 된다.
출처: https://fenderist.tistory.com/105 [Devman]
주의할 점:
- 자바 11이상부터는 플루터 지원이 되지 않는다고 해서 자바 8을 다시 다운로드하였다.
- 안드로이드 sdk를 최상 버전으로 해야 모든 과정이 끝나고 플루터가 실행되는 듯 하다. 이 때, 안드로이드 스튜디오에서도 flutter doctor 보는 것이 가능하다. (Tools -> flutter -> flutter doctor)
- 참고로 자바 잘못 깔아도 실행이 안된다. cmd 창에서 꼭 java, javac를 입력해보고 잘 나오는지 확인하고 버전도 java -version으로 확인하도록 하자
- 이 모든 과정이 끝나야 가상 머신이 실행됨
2. 플루터 구성 이해
플루터는 안드로이드 스튜디오에서 사용하기 때문에 익숙한 UI이다. 다른 점에 대해 기록해보자면,
안드로이드의 java 파일 비슷한게 main.dart라고 생각하면 되고 widget_test.dart는 말 그대로 위젯을 테스트하는 파일이라고 한다. 그리고 dependencies에 원하는 것을 안드로이드에서 추가했듯이 여기서는 pubspec.yaml에서 추가한다.
위에서 볼 수 있듯이 이러한 구성이고 위의 english_words import 한 것은 내가 따로 pubspec에 외부 파일을 사용한 것이다. void main()은 한 줄 함수이기 때문에 한 줄 함수에는 =>를 사용하도록 한다. class MyApp은 StatelessWidget을 상속받고 있는데, 이 앱은 이를 확장하여 전체 앱을 위젯으로 만든 것이다.
이와 같은 형태로 home : Scaffold에서도 위젯을 사용하였다. Scaffold 위젯은 appBar, title, body property를 제공해준다고 한다. Center 위젯은 말 그대로 center로 뒤의 Text 자리를 지정해줌을 의미한다. 이 코드에서는 위에서 wordPair를 객체 생성해주었는데 random()으로 생성해주었기 때문에 asPascalCase에 따라 랜덤으로 글자가 가운데에 생성될 것이다. (asPascalCase는 맨 앞의 영어만 대문자로 지정해준다)
-> 결과화면!