플러터 소개
플러터를 통해 구글은 fuchsia 운영체제에서의 생태계 확대를 꿈꾼다.
플러터는 앱개발을 위한 크로스 플랫폼 프레임워크다.
안드로이드와 iOS 어플을 동시에 개발할수 있게해준다.
플러터 프레임워크를 사용하려면 Dart 프로그래밍 언어를 알아야한다.
리액트 네이티브가 이미 있지만 플러터가 대세가 되고있다.
Hummingbird 라는 Web 프로젝트도 제공한다.
https://youtu.be/AdYRASHRKwE
플러터 SDK 설치
아래에서 SDK를 다운로드 받는다.
https://flutter.dev/
Get started > 윈도우 선택
다운로드 된 압축파일을 원하는 폴더에 풀고
해당 폴더의 bin 폴더에 대해 Path 를 설정합니다.
윈도우 버튼 > 환경이라고 입력 > 시스템 환경변수 편집 선택
> 환경변수 > 시스템변수 > path > 새로 만들기
> 해당 폴더의 bin 경로 추가
이렇게 하면 어디서나 해당 폴더의 실행파일을 실행할 수 있게 됩니다.
윈도우 버튼 > cmd 를 통해
명령 프롬프트를 실행시킨 후
flutter 라는 명령을 실행시켜봅니다.
통합개발환경 설치
안드로이드스튜디오를 설치합니다.
안드로이드 스튜디오를 설치하면
어플을 윈도우에서 가상으로 실행해 볼수 있습니다.
안드로이드 스튜디오를
아래에서 다운로드 받아 설치합니다.
https://developer.android.com/studio?hl=ko
Virtual device 를 설치합니다.
안드로이드 스튜디오 실행 >
Config > AVD Manage 선택 >
Create Virtual Device 설치 > 원하는 것을 선택해서 설치
혹은
안드로이드 스튜디오 실행 >
More Actions > AVD Manager 선택 >
Create Virtual Device > 원하는 것을 선택해서 설치
Haxm 이 함께 설치가 되어야 하는데
Haxm 설치에 문제가 있는 경우 아래를 참고해서
Hyper-V 를 활성화 시킵니다.
HAXM 수동 설치 방법 참고
https://mindorizip.tistory.com/72
HAXM 수동 설치를 위한 다운로드
https://github.com/intel/haxm/releases
시스템의 요구사양이 충분하지 않아서 설치가 안되는 경우도 많습니다.
AVD 가 실행 GPU 등의 설정 문제로 실행이 되지 않으면
AVD 생성 시 제일 낮은 사양의
Device 와 Image (안드로이드 버전) 을 선택해서 생성합니다.
우선은 뭐가 됐든 실행해보는게 중요하니까
플러그인을 설치합니다.
Config > plugin >
Dart 플러그인 설치
Flutter 플러그인 설치
비주얼스튜디오 코드 Visual Studio Code 를
아래에서 다운로드 받아 설치합니다.
https://code.visualstudio.com/
익스텐션을 설치합니다.
Extensions > Flutter 설치
Flutter 익스텐션을 설치하면
Dart 도 한번에 설치됩니다.
아이콘을 이쁘게 나오게 하는
Material Icon Theme 익스텐션을 설치합니다.
https://youtu.be/bBiR11NvzRI
플러터 프로젝트 생성
실행환경 점검
플러터 닥터로 실행환경 점검을 합니다.
윈도우 버튼 > cmd > flutter doctor 명령 실행
아래와 같이 cmdline tood 에러가 발생하면
"cmdline-tools component is missing"
안드로이드 스튜디오를 실행하고
More Actions > SDK Manager > SDK Tools 탭
Android SDK Command-line Tools 선택하여 설치해줍니다.
혹시 그래도 해결되지 않으면 직접 경로를 지정해줘야합니다.
참고 : https://blog.naver.com/PostView.naver?blogId=chandong83&logNo=222523368305
안드로이드 라이센스 확보를 위해 아래 명령을 실행합니다.
flutter doctor --android-licenses
프로젝트 생성
Visual Stuido Code 를 실행합니다.
View > 팔레트 > flutter new project 선택 >
프로젝트가 저장될 폴더 선택 > 프로젝트명 지정
SDK 가 없다는 메세지가 나오면
locate SDK > Set Flutter SDK folder > flutter 의 bin 폴더 선택
실행하려면
flutter run 혹은 F5 를 누릅니다.
실행 대상을 선택합니다.
코드가 실행되는 환경은
비주얼 스튜디오 코드의 우측 하단에서 선택할 수 있습니다.
웹브라우저 크롬,
웹브라우저 엣지,
안드로이드 에뮬레이터 등을 선택합니다.
플러터의 위젯에 대하여
플러터에서의 위젯은
UI 를 만들고 구성하는 모든 요소를 말합니다.
text, icon, image, text field, button 등 눈에 보이는 요소들
center, padding, column 등 눈에 보이지 않는 요소들
위젯은
Stateless 위젯, Stateful 위젯, Inherited 위젯으로 구분됩니다.
Stateful 위젯
움직임이나 변화가 있는 위젯
사용자의 상호작용에 따라서 모양이 바뀌는 것
데이터나 상태에 따라 모양이 바뀌는 것
Stateless 위젯
상태가 없는 정적인 위젯
스크린상에 존재만 할뿐 아무것도 하지 않는 것
어떠한 실시간 데이터도 저장하지 않는 것
모양이나 상태를 변화시키는 값을 가지지 않는 것
부모위젯과 자식 위젯으로 구성되어 있음
MyApp 위젯은 최상위 위젯입니다.
> MaterialApp 위젯
> MyHomePage 위젯
> Scaffold 위젯
Scaffold 위젯은 빈 페이지에 해당합니다.
AppBar 위젯 > Text 위젯
Center 위젯 > Column 위젯 > Image, TextField, Button 위젯
플러터 앱 만들기
비주얼스튜디오 코도를 실행해서
프로젝트 생성합니다.
pubspec.yaml 파일
주요 설정 저장 파일
main.dart 파일
lib 폴더에 있음
main.dart 파일 기본 내용 작성해보기
제일 중요한 material.dart 라이브러리 불러오기
앱 실행의 시작이 되는 main 함수 작성하기
자동완성 기능 단축어 : fm
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
MyApp 위젯 만들기
MyApp 위젯은 프레임에 해당하므로 Stateless 로 지정한다.
자동완성 기능 단축어 : stl
커스텀 위젯은 다른 위젯을 리턴하는 build 함수를 가지고 있음
Container 위젯 대신 MaterialApp 위젯을 입력
자동완성 기능 단축어 : mate
class MyApp extends StatelessWidget {
const MyApp({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title : "First app",
theme : ThemeData( // 기본적인 디자인 테마
primarySwatch: Colors.blue
)
home: MyHomePage()
);
}
}
MyHomePage 위젯 만들기
단순한 그림만 출력할 것이기 때문에 Stateless 위젯으로 생성한다.
Container 위젯 대신 Scaffold 위젯을 입력
appBar 위젯 추가
class MyHomePage extends StatelessWidget {
const ({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold( //추가
appBar: AppBar( //추가
title: Text('First app') //추가
) ,
body: Center( //추가
child: Column( //추가
children: [ //추가
Text('Hello'), //추가
Text('Hello'), //추가
Text('Hello') //추가
],
),
),
);
}
}
'코딩' 카테고리의 다른 글
| 코딩 포스트 인덱스 페이지 (0) | 2021.05.03 |
|---|