name27 / flutter

0 stars 0 forks source link

키오스크 코드 구성 재배치 #116

Open name27 opened 1 year ago

name27 commented 1 year ago

image

image

main.dart

import 'package:easy_kiosk_app/controller/main_controller.dart';
import 'package:easy_kiosk_app/view/page/main_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
        initialBinding: BindingsBuilder(() {
          Get.put(MainController());
        }),
        home: const MainPage());
  }
}

main_page.dart

import 'package:easy_kiosk_app/controller/main_controller.dart';
import 'package:easy_kiosk_app/view/widget/option_card.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MainPage extends GetView<MainController> {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            '분식왕 이테디 주문하기',
          ),
          centerTitle: true,
          foregroundColor: Colors.black,
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                '주문 리스트',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              Obx(() => Text(controller.orderList.toString())),
              const SizedBox(
                height: 12,
              ),
              const Text(
                '음식',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              Expanded(
                child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3),
                  itemCount: controller.foodMenu.length,
                  itemBuilder: (context, index) => InkWell(
                    onTap: () {
                      controller.addMenu(index);
                    },
                    child: OptionCard(
                        imgUrl: controller.foodMenu[index].imgUrl,
                        foodName: controller.foodMenu[index].menu),
                  ),
                ),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: controller.clearMenu,
          label: const Text('초기화하기'),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat);
  }
}

option_card.dart

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

class OptionCard extends StatelessWidget {
  const OptionCard({super.key, required this.imgUrl, required this.foodName});
  final String imgUrl;
  final String foodName;
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Expanded(
            child: Image.asset(
          imgUrl,
          fit: BoxFit.cover,
        )),
        Text(foodName),
        const Text('[담기]')
      ]),
    );
  }
}

main_controller.dart

import 'package:easy_kiosk_app/util/food.dart';
import 'package:easy_kiosk_app/util/menu_image.dart';
import 'package:get/get.dart';

class MainController extends GetxController {
  RxList orderList = [].obs;
  List<Map<String, dynamic>> menuList = [
    {'menu': '떡볶이', 'imgUrl': ImageUrl.bokki},
    {'menu': '맥주', 'imgUrl': ImageUrl.beer},
    {'menu': '김밥', 'imgUrl': ImageUrl.kimbap},
    {'menu': '오므라이스', 'imgUrl': ImageUrl.omurice},
    {'menu': '돈까스', 'imgUrl': ImageUrl.porkCutlets},
    {'menu': '라면', 'imgUrl': ImageUrl.ramen},
    {'menu': '우동', 'imgUrl': ImageUrl.udon}
  ];
  List<Food> foodMenu = [];
  addMenu(int index) {
    orderList.add(foodMenu[index].menu);
  }

  clearMenu() {
    orderList.clear();
  }

  @override
  void onInit() {
    super.onInit();
    foodMenu.addAll(menuList.map((e) => Food.fromMap(e)).toList());
  }
}

food.dart

import 'dart:convert';

// ignore_for_file: public_member_api_docs, sort_constructors_first
class Food {
  String menu;
  String imgUrl;
  Food({
    required this.menu,
    required this.imgUrl,
  });

  Map<String, dynamic> toMap() {
    return <String, dynamic>{
      'menu': menu,
      'imgUrl': imgUrl,
    };
  }

  factory Food.fromMap(Map<String, dynamic> map) {
    return Food(
      menu: map['menu'] as String,
      imgUrl: map['imgUrl'] as String,
    );
  }

  String toJson() => json.encode(toMap());

  factory Food.fromJson(String source) => Food.fromMap(json.decode(source) as Map<String, dynamic>);
}

menu_image.dart

class ImageUrl {
  static String bokki = 'assets/option_bokki.png';
  static String beer = 'assets/option_beer.png';
  static String kimbap = 'assets/option_kimbap.png';
  static String omurice = 'assets/option_omurice.png';
  static String porkCutlets = 'assets/option_pork_cutlets.png';
  static String ramen = 'assets/option_ramen.png';
  static String udon = 'assets/option_udon.png';
}
name27 commented 1 year ago

menu_image.dart

메뉴 이미지 url 저장

food.dart

메뉴 이름과 이미지 경로를 담을 Food 클래스

main_controller.dart

메인 페이지 컨트롤러 - 메뉴리스트 만들기, 주문 리스트에 메뉴 담기, 초기화하기