플러터:개요

학교의 모든 지식. SMwiki
Sam (토론 | 기여)님의 2024년 6월 5일 (수) 02:34 판
둘러보기로 이동 검색으로 이동

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

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

개요

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

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

설치

사전준비

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

일반적인 설치

flutter.dev에서 os별로 설치를 참고하자.

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!'),
        ),
      ),
    );
  }
}

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

예제

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