본문으로 이동

플러터:개요

학교의 모든 지식. SMwiki
Sam (토론 | 기여)님의 2024년 5월 29일 (수) 08:20 판

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

  1. 플러터:개요
    1. 플러터:VSCode
    2. 플러터:안드로이드 스튜디오
  2. 플러터:실행
  3. 플러터:개념 잡기
    1. 플러터:화면 하나 만들기
    2. 플러터:변하는 화면(StatefulWidget)
    3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
    4. 플러터:화면 전환(Drawer)
    5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
    6. 플러터:그래프 그리기(fl chart)
    7. 플러터:데이터 저장(간단한 데이터)
    8. 플러터:인증(Firebase 인증)(미완)
    9. 플러터:인증(OAuth2)(미완)
  4. 권한 사용
    1. 플러터:마이크 입력
  5. 위젯
    1. 플러터:아이콘
    2. 플러터:레이아웃 계열 위젯
    3. 플러터:네비게이션 계열 위젯
    4. 플러터:버튼
    5. 플러터:상태관리(미완)
  6. 플러터:DB연결
    1. 플러터:Firebase(미완)
    2. 플러터:MySQL(미완)
  7. 디자인
    1. 플러터:테마
    2. 플러터:앱바
  8. 플러터:배포
    1. 플러터:배포(안드로이드)(미완)
    2. 플러터:배포(iOS)(미완)
  9. 플러터:참고자료
  10. 플러터:위젯
    1. 플러터:공간배치용 위젯
  11. 플러터:구글 AdMob(미완)
  12. 플러터:라이브러리
    1. 플러터:logger

개요

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

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

설치

사전준비

  1. IDE
    안드로이드 스튜디오와 VSCode, IntelliJ 등 IDE를 사용할 수 있는데, 사용할 IDE가 미리 설치되어 있어야 한다.
  2. JDK
  3. Git(선택)
    오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)

git으로 설치

다운받을 디렉터리를 만들어준 후 명령 프롬프트에서 해당 디렉터리로 이동한다.

클론으로 복사한다. git clone -b stable https://github.com/flutter/flutter.git 그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다. 100%, done 이라는 텍스트가 몇 개 보이면 성공.

path

윈도우에서

제어판>시스템속성(system properties)>고급(advanced)>환경변수(environment variables) 위쪽 칸의 path를 더블클릭.

flutter를 설치한 경로를 추가해준다.(flutter디렉터리 하위의 bin까지)

IDE 연결

각자의 방법으로 연결한다. VSC의 경우, 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!'),
        ),
      ),
    );
  }
}

예제

사이트 설명 비고
공식 문서 https://api.flutter.dev/
공식 공식 예제 사이트. https://flutter.github.io/samples/#
Flutter Gems 공식 예제를 익히고 난 다음 참고하면 좋을 사이트.