[flutter] Card 위젯을 이용한 푸드 레시피 앱 화면 구성하기

12 Dec 2023

flutter

푸드 레시피를 공유하고 소비자에게 제공하는 앱은 사용자 경험과 인터페이스가 중요합니다. Flutter를 사용하여 카드 위젯을 활용하여 푸드 레시피 앱 화면을 구성하는 방법을 알아보겠습니다.

1. 카드 위젯 생성

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('식단 계획'),
        subtitle: Text('매일 먹는 식단을 계획하세요.'),
        leading: Icon(Icons.restaurant_menu),
      ),
      Divider(),
      ListTile(
        title: Text('장보기 목록'),
        subtitle: Text('가장 필요한 생필품을 추가하세요.'),
        leading: Icon(Icons.shopping_cart),
      ),
    ],
  ),
)

2. 그리드 뷰에 카드 위젯 배치

GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Card(
      child: Column(
        children: <Widget>[
          Image.network('https://via.placeholder.com/150'),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              '레시피 $index',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }),
)

마치며

카드 위젯은 다양한 정보를 시각적으로 보기 쉽게 만들어주는데 효과적입니다. 푸드 레시피 앱을 개발할 때 카드 위젯을 효과적으로 활용하여 사용자가 직관적으로 정보를 파악할 수 있도록 도와줄 수 있습니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.