2024년 6월 5일 (수) 02:34 판

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

개요

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

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

설치

사전준비

IDE
안드로이드 스튜디오와 VSCode, IntelliJ 등 IDE를 사용할 수 있는데, 사용할 IDE가 미리 설치되어 있어야 한다.
JDK
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	공식 예제를 익히고 난 다음 참고하면 좋을 사이트.

@@ 16번째 줄: / 16번째 줄: @@
 #Git(선택)
 #:오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)
+=== 일반적인 설치 ===
+flutter.dev에서 os별로 설치를 참고하자.
 === git으로 설치 ===

플러터:개요: 두 판 사이의 차이