[Flutter] 스나이퍼팩토리 Flutter 기초과정 (2)

GONG·2023년 3월 23일
0

2일차 과제 링크 👉 2일차 과제

타입 추론

  • 변수의 데이터를 보고 변수에 맞는 데이터타입을 추론해주는 기능
  • var : variable의 약자, Dart에서 변수의 데이터 타입을 자동으로 할당해줌
void main() {
	var example0 = 3;       // int
  var example1 = "123";   // String
  var example2 = false;   // bool
  var example3 = 3.523;   // double
  var example4 = ["3", "2"];  // List<String>
  
  print(example0.runtimeType);    // int 출력
	print(exmaple0 is int);    // true 출력
	print(exmaple0 is String);    // false 출력
}
  • runtimeType : 변수의 데이터 타입을 반환
  • is : 변수의 데이터 타입을 비교해서 일치하면 true, 그렇지 않다면 false 반환

SDK

  • Software Development Kit, 소프트웨어 개발 도구 모음
  • API, IDE, 문서, 라이브러리, 코드 샘플 및 기타 유틸리티가 포함될 수 있음
  • 프로그램 및 응용 프로그램 개발의 복잡성을 줄이는 강력한 기능 집합

IDE (통합 개발 환경)

  • 문서 작성, 코드 작성이 이루어지는 곳
  • 자동완성기능, 코드 디버깅 기능, 프로젝트 관리 기능 등이 있음 예시) Visual Studio Code, Android Studio, Xcode …

💡 [개발환경 구성] 플러터 설치 전에…

  • 윈도우를 사용한다면 애플 제품(iOS, MacOS)등을 위한 앱을 만들 수 없다...
    • 애플의 자사 사랑 때문에 Xcode라는 소프트웨어가 설치되어있지 않으면 실행할 수 없도록 설계되어 있다.
  • flutter doctor
    • SDK 설치 후 doctor로 현재 설치 현황을 확인할 수 있다.
    • CMD 혹은 터미널에서 [flutter doctor] 쳤을 때 다음과 같이 전부 [v]가 나오면 성공!
    • 플러터는 멀티플랫폼 제작 프레임워크
      • 플랫폼마다 개발할 수 있는 도구들이 다 설치되어있어야함
        • No issues found!가 출력되면 설치완료!

플러터 시작하기

📁 프로젝트 생성

  • 실습 환경 : VS Code
  1. VS Code 실행 후 (Windows) Ctrl + Shift + P

  2. Flutter: New Project 검색

  3. Application 선택

  4. 프로젝트가 생성될 폴더 지정 후, 프로젝트 이름 입력

  1. 생성 완료

🖥️ 프로젝트 실행

  1. 우측 하단에 Windows 텍스트 클릭 후 프로젝트 실행할 디바이스 설정
    (저는 이전에 안드로이드 개발하면서 설치해둔 pixel3 사용했습니다)

  2. main 함수 위에 있는 Run 눌러서 실행


📍수업 세팅하기

  1. main 함수 빼고 밑에 다 지우기
  2. stless 입력, 자동완성기능으로 위젯 작성 (MyWidget → MyApp으로 수정)
  3. MaterialApp 위젯 작성



플러터 위젯

  • 플러터는 모든 것이 “위젯”이다.
  • 위젯(Widget) : UI를 만들어주는 하나하나의 구성요소
  • 각각 특수한 목적이 있고 사용법이 다 다르다.
  • 위젯은 만들 수도 있고 배포할 수도 있다.
  • 위젯은 트리구조를 가진다.
    • 위젯들은 자식을 가질 수 있다.
    • 여러개의 위젯을 하나의 위젯으로 묶을 수 있다.

Text 위젯

  • 화면상에 글자를 입력하고 싶을 때 사용하는 위젯
  • Text 위젯은 데이터타입이 String인 것만 넣어줄 수 있다.
  • Text("Hi!")

SafeArea 위젯

  • 속성: child에는 Widget 데이터타입만 들어갈 수 있다.
  • SafeArea(child: Text("hi"))

Center 위젯

  • 자식 위젯(child)을 가운데로 위치하는 위젯
  • 속성: child에는 Widget 데이터타입만 들어갈 수 있다.
  • Center(child: Text("Hi!"))

Icon 위젯

  • 화면상에 아이콘을 보여줄 때 사용하는 위젯
  • Icon위젯은 IconData 데이터타입만 들어갈 수 있다.
  • Icon(Icons.add)
  • 아이콘 종류 및 검색
    - https://fonts.google.com/icons

2일차 끝

profile
우와재밋다

0개의 댓글