인기포스트

ABOUT ME

Today
Yesterday
Total
  • 스나이퍼팩토리 2주차 주간과제 키오스크앱만들기
    카테고리 없음 2023. 2. 5. 15:15
    1. 음식을 누르면 주문 리스트에 담기는 키오스크앱을 만들어봅니다.
    2. 음식이미지는 자유이며, 필요한 경우 위에 첨부된 파일을 이용하여도 됩니다.
    3. 하단에 떠있는 버튼을 누르면 지금까지 주문된 주문 리스트를 초기화합니다.
    4. 하단에 떠있는 버튼은 정중앙의 하단, 넓게 펴진 형태로 [ 초기화하기 ] 텍스트를 포함합니다.
    5. 음식이 보여지는 것은 [갤러리] 형태로 보여지게 하며, 검색을 통해 해결합니다.
    6. 그 외 UI 디자인은 자유입니다.

    키오스크앱 예제

    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: 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),
              ),
              Text(order.toString()),
              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: FloatingActionButton.extended(
              onPressed: () {
                setState(() {
                  order.clear();
                });
              },
              label: Text('초기화하기'),
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
          ),
        );
      }
    }

    구글링을 너무많이하고 찾아서 막 한거같아서 수업듣고 정리좀 하겠습니다.

    하루종일 검색하면서 했더니 결과는 나왔습니다.

    주말동안 어디 좀 갔다오니 시간이 생각보다 없네요..

    Android Emulator - Pixel_XL_API_27_5554 2023-02-05 15-08-46.mp4
    6.68MB

    [참고]

    https://velog.io/@kjha2142/Flutter-GridView

    https://eunoia3jy.tistory.com/106

    https://eunoia3jy.tistory.com/105

    https://m.blog.naver.com/chandong83/221890678439

    https://shiningjean.tistory.com/76

    https://velog.io/@iwytbbtss/Flutter-List.map%EC%9D%98-index%EB%A1%9C-%EC%A0%91%EA%B7%BC%ED%95%98%EB%8A%94-%EB%B2%95

    https://velog.io/@tmdgks2222/FlutterDart-List-aljalddakkalsen

Designed by Tistory.

티스토리툴바