오늘 배울 것
1. Class와 Widget의 정체
- 생성자와 관련된 함수의 구조와 기능
- 생성자의 구조와 역할
- 클래스와 위젯의 관계
2. app bar메뉴 아이콘 추가 하기
3. Drawer 메뉴 만들기
4. BuildContext 이해하기
5. Snack bar
| 12강 플러터 다트 핵심정리: 클래스와 위젯의 정체 1 |
■ 프로그래밍 상에서의 Class란?
- 객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 설계도 역할
■ 프로그래밍 상에서의 객체란?
- 클래스가 정의된 후 메모리상에 할당되었을 때 이를 객체라고 함
■ 프로그래밍 상에서 Instance란?
- 클래스를 기반으로 생성 됨
- 클래스의 속성과 기능을 똑같이 가지고 있고 프로그래밍 상에서 사용되는 대상
Person 클래스로, p1이라고 불리는 새로운 인스턴스를 생성한다.
| 13강 플러터 다트 핵심정리: 클래스와 위젯의 정체 2 |
Constructor(생성자)
ㄴ함수의 모양
( ): argument, 인자값이 들어옴, 여러 개 넣을 수 있음
{ }: 함수의 body 부분, 함수가 실행할 기능
return: 값을 반환하고 싶을 때
Dart는 타입 랭귀지, 타입 추론이 가능.
dart 내의 모든 것은 타입을 가지고 있음을 의미.
named argument
constructor argument를 중괄호로 묶어주면
모두 optional, 즉 선택사항으로 바뀜.
★widget은 class를 통해 생성된 instance임.
예를 들어 appBar widget은 appBar constructor를 통해서 여러 개의 argument들을
named argument의 형태로 필요한 만큼 선별적으로 사용해서 만들어진 instance라고 할 수 있음.
(widget을 class로 표현하기도 함. 하지만 엄밀하게는 instance라고 볼 수 있음.)
| 14강 app bar 메뉴 아이콘 추가하기 |
이제 앱바 오른쪽에
검색과 장바구니 버튼을 넣어보자.
<정리>
leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때
action: 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
onPressed: 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의
| 15강 Drawer 메뉴 만들기 1 |
(drawer head(핑크) 부분 + 메뉴(흰색)로 구성)
drawer menu를 생성하면 자동으로 왼쪽 바에 햄버거 모양이 추가 됨.
즉 저번 시간에 배운 것처럼 leading으로 따로 넣어줄 필요가 없음.
즉, drawer argument는 scaffold widget에 속해있는 속성임.
즉 appbar가 아닌 scaffold에 생성한다.
ListTile: List의 한줄한줄을 의미.
ListTile에는 각 요소의 배치가 필요함.
여기까지 구현한 상태.
| 16강 Drawer 메뉴 만들기 2 |
이제 오른쪽 위 이미지를 추가해 보자.
onPressed: 주로 버튼에 사용
onTap: gestureDetector, InkWell 사용
가령 길게 누르기, 두 번 탭하기 등, 어떤 동작에 대한 반응하는 이벤트에 사용
이제 아래 메뉴 부분을 만들어 보자.
그 전에 잠깐 짚고 넘어 갈 것.
trailing은 오른쪽 끝나는 점에 아이콘과 이미치 배치하는 속성.
예제에는 없지만 한 번 추가해 보자.
오른쪽에 add 아이콘이 추가 된 것을 볼 수 있다.
그럼 이전전 시간에 배운 action이랑 뭐가 다르지? 흠
| 17강 아리송한 BuildContext 이해하기 |
BuildContext의 두 가지 정의에 대해 알아보자.
■첫 번째 정의: 위젯 트리에서 현재 위젯의 위치를 알 수 있는 정보를 가지고 있음
Widget 타입의 build,
build 메소드의 BuildContext 타입의 context 인자값.
■두 번째 정의: 모든 위젯은 자신만의 BuildContext를 가지고 있다.
이 BuildContext는 stateless위젯이나 state 빌드 메서드에 의해서 리턴 된 위젯의 부모가 된다.
statelessWidget으로 Mypage라는 커스텀위젯 생성,
이 Mypate라는 커스텀위젯도 자신만의 BuildContext 타입의
context를 가지고 있음.
build 메서드를 통해서 Scaffold 위젯이 리턴이 되었고
이때 Scaffold 위젯은 부모인 Mypage에 context를 그대로 물려받는다.
Scaffold의 위치를 알기 위해 context를 참조하면
이런 에러가 뜬다.
context가 Scaffold의 정보를 가지고 있지 않기 때문.
뭔 말인지 모르겠다ㅠ
| 18강 스낵바(Snack bar)와 BuildContext |
스낵바(Snack bar): 스크린 하단에 간단한 메시지를 띄우는 기능
그리고 Scaffold.of 에 대해 알아 보자.
*자주 사용하는 버튼 세 가지
FlatButton
RaisedButton
FloatingActionButton
(디자인과 모양만 다를 뿐 기능상 차이는 없음.)
반드시 Scaffold.of 메소드를 통해 Scaffold 위치를 참조한 후,
showSnackBar라는 메서드 내에서 스낵바를 구현해야 함.
스낵바는 Scaffold 위에서 그려져야 하기 때문에
flutter가 Scaffold의 정확한 context를 참조해서 그곳에 스낵바를 그릴 수 있도록 알려줘야 함.
즉, Something.of 메소드는 반드시 위로 거슬러 올라가면서
가장 가까운 Something을 찾아서 반환하라는 뜻.
그리고 BuildContext와 context의 차이점?
context는 BuildContext Class의 instance임.
즉 이름 바꿔도 상관 없음.
★꿀팁: 코드 포맷팅 하는 하는 단축키 설정
Format Document 를 우클릭해서
Change Keybinding을 찾아서 설정
자 이제 저장을 하고 플랫버튼을 눌러보자.
지난 시간에 이해 못 했던 에러 메시지가 뜬다.
Builder 함수 생성 후 return 뒤에 다시 집어 넣기.
바꾼 것은
Builder 함수 내에서 center 위젯을 return 했다는 것 뿐임.
'코딩쉐프 강의 복습' 카테고리의 다른 글
| 리스트뷰(ListView)에서 데이터 전달하고 페이지 이동하기(중요), List.generate (4) | 2025.06.21 |
|---|---|
| 온보딩 스크린, 리스트뷰 빌더와 다이어로그 팝업창 (2) | 2025.06.19 |
| Snack bar, Toast message, Container, Column, Row, pushNamed method, Collection&Generic, 패치강좌(snack bar, ScaffoldMessenger, 버튼디자인활용하기) (3) | 2025.06.18 |
| 캐릭터 페이지 디자인 하기 (4) | 2025.06.16 |