1주차 movie review페이지 만들기

 

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/sR32PN3/topgun.jpg",
      },
      {
        "category": "마녀2",
        "imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg",
      },
      {
        "category": "범죄도시2",
        "imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg",
      },
      {
        "category": "헤어질 결심",
        "imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg",
      },
      {
        "category": "브로커",
        "imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg",
      },
      {
        "category": "문폴",
        "imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg",
      },
    ];

    // 화면에 보이는 영역
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        title: Text(
          'Movie Reviews',
          style: TextStyle(
              fontSize: 30, fontWeight: FontWeight.bold, color: Colors.black),
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.perm_identity,
              color: Colors.black,
            ),
          )
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(20.0),
            child: TextField(
              decoration: InputDecoration(
                  suffixIcon: Icon(Icons.search),
                  labelText: '영화 제목을 검색해주세요.',
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide: BorderSide(color: Colors.grey, width: 1.0))),
            ),
          ),
          Divider(
            height: 1,
            color: Colors.grey,
          ),
          Expanded(
              child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              String category = dataList[index]["category"];
              String imgUrl = dataList[index]["imgUrl"];

              return Card(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Image.network(
                      imgUrl,
                      width: double.infinity,
                      height: 200,
                      fit: BoxFit.cover,
                    ),
                    Text(
                      category,
                      style: TextStyle(color: Colors.white, fontSize: 30),
                    )
                  ],
                ),
              );
            },
          )),
        ],
      ),
    );
  }
}

기억해둬야 하는부분

 

1. fit

이미지가 주어진 공간내에서 어떻게 채워지게 할 지 결정하는 속성.  Boxfit.cover의 경우 지정 영역을 꽉채움.

참고 링크: https://devmg.tistory.com/181

[Flutter] Image 이미지 box.fit 옵션 정리

 

2. divider 

구분선을 그어주는 위젯

 

3. 리스트뷰

3-1/Expanded로 감싸주기

높이가 무한대라 오류가 나므로 Expanded로 감싸줘야 한다.

 

3-2. card사용

리스트뷰의 아이템은  card로 감싸줌

 

4. stack

여러 레이아웃을 겹치는것에 사용

 

5. 아이콘 삽입

5-1. 앱바에 삽입

actions속성을 사용해서 여러개의 아이콘을 리스트로 넣을 수 있다. 이경우 오른쪽에 배치

5-2. Text에 삽입

suffix나 prefix속성으로 앞이나 뒤에 아이콘 삽입가능