- runApp에 MyApp1을 만들어줍니다.
- MyApp1 은 stl로 생성합니다.
- 이번에는 따로 빼서 페이지를 진행할 수 있게 합니다.
MaterialApp → home에다가 페이지를 만들어줍니다.
RecipePage로 만들겠습니다.
RecipePage는 stl로 생성하고, Scaffold부터 시작합니다.
이번에는 상단에 AppBar를 사용해보겠습니다.
AppBar 구조
AppBar의 actions영역에 아이콘을 넣어보겠습니다.
class RecipePage extends StatelessWidget {
const RecipePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Icon(Icons.search),
SizedBox(width: 15),
Icon(CupertinoIcons.heart, color: Colors.red)
],
));
}
}
AppBar영역에 두 아이콘이 생성되었습니다.
ListView 사용하기
listView를 사용하는 이유로는
Column만 사용하게 된다면
컨텐츠가 화면보다 많아진다면 이미지가 깨집니다.
많은 컨텐츠들을 다 보여주게끔 하는 것은 ListView를 사용하면 됩니다.
ListView 위젯은 여러 위젯을 포함할 수 없습니다.
children 속에 Column이나 Row 위젯을 사용하여 다수의 컨텐츠를 배치할 수 있습니다.
ListView 에 Column을 통해 세로로 컨텐츠들을 배치하겠습니다.
Text위젯 → Row위젯 → Placeholder위젯 으로 배치되고
페이지가 깨지지 않은 것을 확인할 수 있습니다.
Container 사용하기
Row위젯 안에 Container위젯을 사용한 모습입니다.
Container는 HTML의 Div에 해당하는 위젯입니다.
- Row의 Container에 속성들이 적용된 모습
Container를 꾸며보겠습니다.
decoration을 통해 Container를 사용할 수 있습니다.
BoxDecoration의 속성들을 통해 Container를 꾸밀 수 있습니다.
- Container의 border 속성들이 적용된 모습
다음으로 컨테이너 속에 위젯들을 추가해보겠습니다.
컨테이너 속에 위젯들을 세로로 배치시키기 위해 Column을 사용한 코드입니다.
mainAxisAlignment: MainAxisAlignment.center, 를 통해 위젯들이 중앙에 위치할 수 있도록 했습니다.이하 Icon위젯을 통해 이미지를 넣고 아래에는 Text위젯을 사용했습니다.
컨테이너 속에 아이콘과 글자가 적용된 모습
외부 라이브러리 이용하기
여기서 텍스트 폰트를 변경하도록 하겠습니다.
외부 라이브러리를 사용하여 tool에 기본으로 있는 폰트말고 다른 폰트를 사용하겠습니다.
pub.dev 사이트를 통해 외부 라이브러리들을 사용할 수 있습니다.
font를 검색하면
위와 같이 나옵니다. google_fonts를 사용해보겠습니다.
flutter에 적용하는 법
원하는 라이브러리에 가서 Installing으로 갑니다.
플러터의 터미널에 해당 명령문을 입력하면
Pub에 적용이 된 것을 확인할 수 있습니다. (restart 해줘야함)
적용시킨 라이브러리 사용
제일 첫 MaterialApp에서 ThemeData의 textTheme을 통해 적용하고자하는 폰트를 사용합니다.
텍스트들이 적용된 것을 볼 수 있습니다.
이제 모든 틀이 잡힌 Container == 컴포넌트를 따로 빼내겠습니다.
리펙터에서 flutter 위젯으로 빼내기가 있습니다.
해당 기능을 통해 따로 위젯으로 빼내어 관리할 수 있습니다.
이후 Row도 같은 방식으로 빼서 위젯으로 관리하겠습니다.
Row를 빼두면 위와 같은 형태가 됩니다.
MenuItem 은 위젯으로 관리하는 Container가 됩니다.
생성자를 통해 적용할 아이콘과 텍스트를 받아내고 있습니다.
MenuItem입니다.
myIcon과 myText는 반드시 받아야하는 값이기에 final을 붙였습니다.
이후 사용하기 쉽게 required를 사용해서 어느 값을 받아야 하는지 명시 해 줄 수 있습니다.
적용된 페이지
FoodItem 컴포넌트 만들기
코드와 적용된 페이지입니다.
수정해야하는 부분이 있습니다.
단순히 Image를 넣었을 경우 페이지의 크기가 달라지면
이미지가 깨질 수 있습니다.
이를 방지하기 위해서 image가 포함된 부분을
AspectRatio 위젯을 통해 보호해야합니다. 
image 부분을
AspectRatio 를 통해 보호하고 있습니다.aspectRatio 속성을 통해 이미지의 비율을 보호하고 ,
Image의 fit ⇒ BoxFit.cover를 이용해 이미지가 깨지지 않고 유지되게끔 만들어 줬습니다.
aspectRatio로 이미지가 보호된 페이지
이제 위젯으로 따로 관리할 수 있게 끔 만들어 주겠습니다.
FoodItem위젯으로 따로 빼서 관리 할 수 있게 된 모습입니다.
하지만 이미지와 text가 각자 달라야하니 이름있는 생성자로 수정해야합니다.
수정한 위젯입니다.
위젯에 적용되어 각 text에 맞는 이미지와 text들로 변환된 모습을 볼 수 있습니다.
이하 RecipeApp만들기였습니다.
참고
Column은 center가 기본값으로 텍스트가 배치된다.
ListView는 start가 기본값으로 텍스트가 배치된다.
Share article
