플러터:개요

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
2. 플러터:배포
3. 플러터:참고자료
4. 플러터:위젯
   1. 플러터:공간배치용 위젯
5. 플러터:라이브러리
   1. 플러터:logger
6. 플러터:DB활용
   1. 플러터:Firebase
   2. 플러터:MySQL

개요

구글이 공개한 앱개발 프레임워크.

간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.

설치

과정	설명	비고
Flutter SDK 설치	zip파일로 다운받는데, 몇 가지 방법이 있다. 직접 다운받는 경우. flutter.dev(https://docs.flutter.dev/get-started/install)에서 os별로 설치를 참고하자. 윈도우라면 다음의 링크를 바로 이용. https://docs.flutter.dev/get-started/install/windows/desktop#143-tab-panel 찾기 좋은 곳에 압축 푼다. 환경 변수 지정. 각 운영체제의 방법을 따라 경로 지정. 윈도우:환경변수 설정 참고. flutter 디렉토리 하위의 bin을 지정한다. VS Code를 쓰는 경우. extentions에서 flutter를 다운받는다. ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. SDK를 설치할 폴더를 선택하면 하위에 flutter 디렉토리가 생김. 이후 그대로 따라가면 설치됨. Git을 이용하는 경우. git clone -b stable https://github.com/flutter/flutter.git그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다. 100%, done 이라는 텍스트가 몇 개 보이면 성공.	CMD 등에서 flutter --version 으로 설치 확인.
안드로이드 스튜디오 설치	설치파일만 1.1GB 정도. 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.	https://developer.android.com/studio/install
안드로이드 스튜디오 설정	plugins에서 flutter 검색. 설치한다. projects에서 more actions>SDK Manager, Android SDK>SDK Tools>Android SDK command-line Tools를 Apply 눌러 설치.
확인	터미널에서 flutter doctor 입력. 어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.

시작

• 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.
• 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.

VSCode	ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다. 애뮬레이터 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이를 고를 수 있다.
안드로이드 스튜디오	플러터의 위치를 지정하는 과정이 필요하다. Windows: where flutter 명령어 실행 macOS/Linux: which flutter 명령어 실행 에뮬레이터. 우측 메뉴에 device manager를 통해.

vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)

보통 처음 실행하면 에러가 뜨는데...(나중에 정리해보자...

어려워서 안드로이드 스튜디오로 넘어간다.

device manager에서 기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다.

IDE 연결

각자의 방법으로 연결한다. VSCode의 경우, extention에서 flutter를 검색하면 설치할 수 있다.

import 'package:flutter/material.dart';  // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원)

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

기본적인 흐름은 main>runApp>위젯 형식이다. 위젯을 상속한 클래스의 build를 오버라이딩 하는 방식으로 이루어진다.

예제

사이트	설명	비고
공식 문서		https://api.flutter.dev/
공식	공식 예제 사이트.	https://flutter.github.io/samples/#