코린이[코딩 어린이]

플러터 위젯에 대한 내용입니다.

먼저, 플러터는 크로스 플랫폼 모바일 애플리케이션을 구축하는데 널리 사용되는 오픈소스 프레임워크입니다.

플러터에서는 모든 것이 위젯입니다. 위젯은 플러터 애플리케이션 사용자 인터페이스의 기본 구성 요소입니다. 이는 앱의 사용자 인터페이스를 구성하는 다양한 요소, 구성 요소 및 레이아웃 구조를 나타냅니다.

플러터 위젯에 대한 주요 정보

1. 위젯 계층 구조 ( Widget Hierarchy ): 플러터에서는 위젯을 계층적 방식으로 구성하여 UI를 구성합니다.
   이러한 위젯은 버튼이나 텍스트 필드처럼 단순할 수도 있고 전체 화면이나 사용자 정의 차트처럼 복잡할 수도 있습니다.
2. 불변 ( Immutable ): 플러터의 위젯은 불변입니다. 즉, 위젯을 만든 후에는 해당 속성을 변경할 수 없습니다. 대신 UI를 업데이트 하려는 경우 원하는 변경 사항이 포함된 새 위젯을 만들어줍니다.
3. 상태 비저장 및 상태 저장 위젯 ( Stateless and Stateful Widgets ): 플러터에는 상태 비저장 위젯과 상태 저장 위젯이라는 두 가지 주요 유형의 위젯이 존재합니다.
   - 상태 비저장 위젯: 이 위젯은 변경할 수 없으며 변경 가능한 상태가 없습니다. 일반적으로 레이블이나 아이콘과 같이 시간이 지나도 변경되지 않는 UI요소에 사용됩니다.
   - 상태 저장 위젯: 이 위젯은 시간이 지남에 따라 모양이나 동작을 변경할 수 있습니다. 이는 변경 가능한 상태 개체와 연관되어 있으며 양식이나 대화형 구성 요소와 같이 상태를 유지해야 하는 요소에 사용됩니다.
4. 위젯 구성 ( Widget Composition ): 위젯을 서로 중첩하여 구성할 수 있습니다. 예를 들어 여러 개의 텍스트 위젯을 포함하는 Column 위젯을 사용하여 Text요소의 세로 목록을 만들 수 있습니다.
5. 머터리얼 디자인 및 쿠퍼티노 위젯 ( Material Design and Cupertino Widgets ): 플러터는 다양한 디자인 지침을 따르는 사용자 인터페이스를 구축하기 위한 두 가지 세트를 제공합니다.
   - Material Design: 이 위젯은 안드로이드에서 사용되는 Google Material Design 언어와 일치하도록 설계되었습니다. AppBar, FlatButton, Card와 같은 구성 요소가 포함되어 있습니다.
   - Cupertino: 이 위젯은 iOS 디자인 언어를 따르며 cupertinoNavigationBar, CupertinoButton, CupertinoTextField와 같은 구성 요소를 포함합니다.
6. 사용자 정의 위젯 ( Custom Widgets ): StatelessWidget 또는 StatefulWidget 클래스를 확장하여 사용자 지정 위젯을 만들 수 있습니다. 이를 통해 UI요소 및 기능을 재사용 가능한 구성 요소로 캡슐화할 수 있습니다.
7. 레아이웃 위젯 ( Layout Widgets ): 플러터는 Container, Row, Column 및 Stack과 같은 다양한 레이아웃 위젯을 제공하므로, 복잡한 레이아웃을 만들기 위해 하위 위젯을 다양한 방법으로 배열하고 배치할 수 있습니다.
8. 제스처 감지 ( Gesture Detection ): 플러터 위젯은 제스처 감지 지원 기능이 내장되어 있어 tapping, swiping, dragging과 같은 사용자 상호작용을 쉽게 처리할 수 있습니다.
9. 애니메이션 ( Animation ): 플러터는 앱 내에서 부드러운 애니메이션과 전환을 만드는데 필요한 애니메이션 위젯과 도구를 제공합니다.
10. 플러터의 핫 리로드 ( Flutter's Hot Reload ): 플러터의 장점중 하나는 "핫 리로드"기능입니다. 이 기능을 사용하면 애플리케이션을 다시 시작하지 않고도 개발 중에 앱 UI의 코드 변경 결과를 직시 확인할 수 있습니다.

전반적으로 플러터의 위젯 기반 접근 방식은 다양한 플랫폼에서 일관되고 성능이 뛰어난 경험을 유지하면서 맞춤형 및 복잡한 사용자 인터페이스를 구축하는데 유연하고 강력합니다. 위젯을 혼합하고 일치시켜 모바일 애플리케이션의 원하는 모양과 동작을 만들 수 있습니다.

윈도우에서 플러터를 설치하는 방법입니다.

플러터 바로가기

플러터를 설치하기 위해 위 사이트로 이동해줍니다.

윈도우를 클릭해서 윈도우용 받기로 이동합니다.

플러터를 내려받아 줍니다.

플러터를 원하는 위치에 풀어주고 ./bin으로 이동합니다.

~./bin까지의 경로를 복사해둡니다.

시스템 환경 변수 편집을 열어줍니다.

환경 변수를 열어줍니다.

Path를 클릭하고 편집으로 이동해줍니다.

새로 만들기를 클릭한 다음 아까 복사해둔 경로를 추가하고 확인을 눌러줍니다.

이번에는 CMD를 열어줍니다.

$ flutter --version

플러터가 제대로 깔렸는지 확인하기 위해 flutter --version을 입력해서 확인해 줍니다.

경로까지 제대로 연결했다면 아래처럼 플러터 버전이 나옵니다.

$ flutter doctor

다음으로 flutter doctor를 입력해서 플러터를 실행시키기 위해 필요한 내용을 확인해줍니다.

안드로이드 바로가기

안드로이드를 설치하고 나면 X가 !로 변합니다.

$ flutter doctor --android-licenses

위 내용을 cmd에 실행하면 아래처럼 에러가 나옵니다. ( 라이센스 문제라고 생각 됩니다 )

아까 설치했던 안드로이드 스튜디오를 열어줍니다. More Actions -> SDK Manager로 이동합니다.

좌측에 Languages & Frameworks -> Android SDK로 이동한 다음, Hide Obsolete Packages 체크를 해제합니다.

아래 내용을 체크해줍니다. 

OK를 누르고 인스톨이 완료되면 Finish를 눌러줍니다.

다시한번 cmd로 와서 flutter doctor를 입력해주면 안드로이드 스튜디오 관련은 모두 완료되었습니다.

다음은 마지막으로 비주얼 스튜디오를 설치해줍니다

설치할 때 기본으로 설치를 했더니 문제가 사라지지 않았었습니다...

그래서 다시 비주얼 스튜디오로 이동해서 도구 -> 도구 및 기능 가져오기로 이동합니다.

아래로 내려보면 C++를 사용한 데스크톱 개발을 클릭하고 수정해줍니다.

이렇게 플러터를 사용할 수 있는 환경이 만들어 졌습니다.

이제 플러터를 생성하고 실행해보면 됩니다.

플러터 생성하기

$ flutter create my-app

플러터 실행하기

$ flutter run

플러터가 실행된 모습입니다. 플러터로 개발하기 위한 준비 과정이 끝났습니다. 이제 .dart를 사용해서 코드를 작성해 만들어 주면 됩니다.

Flutter 개요

플러터는 iOS와 안드로이드 앱 두가지를 한번에 개발할 수 있는 크로스 플랫폼입니다.

Flutter 공식 홈페이지

Flutter공식홈페이지

VScode

Flutter 개발을 하기 위한 여러 툴중 한가지입니다.

다른 툴을 사용하고 있지 않다면, VScode를 사용하는것을 추천합니다.

VScode설치하러가기

Android Studio

Flutter로 안드로이드 앱을 배포하기 위해서 필요한 프로그램입니다.

또한, Flutter로 안드로이드 앱을 개발할 수 있습니다.

Android Studio 설치하러가기

Xcode

Flutter로 iOS ㅇ애블 배포할 때 필요한 프로그램입니다.

또한, Flutter로 iOS 앱을 개발할 수 있습니다.

Xcode 설치하러가기

:: Xcode는 App Store에서 설치 할 수 있습니다.

Flutter SDK

Flutter로 개발하기 위해서 설치해야하는 Flutter SDK입니다.

FlutterSDK 설치하러가기

플러터 설치하기

1. 위 링크로 들어가서 flutter_macos_....zip을 다운받습니다.

2. 원하는 위치에 파일의 압축을 풀어줍니다.

3. .bash or .zshrc등에 경로를 추가해줍니다.

$ export PATH="$PATH:`pwd`/flutter/bin"

:: pwd => Print Working Directory ( 현재 작업중인 디렉터리의 이름 )

즉, 경로를 입력해주면 됩니다.

4. 플러터닥터를 실행해줍니다.

$ flutter doctor

:: flutter doctor 실행시 문제 발생

이런 안드로이드 라이센스 경고창이 뜨게됩니다.

이를 해결하기 위해 flutter doctor --android-licenses를 실행시켜서 해결하려 하지만

이런식으로 sdkmanager를 찾을수 없고, cmline-tools가 설치되어 있는지를 확인하라고 알려줍니다.

:: 해결방법

1. 안드로이드 스튜디오를 실행시켜줍니다.

2. Configure -> SDK Manager를 선택합니다.

3. Android SDK -> SDK Tools -> Android SDK Command-line Tools, Android SDK Platform-Tools를 선택한 후 OK를 눌러주면 설치가 됩니다.

:: 가끔 버전 때문에도 에러가 뜨는 경우가 있습니다. 그럴때는 오른쪽 아래 Show Package Detail를 활성화 한 뒤에 Android SDK Build-Tools 32의 버전을 낮춰서 인스톨 시켜줍니다.

4. flutter doctor --android-licenses를 터미널에 다시 실행시켜 줍니다.

$ flutter doctor --android-licenses

그럼 서명하는 내용이 나오는데 모두 y를 선택해줍니다.

5. flutter doctor를 다시한번 실행시켜 줍니다.

$ flutter doctor

그러면 이렇게 경고없이 flutter doctor가 실행이 완료됩니다.

플러터 실행 확인하기

플러터 생성하기

flutter create my-app

앱 실행시키기

cd my-app
flutter run

flutter run을 하면 이렇게 앱이 실행됩니다.

이렇게 플러터로 개발하기 위한 준비과정이 끝났습니다. 이제 dart를 배우고 플러터로 앱을 개발합니다.