플러터 설치하는 과정은 다른 포스팅이 잘되어 있는게 많아 참고를 했다.
https://flutter-ko.dev/docs/get-started/install/macos
맥OS에서 설치
flutter-ko.dev
플러터 공식 문서,
1. 안드로이드 스튜디오 설치
2. flutter 파일 설치
3. xcode(only need for mac) 설치
https://www.youtube.com/watch?v=xJlBF9NgDag
여기서 서브라임 텍스트를 통해 ~/bin 파일을 ~/.zshrc로 저장하는 방식인데, 이미 기존에 많은 셋팅들이 들어가 있는터라 그럴 순 없었고,
iterm2에 vscode 연결이 되어있다면 code ~/.zshrc 아니라면 open ~/.zshr 로 파일을 열어서 직접 수정해준다!!
https://www.youtube.com/watch?v=usE9IKaogDU
path 경로 설정하는 부분에서 멀 해도 뻑이나서 지구 뿌실듯이 (맥을 부술 수는 없으니깐...) 화났지만.. 해결책을 찾았다.
<javascript />
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
공식 문서에는 이렇게 되어 있는데 실상은
<javascript />
export PATH=$PATH:"[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
//export PATH=$PATH:"/Users/알리코드마스터파일/flutter/bin"
으로 끈따옴표 위치를 이렇게 해야 오류가 안났다.
플러터 파일을 난 Home 폴더에 설치를 해서 경로가 이러한데, 사실 데스크탑이든 직박구리 폴더 안이든 설치한 경로 /bin 만 해주면 된다.
플러터 path를 잘해주었다면 이제 터미널에서 flutter 명령어를 사용할 수 있다.
flutter doctor
<bash />flutter doctor
를 사용해서 플러터를 실행하기에 셋팅이 미흡한 부분을 검증하고 설치하고 해준다. 윗 영상드에 너무 소개가 잘되어 있다.
터미널에서
<bash />flutter create 작명
생성하고 싶은 프로젝트를 만들어주면 밑 화면이 나온다.
flutter은 lib 파일안에 main.dart 파일에서 모든 작업이 이루어 진다고 한다.
만들어진 예시 파일안에 주석으로 된 설명을 보면 대충 어떤 기능을 하는지 알 수 있지만, 영어 울렁증이 있어서(코딩하면서..?) 읽다 포기했다. 다 없애주자
<kotlin />
import 'package:flutter/material.dart';
//1.무조건 플러터 머테리얼 라이브러리 불러오기
void main() => runApp(MyApp());
//2. void(텅빈공간) main함수 실행 후 아무것도 반환하지 않느나는 뜻.
// 내가 작성한 코드를 컴퓨터가 번역할때 이 메인함수부터 참조 한다고 한다.
// => 메인함수가 호출한다.
//runApp(위젯명작명) 함수 불러오기 그리고 무조건 위젯을 알규먼트값으로 가져야 한다.
// 뼈대만 만든것임 !
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
//3. 모든 커스텀 위젯은 또 다른 위젯을 retrun 하는 빌드라는 함수를 가짐
return MaterialApp(
//4, 디자인을 할 수 있는 머터리얼 앱 위젯 설정하기
//실질적으로 모든 위젯을 감쌈
title: "FirstApp",
//5.title 이라는 알규먼트 값.
theme: ThemeData(primarySwatch: Colors.blue), //ThemeData
//6.테마 알규먼드 : 테마데이트 알규먼트(프라이머리스와치 알규먼트 : 색 값.)
home: MyHomePage(),
//7. 홈은 앱이 실행되었을 떄 가장 먼저 보여주는 경로.
//8 앱이 실행되면 MyHomePage 위젯을 먼저 보여줌
);
}
}
//3. 스테이트레스 위젯을 설정 (정적)
//clas 뒤에 위에서 작명한 위젯을 넣어준다.
//
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
//10. 스케폴드 위젯 중요!! 무조건 놓는다. 도화지 같은 존재
appBar: AppBar(
title: Text("Hellow World!"),
//11. 머터리얼 위젯에서는 바로 텍스트 값을 주지만 여기서는 텍스트 위젯을 불러옴
),
//appBar : AppBar() > 앱바 알규몬트는 앱바 위젯이다 라는뜻
body: Center(
//12. 센터 위젯 은 자식 위젯들을 가짐
child: Column(
//13.컬럼 위젯은 또다른 자식을 가짐
children: [Text("Hellow"), Text("Hellow")],
),
// 14. center > child > childern 순
// 어레이형으로 텍스트 위젯들을 넣어준다.
),
);
}
}
//9. MyHomePage 위젯을 스테이트레스 위젯으로 생성
머터리얼뗌 위젯 밑에 커스텀 위젯을 만들어주고 커스텀 위젯의 알규먼트인 appbar 의 알규먼트인 Title , body 를 통해 개발을 본격적으로 시작한다.
머터리얼템에서 타이틀은 HTML <head></head> 에 들어가는 타이틀 테그의 역활을
하위 위젯들에서 들어가는 Title('')위젯들은 <p> 의 역활을 해주는 듯 하다.
HTML 이랑 Js 랑도 너무 달라도 다른 플러터... 공부 계속 해보자
