[flutter] Card 위젯을 이용한 메뉴판 화면 구성하기

12 Dec 2023

flutter

이번에는 Flutter 앱에서 Card 위젯을 사용하여 간단한 메뉴판 화면을 구성해 보겠습니다.

1. Card 위젯 소개

Card 위젯은 위젯을 그룹화하여 동일한 값을 가진 논리적인 하위 요소들을 시각적으로 나타낼 수 있는 Material Design의 구성 요소입니다. 각 Card는 영역의 가장자리가 둥근 사각형 모양으로 꾸며집니다. Card 위젯은 그림, 몇 가지 텍스트 및 작은 아이콘 유형과 같이 작은 조각의 정보를 보여줄 때 자주 사용됩니다.

2. Flutter 앱에 Card 위젯 추가하기

먼저, 메뉴 항목을 표시할 때 사용될 데이터 구조를 생성합니다. 다음은 각 메뉴 항목을 나타내는 MenuItem 모델의 예시입니다.

class MenuItem {
  final String title;
  final String description;
  final String imageURL;

  MenuItem({required this.title, required this.description, required this.imageURL});
}

그런 다음, 메뉴 항목 목록을 가진 Dart 리스트를 생성하고 여기에 MenuItem 객체를 추가합니다.

List<MenuItem> menuItems = [
  MenuItem(
    title: '아메리카노',
    description: '에스프레소에 물을 타서 내 만든 커피로, 향미가 가장 강한 Espresso라는 이탈리아어 말에서 따온 이름이다.',
    imageURL: 'assets/americano.jpg',
  ),
  MenuItem(
    title: '카페라떼',
    description: '에스프레소에 스팀밀크를 저으면서 만드는 커피로, 차분한 맛과 향미가 난다.',
    imageURL: 'assets/cafelatte.jpg',
  ),
  // 다른 메뉴 항목들 추가
];

이제 ListView.builder를 사용하여 각 MenuItem을 Card 위젯으로 만들어 화면에 표시할 수 있습니다.

ListView.builder(
  itemCount: menuItems.length,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        leading: Image.asset(menuItems[index].imageURL),
        title: Text(menuItems[index].title),
        subtitle: Text(menuItems[index].description),
        onTap: () {
          // 항목을 탭했을 때의 동작 추가
        },
      ),
    );
  },
)

3. 결론

Card 위젯을 사용하면 간단하게 목록을 보여줄 수 있으며, 각 항목을 터치했을 때 추가 작업을 수행할 수 있습니다. 메뉴판 앱이나 다른 유형의 목록 화면에 Card 위젯을 적절히 활용할 수 있습니다. Material Design의 가이드에 따라 사용자 친화적인 UI를 만들 때 유용한 위젯 중 하나입니다.

더 깊이있는 학습을 원하시거나 문제가 있을 경우 공식 Flutter 문서를 참조하시기 바랍니다.