Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

소개

Flutter 관련 문서를 찾아다녔는데, 초반에는 공식사이트에 있는 문서로 공부하는게 나을 것 같다. 공식 사이트에 있는 문서로 감을 잡고나서 Flutter in Action 같은 책을 보던지 해야겠다. 개발환경은 대략 만들었으니 Write your first Flutter app문서를 따라서 첫번째 앱을 만들어보기로 했다.

이 문서는 첫번째 flutter 앱을 만드는 기본 안내서다. 루프, 조건, 객체지향등의 기본 프로그래밍 개념을 가지고 있다면, 이 자습서를 쉽게 완료 할 수 있을 것이다. Dart 혹은 모바일 프로그래밍에 대한 사전 경험은 필요하지 않다.

무엇을 만드는가

스타트업 이름을 만들어주는 간단한 앱을 만들 것이다. 앱은 스트트업 이름을 리스트 형태로 제안을 하고, 사용자는 맘에 드는 이름을 선택하거나 취소하면서 가장 좋은 이름을 저장 할 수 있다. 이 코드는 자동으로 이름을 생성한다. 사용자가 계속 스크롤 할 경우 더 많은 이름이 만들어진다. 스크롤에는 제한이 없다.

이 앱을 만들어보면서 아래의 것들을 배울 수 있다.
  • iOS와 Android 모두에서 사용 할 수 있는 앱을 만드는 방법
  • Flutter 앱의 기본 구조
  • 패키지를 찾아서 기능을 확장하는 방법
  • 더 빠른 개발을 위한 hot reload 사용
  • Stateful widget 생성
  • 무한히 수행 할 수 있는 스크롤
개발을 위해서 필요한 도구들
  • Flutter SDK
  • 개발자모드로 설정된 Android 혹은 iOS
  • iOS 에뮬레이터
  • Android 에뮬레이터
나는 Flutter 소개 - Android 기반 개발환경 만들기, VisualStudio Code 기반 Flutter 개발환경 만들기, VIM 기반 Flutter 개발환경 만들기 를 통해서 나름 질리게 개발환경은 세팅했다.

지금은 vim에 정챡했다.(이제 막 배우는 시점이라서 vim에 만족하는 것일 수도 있겠다. 언젠가 한계를 느낄지도..)

Starter Flutter 앱 만들기

start 프로젝트를 만들자.
# flutter create starter
lib/main.dart파일을 수정했다. flutter run 명령 으로 실행한 결과

 app 실행

분석

이 예제 프로그램은 Material App을 생성한다. Material App은 구글의 Material 디자인을 적용한 애플리케이션이다. 작고 가벼우며, 디자인에서 표면과 그림자가 물리적인 구조를 형성해서, 사용자들이 화면의 어떤 부분을 터치 할 수 있는지, 터치하면 어떤 움직임을 보일지 직관적으로 이해할 수 있도록 하겠다는 목표로 만든 디자인이다.

main 메서드를 보면 화살표(=>)키워드가 있다. Dart 언어는 코드가 한 줄일 경우 =>로 괄호 없이 표현할 수 있다.

flutter은 StatelessWidget과 StatefulWidget 두개의 위젯 타입을 지원한다. Stateless는 모든 속성이 변경되지 않는 위젯의 인스턴스를 만들기 위해서 사용한다. 이 타입의 위젯의 속성은 변경 할 수 없으며, 동일한 효과를 얻기 위해서는 해당 위젯의 새 인스턴스를 만들어야 한다. StatefulWidghet 위젯은 속성 변경이 가능한 위젯이다.

Scaffold은 Material 라이브러리에서 제공하는 위젯이다. 이 위젯은 애플리케이션 bar, title, body, FAB(Floating Action Button)등의 요소를 포함하는 홈 스크린을 구성하기 위해서 사용한다.

 Scaffold

build메서드를 이용해서 위젯을 표시 할 수 있다. bodyCenter 위젯은 하위 위젯들을 화면 가운데로 정렬한다.

외부 패키지의 사용

외부 패키지를 사용해보자. englisth_words라는 패키지를 이용해서 랜덤한 텍스트를 출력하도록 코드를 수정했다. Flutter 프로젝트를 만들면 패키지 의존성 정보를 담고 있는 pubspec.yaml파일이 만들어진다. 여기에 english_words 종속성을 추가한다.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"                                                   

dependencies:
  flutter:
    sdk: flutter
  english_words:
flutter pub get을 실행하면 pubspec.yaml 파일을 읽어서 필요한 패키지를 다운로드 한다.
# flutter pub get

 flutter app - 2

Hot reload하면 텍스트가 랜덤하게 바뀌는 걸 확인 할 수 있을 것이다.

Stateful 과 stateless widget

위젯은 stateful과 stateless 둘 중 하나로 만들어진다. 유저와의 상호작용으로 변경될 수 있는 위젯을 stateful 위젯이라고 한다.

stateless 위젯은 절대로 변경되지 않는다. Icon, IconButton, Text 등이 stateless 위젯이다. Stateless 위젯은 StatelessWidget의 서브클래스(subclass)다.

stateful 위젯은 동적이다. 예를 들어, 사용자 상호작용이나 데이터 수신 이벤트등을 받아서 모양을 변경할 수 있다. Checkbox, Radio, Slider, InkWell, Form, TextField 등이 stateful 위젯들이다. Stateful 위젯은 StatefulWidget의 서브클래스다.

위젯의 상태는 State 객체에 저장되어 위젯의 상태와 모양정보를 유지한다. 상태는 슬라이더의 형재 값 혹은 체크박스의 선택여부와 같은 변경 할 수 있는 값들로 구성된다. 위젯의 상태가 변하면 state 객체는 setState()를 호출해서 프레임워크에 위젯을 다시 그리도록 지시한다.

Stateful 위젯을 생성하려면 적어도 2개의 클래스가 필요하다.
  1. 인스턴스로 부터 생성되는 StatefulWidget
  2. State 클래스
Stateful 클래스 자체는 불변이지만 State 클래스는 위젯의 수명주기(lifetime)동안 지속유지(persistent)된다.

여기에서는 stateful 위젯인 RandomWords를 만들고, 이것으로 부터 State 클래스인 RandomWordState 클래스를 만들 것이다. 그리고 이미 만들어 둔 Stateless 위젯인 MyApp의 child에 삽입한다.

먼저 최소한의 코드만 가지는 state 클래스를 만든다. State<RandomWords> 선언에 주목하자. 이것은 RandomWords를 위해서 사용할 State 클래스라는 것을 나타낸다. 앱의 로직과 상태의 대부분은 RandomWords 위젯에서 유지한다.

Stateful 위젯인 RandomWords 클래스를 만든다. 이 클래스는 State 클래스를 만드는 것 외에 다른 작업을 수행하지 않는다.

이제 RandomWordsState 클래스에 build() 메서드를 만든다.

MyApp클래스가 stateful 위젯을 호출하도록 수정한다.

리스트뷰 만들기

RandomWordState를 확장해서 단어목록을 출력하도록 해보자. 목록은 ListView 위젯에서 출력되며, 스크롤, 무한확장 기능을 가진다.

제안하는 단어를 저장하기 위한 _suggestion 변수를 RandomWordsState 클래스에 추가했다. 또한 글꼴을 크게하기 위해서 _biggerFont 변수도 추가했다.

RandomWordState 클래스에 _buildSuggestions()메서드를 추가한다. 이 메서드는 제안 목록을 ListView 위젯을 통해서 출력한다. ListView는 아이템을 설정하기 위해서 사용하는 익명함수로 정의 할 수 있는 itemBuilder 프로퍼티를 제공한다. itemBuilder에 설정할 익명함수는 BuildContext와 아이템 목록을 순환하기 위해 사용하는 index 두 개의 매개 변수를 가진다. index는 0부터 시작하며 함수가 호출 할 때마다 증가한다.
  1. itemBuilder은 단어가 제안될 때마다 콜백으로 호출되며, ListTile에 단어를 배치한다. 짝수 행의 경우 단어쌍에 대한 ListTile을 추가한다. 홀수 행의 경우 Divider위젯을 호출해서 항목을 시각적으로 분리한다. 앱 상에서는 항목간 구분선으로 나올 것이다. 작은 장치에서는 구분선을 보기 어려울 수 있다.
  2. 1픽셀 높이의 구분선을 추가한다.
  3. i ~/ 2는 i를 2로 나누고 정수 결과를 반환한다. i 가 증가함에 따라서 0.5, 1, 1,5, 2, 2,5가 될텐데, 연산결과는 0, 1, 1, 2, 2가 된다. 이 연산을 이용해서 ListView에서 위젯을 제외한 단어 쌍의 실제 수를 계산 할 수 있다.
  4. 만약 사용 할 수 있는 단어 쌍의 목록의 마지막에 도달하면, 제안목록에 10개를 추가한다.
_buldRow() 함수를 RandomWordsState에 추가한다. ListTile 클래스는 하나의 단일한 Row 객체를 출력하기 위해서 사용한다. Row의 제목, 아이콘, 폰트 등의 프로퍼티를 가지고 있다.

RandomWordsState클래스의 build() 메서드를 업데이트 한다. 이제 직업 단어 생성 라이브러리를 호출하는 데신에 _buildSuggestions()메서드를 사용한다.

MyApp 클래서의 build() 메서드가 RandomWords 클래스를 사용하도록 수정한다.

아래는 수정이 끝난 코드다.

애플리케이션을 실행해보자.

정리

  • Flutter 애플리케이션 레이아웃을 살펴봐야 겠다.
  • 이 애플리케이션을 서버/클라이언트 모델로 만들어봐야 겠다. 대략 아래와 같은 모습이 되지 않을까 ?
 만들고 싶은 애플리케이션

english_words 패키지 대신에, RandomWords 서버에서 단어 목록을 만든다. 클라이언트가 요청하면 서버는 Json 형태로 목록을 되돌려준다.

참고