[Flutter]1. Flutter 시작하기

학교 공부나 프로젝트를 병행하면서 최근 3~4개월간 포스팅을 못했었는데(본인도 핑계라고 생각한다)
프로젝트를 진행하면서 배웠던 내용들 위주로 조금씩 적어보려 한다.

 

Flutter 시작하기

---

1. C언어는 현재 전 세계적으로 가장 많이 사용하는 언어.
   • iot 기기의 사용이 많아짐에 따라 사용량이 떨어졌다가 다시 올라감
2. 자바는 사용량 감소중. 하지만 여전히 많이 사용된다.
   • 저작권 문제 및 Kotlin등의 사용으로 사용량이 줄어드는 경향이 있다.
   • 나쁜 언어는 아님. 트렌드를 생각했을 때 다른 언어들을 폭넓게 배우고 사용하는것이 좋다.

Flutter

• dart 언어로 만들어진 구글에서 제작한 프레임워크
• 자바스크립트를 대체하기 위해 만들어진 언어
• 언어가 배우기 쉽고 파이썬을 배웠다면 배우기 더 용이.

본인은 JS에 대해서 배운적이 없긴 하지만, 사용하다 보면 HTML, JS의 구조와 비슷하다고 느껴지는 부분이 많다.

 

Flutter 환경 설정

1. 안드로이드 스튜디오 및 jdk 1.8 설치
   • 라이선스 문제로 인해 jdk 1.8 설치
     다운로드: Java SE Development Kit 8 Downloads
2. visual studio code 설치
   • Visual Studio Code - Code Editing. Redefined
3. VSCode 플러그인 설치(flutter, dart)
   • Flutter 플러그인 설치 시, Dart까지 함께 설치.
4. Flutter 설치
   • 다운로드: Flutter Install
5. 압축을 푼 플러터 폴더를 C 드라이브로 옮기기
   • 경로를 쉽게 설정해주기 위함.(다른 폴더에 지정해줘도 된다)
6. 윈도우 설정 - 고급 시스템 설정 - 환경 변수 - path
   • 찾아보기 후 다음 경로로 설정
   • C:\flutter_windows_2.2.3-stable\flutter\bin(사용자가 플러터 압축을 해제한 경로로 설정)
7. cmd - flutter doctor 입력
   • flutter doctor는 플러터 진단 도구.
8. cmd - flutter doctor —android-licenses 입력
   • 안드로이드 라이센스를 부여하기 위함. jdk 1.8 버전에서 가능.
9. C드라이브에 작업용 폴더 하나 생성(폴더명은 자유)
10. vscode - 보기 - 명령 팔레트 - flutter: New Application Project 클릭
11. 작업 폴더 지정 후 신뢰에 체크.(부모 폴더 신뢰)
12. 빌드 진행

---

Dart 메인 코드

• dart에서는 화면에 만들어지는 모든 것들을 위젯(Wiget) 이라고 지칭.
• 각 기업에서 지칭하는 디자인 명칭들이 있음
  • Google: Material Design
  • Apple: Cupertino Design
  • MS: Metro Design

import 'package:flutter/material.dart';
// 플러터는 Material Design 사용.

• 위젯은 두가지가 있다
  • StatelessWidget: 상태에 대한 변화가 없는 위젯
  • StatefulWidget: 상태에 대한 변화가 있는 위젯

 

• 안드로이드 스튜디오 대신 https://flutlab.io/ 사용 가능.
  단, 2개까지만 무료 버전은 프로젝트 생성 가능하며 학생용 버전은 10개까지 무료로 사용 가능.
• stateful wiget은 상태관리를 따로 둔다.

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
	       child: Column(// 여러 줄을 만들 때 사용
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,// 액션버튼 클릭 시 카운터변수 호출. 카운터 증가. 상태 변화
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  

• Scaffold - 전체 프레임
• appbar - 앱의 상단바
• body: Center - 중심부

---

Flutter 참고 관련 사이트

PUB.DEV

https://pub.dev/

Dart packages

• 각종 Flutter 관련 라이브러리, 플러그인을 검색하고 사용할 수 있는 사이트
• 설명법이나 예제도 포함되어 있어 활용하기 좋음

 

Flutter-dev

https://flutter-ko.dev/docs

Flutter 문서

• 플러터 공식 문서 사이트.
• 튜토리얼 및 활용 방법에 대해 자세하게 소게된 사이트

 

Flutter Github

https://github.com/flutter

Flutter

• 플러터 공식 깃허브
• 참고자료나 예제를 활용하기 좋음.

---

❗ Flutter 오류 관련 사항

❗ Flutter 사용 시 JAVA_HOME 에러가 발생하는 경우

안드로이드 스튜디오에서 플러터 앱 실행시 JAVA_HOME PATH 문제가 발생한다면?

JAVA_HOME is set to an invalid directory, Please set the JAVA_HOME variable in your environment to match the location of your Java installation

• JAVA_HOME 에러가 발생하는 경우 보통 환경변수 설정에서 경로를 잘못잡아주었기 때문
• bin 을 포함한 경로는 안되고, bin 폴더 이전까지의 경로를 경로로 설정한다.

❗ cmdline-tools 설정 오류가 발생하는 경우

I am getting this errors "cmdline-tools component is missing" after installing flutter and android studio... i added andorid sdk. how to solve them?

• 안드로이드 스튜디오의 SDK Tools 탭에서 해당 툴 설치