레시피 앱 만들기

 

레시피 앱 뼈대 구성하기

 

폰트랑 이미지는 아래링크에서 가져온다.

https://github.com/flutter-coder/flutter-ui-book1/tree/master/flutter_recipe/assets

 

 

pubspec.yaml에서 이미지 파일과 폰트 파일 인식을 위한 자원 폴더 위치 설정

Pub get 버튼을 클릭하여 적용시킨다.

 

기본코드 작성

1. 레시피 앱 타이틀 기본 코딩하기.

stl이라고 적으면 자동 완성이 됩니다.

 

2. 레시피 앱 메뉴 모음 기본 코딩하기.

 

3. 레시피 앱 리스트 아이템 기본 코딩하기.

 

4. 레시피 앱 페이지 기본 코딩하기

 

5. 레피시 앱 main.dart 파일 기본 코딩하기.

 

위코드를 다 작성하면 아래와 같은 기본 화면이 나오게 된다.

 

 

Icon 위젯

Icon 위젯은 Icon을 표시해주는 위젯이다. 

MaterialIcon 또는 CupertinoIcon 중 원하는 Icon을 사용 할수 있다.

 

RecipeTitle 커스텀 위젯 만들기

 

Theme에 Font 적용하기

 

 

Container 위젯을 활용한 RecipeMenu 커스텀 위젯 만들기

1. Container 위젯 정의

Container 위젯은 빈 박스 위젯이다. SizedBox 위젯과 차이점이 있다면 Container는 내부에 decoration 속성이 있어서 박스에 색상을 입히거나 박스의 모양을 바꾼다거나 테두리 선을 줄 수 있습니다. SizedBox 위젯은 보통 마진(margin)을 줘야 할때 사용합니다.

 

2. Container 위젯 특징 - 완전중요!!!!!!!!!!!!!!!!!!

첫째, 자식이 없는 Container는 가능한 한 박스를 크게 만들려고 합니다.

- block 속성처리

 

 

둘째, 자식이 있는 Container는 자식의 크기에 맞게 조정됩니다.

- Inline-block 처리

 

 

 

잘린 밑에부분 코드