[Flutter] 아는거 정리

앱 개발

• Kotlin: Android
• Swift: iOS
• Flutter, React Natice: Both

Flutter >> React Native

• 하나의 코드베이스
• 성능 굿
• Dart 하나로 레이아웃, 기능, 스타일 커버

Lint 관련 warning 제거

rules:
  prefer_typing_uninitialized_variables: false
  prefer_const_constructors_in_immutables: false
  prefer_const_constructors: false
  avoid_print: false
  prefer_const_literals_to_create_immutables: false

한글을 에러로 인식할 때

File > Settings > Editor > Inspections > 상단 Profile을 Default로 선택 > Proofreading > Typo 체크 해제

저장 시 자동 코드 포맷팅

file > settings > languates & Frameworks > Flutter > Format on save 체크

단축어

• stless
• stful

단축키

• ctrl + space: 파라미터 확인
• alt + 0: Commit 탭 제어
• alt + 4: Run 탭 제어
• ctrl + alt + l: 포맷팅

이미지 넣기

• 프로젝트 최상단에 assets/ 폴더 만들고 이미지 파일 담기
• pubspec.yaml > flutter: assets: > 하단에 - assets/ 추가
• 위젯 내 경로 예시: 'assets/coolgam.png'

색상 넣기

• color: Colors.amber
• color: Color.fromRGBO(r, g, b, o)
• color: Color(0xffffc107)

LP: Logical Pixel

• px 안쓰는 이유: 기기마다 픽셀의 절대 크기가 다름
• lp: 해상도와 관계없이 일정한 크기를 갖는 추상적인 단위, 화면 크기와 독립적
• 해상도 낮은 폰에서 lp 하나랑 장치 픽셀 하나가 맞먹는다 치면 해상도 높은 폰에선 lp 하나가 장치 픽셀 2개에 해당될 수도 있는 것

처음보는 레이아웃도 쉽게 만드는 방법

1. 디자인 준비
2. 모든걸 최대한 빈틈 없이 네모 박스로 표시하기
3. 가장 바깥 네모 박스부터 코드로 옮기기
4. 가로 세로는 Row와 Column 위젯 사용하기

상태: state

• StatefulWidget 안에 있는 변수 = state
• setState((){ state 변경 코드 })
• state 쓰는 위젯은 state 변경되면 재렌더링됨
• state 내리기(패륜, 불륜 전송 불가/부모 → 자식만 가능)

context

현재 위젯의 조상 위젯들에 대한 정보를 담음, 쉽게 말해 족보 개념

class MyApp extends StatelessWidget {
  ...
  build (context) {
    return MaterialApp(
      home : Scaffold(
        body : Custom()
      )
    );
  }
}

class Custom extends StatelessWidget {
  ...
  build (context) {
    return Text('족보');
  }
}

Custom 위젯 안의 context에는 Scaffold, MaterialApp 정보가 들어있고
MyApp한텐 부모가 없으므로 context에도 암것두 없음

context가 필수인 함수

• Navigator()
• Theme.of()
• Scaffold.of()
• showDialog(): 특히 MaterialApp 정보 필수

build (context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: (){
            showDialog( 
              context: context,
              builder: (context){ return Dialog( child: Text('안녕'), ); },
            );
          },
        ),

이 경우 MaterialApp의 context(정보 없음)를 갖다 쓰게 되므로 에러 발생
→ MaterialApp을 이 부모로 들어있는 context를 하나 만들(MaterialApp을 바깥으로(부모쪽으로) 보내)거나
→ Builder(builder: (context2) {return FAB(.. (context2)(return Dialog(..)))} 사용
→ Builder 쓰면 복잡해지니 응급 시에 사용, 보통 MaterialApp을 바깥으로 빼서 해결

null 체크

• 타입 지정 잘 하거나 등호 잘 넣거나
• 삼항연산자 혹은 ?? 문 활용
• 앱 빌드 전 확인하기

기타

• 좌측 전구: 자동 완성, 감싸기, 변환, 설치 등

문자와 변수

• 문자 중간에 변수를 넣고 싶을 때
• Text('원래 있던 문자 ${넣고 싶은 변수}')