Colin's Blog
[flutter] 플러터(expandable)을 사용하는 음식 배달 앱 개발 방법

이 포스트에서는 Flutter에서 expandable을 사용하여 전체적인 음식 배달 앱을 개발하는 방법에 대해 알아보겠습니다. expandable 위젯은 여러 항목을 접고 펼칠 수 있는 기능을 제공하여 사용자 경험을 향상시킬 수 있는 매우 유용한 기능입니다.

전제 조건

Step 1: 의존성 추가하기

expandable 위젯을 사용하기 위해서는 해당 위젯의 의존성을 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  expandable: ^5.0.0

의존성 추가 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 합니다.

Step 2: expandable 위젯 사용하기

expandable 위젯을 사용하여 음식 배달 앱의 메뉴 항목을 접고 펼칠 수 있는 리스트를 만들어 보겠습니다.

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

class FoodDeliveryApp extends StatelessWidget {
  final menuItems = [
    {
      'title': '피자',
      'description':
          '신선한 재료로 만든 맛있는 피자를 즐겨보세요.',
    },
    {
      'title': '햄버거',
      'description':
          '고기와 야채가 어우러진 풍부한 맛의 햄버거를 즐겨보세요.',
    },
    {
      'title': '파스타',
      'description':
          '부드러운 면과 향긋한 소스가 조화로운 파스타를 즐겨보세요.',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: menuItems.length,
      itemBuilder: (context, index) {
        return ExpandablePanel(
          header: Text(
            menuItems[index]['title'],
            style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
          ),
          expanded: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Divider(),
              Text(menuItems[index]['description'],
                  style: TextStyle(fontSize: 16.0)),
            ],
          ),
        );
      },
    );
  }
}

위의 코드에서는 ExpandablePanel 위젯을 리스트뷰 아이템으로 사용하고 있습니다. ExpandablePanel의 header 프로퍼티에는 항목의 제목을, expanded 프로퍼티에는 항목의 설명을 넣어줍니다.

Step 3: 앱에 integrate하기

플러터 앱의 메인 화면에 FoodDeliveryApp 위젯을 추가하여 expandable 위젯을 사용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('음식 배달 앱'),
      ),
      body: FoodDeliveryApp(),
    ),
  ));
}

결론

이제 음식 배달 앱에서 expandable 위젯을 사용하여 메뉴 항목을 접고 펼칠 수 있게 만들었습니다. expandable을 사용하여 UI를 더욱 사용자 친화적으로 만들 수 있는 많은 기능을 추가할 수 있습니다.

더 자세한 내용은 expandable 패키지의 공식 문서를 참조하세요.

위의 코드는 참고용으로 제공되는 예시이며, 실제 음식 배달 앱을 개발할 때에는 필요에 따라 코드를 수정해야 합니다.

© 2018 Colin. All rights reserved.