1. Flutter 프로젝트 폴더 구성하기

2. 코드의 기본 내용을 알아보자

3. 앱 페이지 기본 구성 공식을 외워보기

4. Flutter 앱 실행을 해보기.

pubspec.yaml

앱을 만들때 버전 환경등 다양한 셋팅을 하는 곳이다.

android 폴더와 ios 폴더는 앱을 배포할때 정보를 갖고 있다고 생각하면 된다.

가장 중요한건 lib 폴더 입니다. 라이브러리 폴더라고도 부를 수 있고요.

앱을 만들때 여기서 거의 대부분의 작업을 진행 할겁니다.

자 우리는 main.dart의 있는 기본 소스 내용을 지우고 시작을 해보도록 하겠습니다.

플러터 머트리얼을 임폴트 해줘야 된다.

이것은 플러터의 위젯이랑 각종 기능들을 사용하기 위해서 무조건 입력을 해줘야 합니다.

import 'package:flutter/material.dart';

void main() => runApp(Myapp())

=> 함수를 호출해오는 것이다.

플러터의 최상위 함수는 runApp 이 호출 될때 위젯=아규먼트 를 들어와야 된다.

Myapp이라는 위젯(우리가 직접 만들어야 되는 위젯)을 불러온다.

클래스와 함수명

main(), runApp() -> 함수

첫글자를 소문자 넣는다 대부분 함수는.

클래스는 대부분 문자로 한다.

서로 결합한것을 앞에는 대문자. 카멜

MyApp() -> 위젯 

이 MyApp 위젯은 처음에 앱을 구동할때 뼈대를 만드는 역활만을 할것입니다. 정적인 위젯입니다.

정적인 의미의 StatelessWidget 를 만들어 줬고, MyApp이라는 우리만의 커스텀 클래스를 만들었습니다.

MyApp은 Container라는 것을 나를 호출한것에 넘겨주게 되는데 이것을 바꿔보도록 합시다.

우리가 필요한건 앱을 만들기 위한 머트리얼 기능을 가진 위젯입니다 이것을 가져 옵시다.

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container( ------>>return MaterialApp

    );

  }

}

MaterialApp 위젯도 반드시 아규먼트를 가져야만 합니다.

플로터의 모든 위젯들은 아규먼트를 가진다고 생각하면 됩니다.

앱을 총징하는 앱의 타이틀을 만들어 보도록 합니다.

MaterialApp은 타이틀이라는 문자열을 아규먼트로 가지고 있습니다.

 

 

ctrl + s 저장하고 바로 에뮬레이터 나올 수 있다.

 

오늘도 여기까지.. 서서히 머리가 아파 오는것 같지만

어색함이 익숙함이 될때까지 반복과 노력만 있을 뿐.

2021.04.19 오후 9시50분! 조이코딩연구소 장샘.

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Flutter doctor로 문제가 없는 확인 해보자.

2. 비쥬얼 스튜디오 코드로 프로젝트를 만들고 에뮬레이터 실행해보기

3. 안드로이드 스튜디오로 프로젝트 만들고 에뮬리터 실행해보기.

 

<Flutter doctor 확인하기>

Flutter가 정상적으로 동작되는 확인하기 위한 명령어 이다. Flutter doctor.

하지만 android toolchain 문제가 있네요. 친절하게도 해결하기 위해서는 flutter doctor --android-licenses 하라고 나와있습니다.

계속 그냥 Y를 누른다!! 쭈우우우우욱

완료가 되었으면 다시한번 Flutter Doctor를 실행해 본다.

정상적으로 작동하고 문제가 없다고 난온다!! No issues found!!!!!

---------------------------------------------Flutter doctor 확인하기 끝!! ----------------------------------------------------

2. 비쥬얼 스튜디오 코드로 프로젝트를 만들고 에뮬레이터 실행해보기

비쥬얼 스튜디오 코드를 실행하고 view -> command palette를 클릭 한다.

검색창에 Flutter를 클릭하면 프로젝트 생성하는게 나타난다.

프로젝트를 생성하고 에뮬레이터를 실행해 봅니다.

짜잔 에뮬레이터가 실행 된 것을 볼 수 있습니다.. 첫번째 Flutter 실행 화면 이네요.

3. 안드로이드로 플러터 생성하고 실행해보기

안드로이드 에서 New Flutter Project를 클릭하면새로은 프로젝트를 만들 수 있습니다.

이 프로젝트가 바로 우리 화면에 나올 것이죠.

Flutter Application을 클릭하여 Next!!! 과감히 클릭!!

 

Project Name은 여러분이 만들고 싶어하는 이름을 쓰면 되고요..

플러터 SDK 경로가 설정이 안되어있을겁니다.

여기를 설정해주셔야 됩니다. 플러터 파일 압축 풀었던 경로 아시죠?

저 경로는 사람마다 다르실거에요. 저는 C드라이브 Project폴더에 압축파일을 풀었거든요.

그리고 패키치 네임 입니다. 이것은 모듬 셋트라고 생각하시면 됩니다.

이름도 그냥 두고 그냥 광클릭 Finish!!!

화면 왼쪽에는 파일들을 보여주고. 오른쪽 화면에는 영어로 된 코딩된 글씨가 쫘악!! 나옵니다.

당장은 우리는 바꾸지 않고 에뮬레이터만 실행해 보도록 해요. 위에 3군데 클릭해서 확인해주세요.

1. SDK 빌드.. 어려우시면 그냥 따라서!!

2. 내가 만들어 놓은 핸드폰 에뮬레이터!! 선택해주시고.

3. 플레이 버튼 클릭!!! 했더니!! 화면이 검은색을 나오시나요?

우리 핸드폰에서 뒤로가기 버튼을 한번 눌러주시면 딱 바로 나옵니다!! 

어때요.. 오늘 저도 여러분도 플러터를 처음으로 실행시켜서 에뮬레이터로 본 날입니다!!

어려울겁니다. 당연히 어려운게 맞고요 누군가 만들고 우리가 공부한다는거 쉬운일은 아닙니다.

하지만 공부를 해야 쉬워지겠죠? 저도 차근차근 해볼테니 여러분도 화이팅 해보시죠. 

그럼 이만 조이코딩연구소 장샘. 2021.04.18 - 오후 12시46분

안녕하세요. 조이코딩연구소 장샘입니다.

본격적으로 구글에서 만든 Flutter(플러터)를 공부를 시작해보려고 합니다.

앱을 개발하기 위해서는 OS를 고려해서 해야 되지만 구글에서 만든 Flutter를 이용하면

안드로이드 OS와 애플 iOS에서 모두 구동이 가능한 앱을 만들수가 있습니다.

Flutter를 하기 위해서는 흔히 알고 있는 Java가 아니라 Dart라는 조금은 생소한 언어를 공부해야 합니다.

저 또한 처음 하는 것이라 기대 됩니다.. 어렵겠지만.. 차근차근 만들어보고 

앱도 만들어 보도록 하죠.

일단 음식을 만들때도 음식을 준비하는것이 가장 중요하듯이

코딩을 하기 위한 환경을 만드는것이 가장 중요하겠죠?

1. 안드로이드 스튜디오 설치

2. 비쥬얼 스튜디오 코드 설치

3. Flutter 다운로드 및 환경설정

3가지를 진행해 주시면 됩니다. 구글에서 검색하시면 바로 설치 가능 합니다.

저는 윈도우10 버전으로 시작하고 있고.

안드로이는 버전 4.1.2를 설치하였습니다. Flutter는 2.0이네요~!

안드로이드 설치 후에는 Configuration에서 Plugin -> Flutter를 설치 해주셔야 됩니다.

물론 Dart도 검색해서 설치 해 주시면 됩니다.

비쥬얼 스튜디오에서는 Extension(ctrl+shift+x)에서 Flutter를 설치해주시면 됩니다.

Flutter를 압축을 풀고 bin 폴더로 가신뒤 폴더의 경로를 복사후에 

윈도우 돋보기에서 시스템 환경변수 클릭 -> 환경변수 클릭 -> 시스템 변수 창에서 Path 를 선택 후 편집

거기서 새로 만들기 후 Flutter Bin 폴더의 경로를 넣어 주시면 됩니다.

자 이렇게 기본적인 설정이 완료 되었습니다. 

이렇게 저지르고 나면 매일매일 얼마나 공부하는지 끄적끄적 기록해보려고 합니다.

그럼 우리 모두 생각을 현실화 할 수 있는 능력을 기를때까지..

모두모두 화이팅.

2021.04.17 오후 11시28일 from 조이코딩연구소 장샘.

 

+ Recent posts