How Flutter works?

flutter프레임워크는 다른 크로스플랫폼처럼 운영체제와 직접 애기해지 않는다
즉, 운영체제에 대한 어떠한 제약 사항이 없다
위젯이나 화면상에 보여지는 모든 것들은 호스트(운영체제)에 의해 그려진 것이 아니고 c나 c++언어로 이루어진 엔진에 의해 렌더링된다
단점으로는 네이티브 앱들이 지니고있는 컴포넌트나 위젯들을 가질 수 없다.
flutter에서 위젯 등 보여지는 것들은 실제가 아니라 만들어낸것이기 때문에 부자연스러움이 있을 수 있다

Flutter vs Native

• Flutter
  세밀한 디자인 요구사항이 있거나 100% 커스터마이징하고 싶은 경우
  외부 패키지에 의존하지 않고 고수준의 애니메이션을 구현하고 싶은 경우

• React Native
  네이티브 앱 운영체제 상에서 가능한 위젯을 사용해야하는 경우
  디자인이 ios 혹은 android앱처럼 보이게끔 만들고 싶은 경우

install

ios기준입니다)
1. homebrew를 설치-> online package browser
2. brew install --cask flutter

3.플랫폼 설정
macOS는 iOS, Android, macOS 자체 및 웹용 Flutter 앱 개발을 지원한다.
Flutter 앱을 빌드하고 실행할 수 있도록 지금 플랫폼 설정 단계 중 하나 이상을 완료해야한다

• iOS용 Flutter 앱을 개발하려면 Xcode가 설치된 Mac이 필요->xcode설치
• 명령줄에서 다음을 실행하여 새로 설치된 Xcode 버전을 사용하도록 Xcode 명령줄 도구를 구성
  1.sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  2.sudo xcodebuild -runFirstLaunch
• iOS 시뮬레이터에서 Flutter 앱을 실행하고 테스트하기 위해 아래 명령입력
  open -a Simulator

4. 폴더를 생성한 후에 터미널에서 flutter create . 으로 프로젝트를 만든다

완성!!!!!!!!!!!!!

만약 flutter.zip을 다운 받는 경우,

맥북 환경변수 등록>
터미널이름이 zsh면
touch ~/.zshrc 파일생성
open ~/.zshrc 파일오픈
터미널이름이 bash면
touch ~/.bash_profile 파일생성
open ~/.bash_profile 파일오픈

Pub.dev

React에서 npm을 사용한것처럼 Flutter에서는 pub.dev를 이용한다

UI

ui관련 vscode settings

settings.json파일에서 설정할 수 있다
"source.fixAll": "explicit" ->자동으로 상수값 const를 붙여주는 설정
"dart.previewFlutterUiGuides": true -> 부모 가이드를 제시하는 선을 만들어준다

"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
}

"dart.previewFlutterUiGuides": true, 

플러터 외 다른 프로젝트에서 source.fixAll을 하고싶지 않다면 플러터에만 적용한다고 명시해주어야합니다

{
"[dart]": {
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
}

또는 이 프로젝트에만 적용하려고 한다면 프로젝트 루트에서 .vscode폴더를 만들고 settings.json을 만들어서 위에 설정값을 넣어준다면, 해당 프로젝트에서만 적용되는 설정을 오버라이딩 할 수 있습니다

Row는 가로가 main ->CrossAxis는 세로방향
Column는 세로가 main -> CrossAxis는 가로방향

ui

즉, 요소들을 서로 옆에 두려면 Row를 사용
요소들을 위 아래에 놓으려면 Column을 사용

• child
  "container","Text","Image"등과 같은 단일위젯을 사용할때에 사용

  Container(
    child:Text("hello world")
  )

• children
  "Column","Row","ListView' 와 같은 여러개의 자식을 가지는 위젯을 다룰때 사용

Column(
  children: [
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
  ],
)

code actions

flutter 특성상 큰 블럭에 작은 블럭을 집어 넣는 형식으로 생겨있다
작업을 하다가 감싸는 블럭을 추가해야하면 전체를 잘라내기 복사붙여넣기 작업을 반복해야한다,,,
이 작업을 단순화 하기위해 변경 해야하는 코드를 클릭 시,
전구 모양(💡)이 옆에 나타나고 처리할 작업을 지정하면 자동으로 위 과정을 실행시켜준다

단축키=> command+.

BuildContext

위젯 트리에서 현재 위젯의 위치와 관련된 정보를 제공하는 객체
Flutter 앱은 위젯 트리로 구성되어 있으며, 각 위젯은 부모 위젯으로부터 BuildContext를 받아와서 사용
react의 contextAPI와 비슷한 기능을 한달까...?🧐

theme:ThemeData(
  theme:themeData(
  textTheme:const TextTheme(
   titleLarge:TextStyle(
     color:Colors.red,
   ),
  ),
  ),
)

만약에 부모에 있는 theme을 자식 위젯에서 공유하고 싶다면
TextStyle(color:Theme.of(context).textTheme.titleLarge?.color)

lifecycle

1. initState()
   빌드를 하기 전에 항상 먼저 실행된다
   대표적으로 API를 불러올 때 사용
2. dispose()
   화면에서 사라질 때 실행
   예시)) api업데이트나 이벤트리스너로부터 구독을 취소할때

@override
void initState(){
  super.initState();
 
}

@override
void dispose(){
  super.dispose();
}

user interface

flexible를 사용하면 화면상에 비율을 조절할 수 있다

Flexible(
flex:1
),
Flexible(
flex:2
),
Flexible(
flex:1
)

Router

Navigator.of(context).push()
Navigator.of(context).pop()
push : 화면을 위에 올려놓는것.
pop: 화면 제일위에 있는걸 빼 내어서 기존 화면으로 돌아가게 함.

//stateless
  void _onLoginTap(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const LogInScreen(),
      ),
    );
  }
  GestureDetector(
    onTap: () => _onLoginTap(context),
      )
 
//stateful
  void _onNextTap() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const EmailScreen(),
      ),
    );
  }
 GestureDetector(
     onTap: _onNextTap,
     )

statefulwidget 안에 state안에 있다면 어디서든 context을 쓸수있기 때문에 파라미터로 context가 필요x

Navigator.push(context, route)와 Navigator.of(context).push(route)는 같은 동작을 합니다