flutter 실습해보기

 

stack() : 레이아웃을 쌓아 올릴 수 있다

Divider() : 구분선

 

AspectRatio() : 배너를 순차적으로 넘김

 

ListTile() : Drawer() 사이드 메뉴에서 같이 쓰면 좋다 / 자제 적인 하위 위젯의 위치 균형을 맞쳐준다 그래서 걍 갖다 쓰기만 하면됨

Expanded() : 위젯이 가진 영역을 최대한 늘려서 디스플레이 해준다

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(), // 홈페이지 보여주기
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 음식 사진 데이터
    List<Map<String, dynamic>> dataList = [
      {
        "category": "수제버거",
        "imgUrl": "https://i.ibb.co/pnZK1rz/burger.jpg",
      },
      {
        "category": "건강식",
        "imgUrl": "https://i.ibb.co/7KLJjJV/salad.jpg",
      },
      {
        "category": "한식",
        "imgUrl": "https://i.ibb.co/0V4RVK4/korean-food.jpg",
      },
      {
        "category": "디저트",
        "imgUrl": "https://i.ibb.co/HhGRhds/dessert.jpg",
      },
      {
        "category": "피자",
        "imgUrl": "https://i.ibb.co/QdDtTvt/pizza.jpg",
      },
      {
        "category": "볶음밥",
        "imgUrl": "https://i.ibb.co/gt9npFZ/stir-fried-rice.jpg",
      },
    ];

    // 화면에 보이는 영역
    return Scaffold(
      drawer: Drawer(
        child: Column(
          children: [
            DrawerHeader(
              margin: EdgeInsets.zero,
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
              child: SizedBox(
                width: double.infinity,
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 36,
                      backgroundColor: Colors.white,
                      child: Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Image.network(
                          "https://i.ibb.co/CwzHq4z/trans-logo-512.png",
                          width: 62,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('jjs815',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        )),
                    Text(
                      'jjs815@naver.com',
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            AspectRatio(
              aspectRatio: 12 / 4,
              child: PageView(
                children: [
                  Image.network("https://i.ibb.co/0mXKmZq/banner-1.jpg"),
                  Image.network("https://i.ibb.co/DDgYrJR/banner-2.jpg"),
                  Image.network("https://i.ibb.co/v1RMHN4/banner-3.jpg"),
                  Image.network("https://i.ibb.co/NmNsrr2/banner-4.jpg"),
                ],
              ),
            ),
            ListTile(
              title: Text(
                '구매내역',
                style: TextStyle(
                  fontSize: 18,
                ),
              ),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text(
                '저장한 레시피',
                style: TextStyle(fontSize: 18),
              ),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black),
        title: Text(
          'Food Recipe',
          style: TextStyle(
              color: Colors.black, fontSize: 28, fontWeight: FontWeight.bold),
        ),
        //leading: IconButton(onPressed: null, icon: Icon(Icons.format),),
        actions: [
          IconButton(
            onPressed: null,
            icon: Icon(Icons.person_outline),
          ),
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                hintText: '상품을 검색해주세요',
                border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.black),
                ),
                suffixIcon: IconButton(
                  onPressed: () {
                    print('돋보기 아이콘 클릭');
                  },
                  icon: Icon(Icons.search),
                ),
              ),
            ),
          ),
          Divider(
            height: 1,
          ),
          Expanded(
            child: ListView.builder(
                itemCount: dataList.length,
                itemBuilder: (context, index) {
                  Map<String, dynamic> data = dataList[index];
                  String category = data['category'];
                  String imgurl = data['imgUrl'];

                  return Card(
                    margin: EdgeInsets.all(8),
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        Image.network(
                          imgurl,
                          width: double.infinity,
                          height: 120,
                          fit: BoxFit.cover,
                        ),
                        Container(
                            width: double.infinity,
                            height: 120,
                            color: Colors.black.withOpacity(0.5)),
                        Text(
                          category,
                          style: TextStyle(color: Colors.white, fontSize: 36),
                        )
                      ],
                    ),
                  );
                }),
          ),
        ],
      ),
    );
  }
}