키오스크앱 업그레이드

1. 클릭시 메뉴가 주문 리스트에 담깁니다. 이 때 Chip 위젯으로 들어가게 됩니다.
   • 각 Chip은 Delete 아이콘 버튼이 있으며, 클릭시 주문 리스트에서 삭제합니다.
2. 기존의 버튼은 초기화하기였으나, 동작하지 않는 결제하기 버튼으로 바뀝니다.
3. 주문 리스트가 비었다면, 하단의 결제하기 버튼이 표시되지 않습니다.
4. 앱바의 분식왕 이테디 주문하기를 더블클릭하면, 관리자 페이지로 이동하게 됩니다.

예제

아래는 메인코드

import 'package:dddddddddd/AdminPage.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<String> order = [];
  final List<Map> foodMenu = [
    {"image": "assets/images/option_bokki.png", "name": "떡볶이"},
    {"image": "assets/images/option_beer.png", "name": "맥주"},
    {"image": "assets/images/option_kimbap.png", "name": "김밥"},
    {"image": "assets/images/option_omurice.png", "name": "오므라이스"},
    {"image": "assets/images/option_pork_cutlets.png", "name": "돈까스"},
    {"image": "assets/images/option_ramen.png", "name": "라면"},
    {"image": "assets/images/option_udon.png", "name": "우동"}
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: GestureDetector(
          onDoubleTap: () {                 
            Navigator.push(context,                    //더블탭하면 AdminPage로 이동
                MaterialPageRoute(builder: ((context) => AdminPage())));
          },
          child: Text('분식왕 이테디 주문하기'),
        ),
        centerTitle: true,
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.black,
        elevation: 0,
      ),
      body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(
          '주문 리스트',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        ),
        Container(
          height: 30,
          child: order.isEmpty                   //비어있으면 Text위젯이 들어간다.
              ? Center(child: (Text('주문한 메뉴가 없습니다.')))
              : ListView(
                  scrollDirection: Axis.horizontal,
                  children: order.map((e) => Chip(          //map함수를 이용해 chip형태로 변환
                          label: Text(e),
                          onDeleted: () {
                            setState(() {
                              order.remove(e);
                            });
                          })).toList()),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 8),
          child: Text(
            '음식',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
        Expanded(
          child: GridView.count(
            crossAxisCount: 3,
            childAspectRatio: 1 / 1,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            children: List.generate(foodMenu.length, (index) {
              return GestureDetector(
                onTap: (() {
                  setState(() {
                    order.add(foodMenu[index][
                        "name"]); //List.add(value)는 리스트의 맨 뒤에 value를 추가합니다. 인덱스는 0부터시작
                  });
                }),
                child: Card(
                  //자식위젯의 크기에 의해 크기가 결정되는 위젯
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Image.asset(
                          foodMenu[index]["image"],
                          width: MediaQuery.of(context).size.width,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(
                        foodMenu[index]["name"],
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(
                        '[담기]',
                        style: TextStyle(color: Colors.black),
                      )
                    ],
                  ),
                ),
              );
            }),
          ),
        )
      ]),
      floatingActionButton: AnimatedOpacity(           //애니메이션효과
        opacity: order.isNotEmpty ? 1 : 0,          //왼쪽이 주문내역 비어있지않을때 투명도 오른쪽이 비어있을때 투명도
        duration: Duration(seconds: 1),              //나타나는 시간
        child: FloatingActionButton.extended(
          onPressed: () {},
          label: Text('결제하기'),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    ));
  }
}

아래는 AdminPage코드

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Admin Page'),
          leading: GestureDetector(					//아이콘모양 탭하면 전페이지로 이동
              onTap: () {                     
                Navigator.pop(context);
              },
              child: Icon(Icons.arrow_back_ios_new)),
        ),
        body: SafeArea(
            child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text('메뉴 추가'),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text('메뉴 삭제'),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text('메뉴 수정'),
            ),
          ],
        )),
      ),
    );
  }
}

AnimatedOpacity땜에 시간 다썼네...

 

[참고]

https://iosroid.tistory.com/82

https://dev-yakuza.posstree.com/ko/flutter/widget/animated/