[Flutter]KioskApp2

import 'package:flutter/material.dart';
import 'package:kiosk/OptionCard.dart';

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

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

  @override
  State<KioskApp> createState() => _KioskAppState();
}

class _KioskAppState extends State<KioskApp> {
  List myMenu = [];

  @override
  Widget build(BuildContext context) {
    // myMenu.add('ddd');
    return MaterialApp(
      home: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton.extended(
          label: Text('초기화하기'),
          onPressed: () {
            myMenu = [];
            setState(() => myMenu = []);
          },
        ),
        appBar: AppBar(
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          title: Text('분식왕 이테디 주문하기'),
          elevation: 0,
        ),
        body: Column(
          //밑으로 내려가 있기 때문에 사용
          crossAxisAlignment: CrossAxisAlignment
              .start, //Column의 기본이 가운데 정렬이라서 start를 써줘서 왼쪽으로 당김
          children: [
            Text(
              '주문리스트',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
            Container(
              height: 50,
              child: myMenu.isNotEmpty
                  ? ListView.builder(
                      //안에 요소가 하나라도 있으면 isNotEmpty가 ture가 된다. 그래서 ?를 달아줘서 막아준다.
                      scrollDirection: Axis.horizontal, //오른쪽으로 퍼져나감.
                      itemCount: myMenu.length,
                      itemBuilder: (context, index) {
                        return Chip(
                          label: Text(myMenu[index]),
                          onDeleted: () {
                            myMenu.removeAt(index); //삭제하기 생성
                            setState(() {});
                            // print("나 눌러졌다 $index");  //몇번째가 눌리는지 확인 가능
                          }, //onDeleted만 적어도 x버튼이 자동으로 만들어짐.
                        );
                      })
                  : Text('주문한 내역이 없습니다.'), //삼항연산자로 써준다.
            ),
            SizedBox(
              height: 8,
            ),
            Text('음식',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
            Expanded(
              child: GridView(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, //행에 몇개를 넣을 것인지
                ),
                children: [
                  InkWell(
                    onTap: () {
                      // print(myMenu);
                      myMenu.add('떡볶이');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '떡볶이',
                      imgUrl: 'assets/option_bokki.png',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      myMenu.add('맥주');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '맥주',
                      imgUrl: 'assets/option_beer.png',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      myMenu.add('김밥');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '김밥',
                      imgUrl: 'assets/option_kimbap.png',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      myMenu.add('오므라이스');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '오므라이스',
                      imgUrl: 'assets/option_omurice.png',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      myMenu.add('돈까스');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '돈까스',
                      imgUrl: 'assets/option_pork_cutlets.png',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      myMenu.add('쫄면');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '쫄면',
                      imgUrl: 'assets/option_ramen.png',
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      myMenu.add('우동');
                      setState(() {});
                    },
                    child: OptionCard(
                      FoodName: '우동',
                      imgUrl: 'assets/option_udon.png',
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

myMenu에 아무것도 들어있지 않는데 myMenu.isNotEmpty에서 비어있지 않냐고 물어본것이기 때문에 비어 있지 않으면 ? 뒤에 있는 ture구문이 실행이 되고 ListView.builder안으로 들어가고 false이면 Text('주문한 내역이 없습니다.') 이게 출력이 된다.

main.dart

import 'package:flutter/material.dart';
import 'package:kiosk/main_page.dart';

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

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

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

OptionCard.dart

import 'package:flutter/material.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(
        margin: EdgeInsets.all(4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Image.asset(
                imgUrl,
                fit: BoxFit.cover,
              ),
            ),
            Text(FoodName),
            Text('[담기]'),
          ],
        ));
  }
}

main_page.dart

import 'package:flutter/material.dart';
import 'package:kiosk/OptionCard.dart';
import 'package:kiosk/admin_page.dart';

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

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

class _MainPageState extends State<MainPage> {
  List myMenu = [];

  @override
  Widget build(BuildContext context) {
    // myMenu.add('ddd');
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: myMenu.isNotEmpty
          ? FloatingActionButton.extended(
              label: Text('결제하기'),
              onPressed: () {
                myMenu = [];
              },
            )
          : null, //삼항연산자  //null로 넣어줘야 애니메이션 효과로 자연스럽게 사라진다.
      appBar: AppBar(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        title: GestureDetector(
            onDoubleTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => AdminPage()));
            },
            child: Text('분식왕 이테디 주문하기')),
        elevation: 0,
      ),
      body: Column(
        //밑으로 내려가 있기 때문에 사용
        crossAxisAlignment:
            CrossAxisAlignment.start, //Column의 기본이 가운데 정렬이라서 start를 써줘서 왼쪽으로 당김
        children: [
          Text(
            '주문리스트',
            style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
          ),
          Container(
            height: 50,
            alignment: Alignment.center,
            child: myMenu.isNotEmpty
                ? ListView.builder(
                    //안에 요소가 하나라도 있으면 isNotEmpty가 ture가 된다. 그래서 ?를 달아줘서 막아준다.
                    scrollDirection: Axis.horizontal, //오른쪽으로 퍼져나감.
                    itemCount: myMenu.length,
                    itemBuilder: (context, index) {
                      return Chip(
                        label: Text(myMenu[index]),
                        onDeleted: () {
                          myMenu.removeAt(index); //삭제하기 생성
                          setState(() {});
                          // print("나 눌러졌다 $index");  //몇번째가 눌리는지 확인 가능
                        }, //onDeleted만 적어도 x버튼이 자동으로 만들어짐.
                      );
                    })
                : Text('주문한 내역이 없습니다.'), //삼항연산자로 써준다.
          ),
          SizedBox(
            height: 8,
          ),
          Text('음식',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
          Expanded(
            child: GridView(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, //행에 몇개를 넣을 것인지
              ),
              children: [
                InkWell(
                  onTap: () {
                    // print(myMenu);
                    myMenu.add('떡볶이');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '떡볶이',
                    imgUrl: 'assets/option_bokki.png',
                  ),
                ),
                InkWell(
                  onTap: () {
                    myMenu.add('맥주');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '맥주',
                    imgUrl: 'assets/option_beer.png',
                  ),
                ),
                InkWell(
                  onTap: () {
                    myMenu.add('김밥');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '김밥',
                    imgUrl: 'assets/option_kimbap.png',
                  ),
                ),
                InkWell(
                  onTap: () {
                    myMenu.add('오므라이스');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '오므라이스',
                    imgUrl: 'assets/option_omurice.png',
                  ),
                ),
                InkWell(
                  onTap: () {
                    myMenu.add('돈까스');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '돈까스',
                    imgUrl: 'assets/option_pork_cutlets.png',
                  ),
                ),
                InkWell(
                  onTap: () {
                    myMenu.add('쫄면');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '쫄면',
                    imgUrl: 'assets/option_ramen.png',
                  ),
                ),
                InkWell(
                  onTap: () {
                    myMenu.add('우동');
                    setState(() {});
                  },
                  child: OptionCard(
                    FoodName: '우동',
                    imgUrl: 'assets/option_udon.png',
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

admin_page.dart

 import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView(children: [
        ListTile(
          title: Text('메뉴추가하기'),
        ),
        ListTile(
          title: Text('키오스크 화면 잠금기'),
        ),
        ListTile(
          title: Text('매장 등록 정보'),
        ),
      ]),
    );
  }
}

---

OtionCard는 파일 이름을 CamleCase로 썼는데 그이유는 소규모 Widget은 이런식으로 쓰고 page나 screen같은 경우에는 SnakeCase를 사용한다