Flutter UI

📌 UI 구성

• Scaffold : 기본 뼈대
• AppBar : 상단바
• Container : 빈 화면
• Text : 문자
• Center : 가로 기준 가운데 정렬
• Column : 아래로 (열)
• Row : 옆으로 (행)

- 화면 전환

• ElevatedButton : 기본 버튼
• 화면 전환 효과
  • Navigator.push → 다음 화면으로
  • Navigator.pop → 이전 화면으로

// 다음 화면으로 전환
body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 버튼 클릭 시 일어나는 이벤트
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen()),
            );
          },
          child: Text('다음 화면으로'),
        ),
      ),

// 이전 화면으로 전환
body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('이전 화면으로'),
        ),
      ),

- 텍스트 입력

• TextField : 인풋 창
  • 텍스트필드에 값 입력받아 넘겨줄 때는 변수 지정 → StatefulWidget 사용 (StatelessWidget option+enter : Convert to StatefulWidget)
  • 변수이므로 Navigator에서 const 삭제해줄 것

- 이미지 삽입

• Image.network : 이미지 주소 복사해서 입력
  • fit: BoxFit.cover, : width, height 지정해놓고 사진 크기를 그 사이즈에 맞출 때 (잘려나감)
• Image.asset : pubspec.yaml 파일에서 assets 추가하기

추가 위젯

• SingleChildScrollView : 화면에 표현할 내용 많을 때 감싸서 스크롤 생기게 할 수 있음. child 속성에 자식 위젯 배치하기만 하면 됨.
• ListView.builder : 데이터 많아도 렉 걸리지 않음.
• GestureDetector : 모든 위젯에 터치 기능 부여, onTap 부여하면 됨

📌 Tip

edit > find > replace > //.*\n → replace all : 주석 지우기
option+command+L : 라인 reformat
option+enter : Wrap with ~
command+b : 코드 포맷 확인

✔️ preferences > live template > 단축키 등록 ex : navpush
→ $name$ : 해당 부분에 마우스 커서 가게 설정

❗️반복되는 위젯 components로 작성해서 props로 넘겨받기