[Udemy] Flutter 앱 개발 기초 2

1. StatelessWidget: 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯

• extends StatelessWidget: StatelessWidget의 기능을 물려받음
• 생성자: 클래스 이름과 동일한 함수
• build 함수: 화면에 보여줄 자식 위젯 반환

 

2. StatefulWidget: 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯

• MyApp: StatefulWidget의 기능을 물려받은 클래스
• _MyAppState: MyApp 상태를 가진 클래스, build 함수를 가짐
• setState() 호출 시 build() 함수 재실행, 화면 갱신

 

3. 레이아웃(Layout): 원하는 위치에 원하는 요소를 배치하는 작업

• 기본 위젯
  • Text
  • Container: Box 형태의 기본적인 위젯
    • margin: 박스 바깥 영역
    • padding: 박스 안쪽 영역
    • alignment: child 정렬
    • boxDecoration: Container의 테두리, 그림자, 색상 등을 꾸밀 때 사용
  • Icon
  • Image
• 레이아웃(Layout) 위젯
  • Scaffold: 한 페이지의 레이어를 쉽게 구성할 수 있도록 틀을 잡아줌
    • appBar: 앱 상단 영역
    • body: 화면에 가장 넓은 면적 차지
    • bottomNavigationBar
      • items: 각각의 메뉴 버튼들이 모여있는 배열(List)
      • currentIndex: 현재 선택된 items의 index
    • floatingActionButton
      • onPressed: 익명함수를 전달받고, 내부적으로 클릭되었을 때 해당 익명함수를 호출해주는 방식으로 동작
  • Column: 세로 방향에 대한 레이아웃을 잡을 때 사용
    • mainAxisSize: 세로 방향에 대한 크기
    • mainAxisAlignment: 세로 방향에 대한 정렬
    • crossAxisAlignment: 가로 방향에 대한 정렬
  • Row: 가로 방향에 대한 레이아웃을 잡을 때 사용
    • mainAxisSize: 세로 방향에 대한 크기
    • crossAxisAlignment: 가로 방향에 대한 정렬
  • Stack: 화면에 위젯을 쌓고 싶을 때 사용하는 위젯
    • children에서 아래에 있는 위젯이 더 위에 표시
    • alignment 를 사용하여 자식 위젯 이동 가능
    • Positioned를 사용하여 Stack 내부에서 원하는 위치에 배치 가능
  • SingleChildScrollView: Child 위젯이 화면 스크린보다 큰 경우, 스크롤이 가능하도록 함

 

4. TextField

• autofocus: 해당 위젯이 화면에 보일 때 바로 포커스 되는 지의 여부
• onChanged: 텍스트 변경 시 현재 입력된 값이 파라미터로 넘어오는 함수
• onSubmitted: Enter 입력 시 현재 입력된 값이 파라미터로 넘어오는 함수

 

5. Button

• ElevatedButton: 위로 올라와 있는 듯한 버튼
• TextButton
• IconButton

 

6. 라우트(Route)

• 라우트(route): 각 화면
• 네비게이터(Navigator): 화면 이동 시 사용
  • Navigator.push(): 다음 페이지로 이동
  • Navigator.pop(): 현재 화면 종료
• 화면이 많아지는 경우, Named Route 방식을 사용하기도 함

 

https://www.udemy.com/course/devstory_flutter/