플러터 화면 추가 - 메뉴 안내 추가

이제는 두 번째 화면인 메뉴 화면을 만들어보겠다.

​

사실 메뉴판은 대표 메뉴로 어떤 음식이 있고

금액은 얼마인지 그리고 원산지가 어디인지만 잘 표현되면 된다.

그래서 홈페이지에 있는 메뉴판 내용을 그대로 가져왔다

​

​

가게 안내 페이지와 동일하게 이름만 MenuGuide인 클래스에

NestedScrollView에 SliverAppBar와 ListView로 구성하였다.

​

메뉴판 이미지는 SliverAppBar에 FlexibleSpaceBar에 넣었고

ListView 쪽에는 각 메뉴별 대표 이미지를 리스트로 줄줄이 넣었다.

​

​

소스 코드는 다음과 같다.

 

import 'package:flutter/material.dart';

class MenuGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: size.height * 0.52,
              backgroundColor: Colors.white,
              pinned: false,
              floating: false,
              snap: false,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Image.asset('Assets/Image/menu.png'),
              ),
            ),
          ];
        },
        body: ListView(
          children: <Widget>[
            Text(
              "인제 대표 맛집 미소숯불닭갈비의 대표 메뉴는\n숯불 닭갈비(간장/매콤)와 철판 닭갈비입니다.",
              style: TextStyle(fontSize: 16),
              textAlign: TextAlign.center,
            ),
            Container(
              height: size.height * 0.02,
            ),
            Image.asset(
              'Assets/Image/charcoal_seasoning.png',
              height: size.height * 0.8,
              fit: BoxFit.cover,
            ),
            Image.asset(
              'Assets/Image/charcoal_soysauce.png',
              height: size.height * 0.6,
              fit: BoxFit.cover,
            ),
            Image.asset(
              'Assets/Image/ironplate.png',
              height: size.height * 0.65,
              fit: BoxFit.cover,
            ),
            Image.asset(
              'Assets/Image/buckwheatnoodles.png',
              height: size.height * 0.85,
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }
}

 

아주 단순한 앱이기 때문에

어렵게 만들 필요 없을 것 같다.

​

디버깅을 돌려보면 에뮬레이터에 다음과 같이 앱이 실행되며

생각한 대로 메뉴 이미지는 SliverAppBar로

스크롤바를 내리면 애니메이션 효과가 나오며

나머지 텍스트와 이미지는 리스트 뷰로 잘 표현되었다.