Colin's Blog
[flutter] Card 위젯을 이용한 음식 주문 앱 화면 구성하기
  1. 개요
  2. Card 위젯
  3. 음식 주문 앱 화면 구성
  4. 요약
  5. 참고 자료

1. 개요

Flutter는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 다양한 UI 요소를 제공하여 효율적으로 화면을 구성할 수 있습니다. Card 위젯은 이 중에서도 정보를 담은 사각형 형태의 위젯을 만들기에 유용합니다.

2. Card 위젯

Card 위젯은 그림과 같은 작은 부분을 만들 때 유용합니다. 그림, 텍스트 및 작업과 같은 명확한 부분을 표시하고 그 부분을 둘러싼 노출되지 않은 부분에 대한 추가 정보를 제공할 수 있습니다.

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.restaurant_menu),
        title: Text('식당 이름'),
        subtitle: Text('음식 내용'),
      ),
      ButtonBar(
        children: <Widget>[
          FlatButton(
            child: const Text('주문하기'),
            onPressed: () {/* ... */},
          ),
        ],
      ),
    ],
  ),
)

3. 음식 주문 앱 화면 구성

음식 주문 앱의 화면은 Card 위젯을 사용하여 각 음식 항목을 표시할 수 있습니다. 각 Card는 음식 이미지, 이름, 설명 및 주문 버튼으로 구성됩니다.

ListView(
  children: <Widget>[
    Card(
      child: Column(
        children: <Widget>[
          Image.asset('assets/food1.jpg'),
          ListTile(
            title: Text('피자'),
            subtitle: Text('종류: 페퍼로니'),
          ),
          ButtonBar(
            children: <Widget>[
              FlatButton(
                child: const Text('주문하기'),
                onPressed: () {
                  // 주문 로직 추가
                },
              ),
            ],
          ),
        ],
      ),
    ),
    // 다른 음식 항목들에 대한 Card 추가
  ],
)

4. 요약

Card 위젯은 Flutter에서 정보를 시각적으로 구성할 때 유용한 UI 요소입니다. 음식 주문 앱과 같이 작은 부분에 대한 자세한 정보를 표시할 때 활용할 수 있습니다.

5. 참고 자료

© 2018 Colin. All rights reserved.