[Flutter] 숙제 2

 

 

 

 

📋숙제

---

이 당근 마켓 레이아웃을 구성하는 것이 숙제입니다!!!! 상단바는 패스하고 body부분 만드는 것입니다.

 

🙆‍♂️레이아웃 구성

---

먼저 요소가 들어갈 부분들을 테두리로 만들어봤습니다.

 

코드는 엄청 깁니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home : Scaffold(
        appBar: AppBar(
          title: Text("Homework"),
          leading: Icon(Icons.menu),
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Container(
            width: 500,
            height: 200,
            decoration: BoxDecoration(
              border: Border.all(
                width: 5,
                color: Colors.red
              ),
            ),
            child: Row(
              children: [
                Container(
                  width: 180,
                  height: 190,
                  decoration: BoxDecoration(
                    border: Border.all(
                        width: 5,
                        color: Colors.blue
                    ),
                  ),
                ),
                Container(
                  width: 310,
                  height: 190,
                  decoration: BoxDecoration(
                    border: Border.all(
                        width: 5,
                        color: Colors.green
                    ),
                  ),
                  child: Column(
                    children: [
                      Container(
                        width: 310,
                        height: 100,
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 5,
                            color: Colors.yellow
                          )
                        ),
                      ),
                      Container(
                        width: 310,
                        height: 40,
                        decoration: BoxDecoration(
                          border: Border.all(
                              width: 5,
                              color: Colors.yellow
                          )
                        ),
                      ),
                      Container(
                        width: 310,
                        height: 40,
                        decoration: BoxDecoration(
                          border: Border.all(
                              width: 5,
                              color: Colors.yellow
                          )
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Container(
                              width: 30,
                              height: 40,
                              decoration: BoxDecoration(
                                border: Border.all(
                                    width: 5,
                                    color: Colors.purple
                                )
                              ),
                            ),
                            Container(
                              width: 30,
                              height: 40,
                              decoration: BoxDecoration(
                                border: Border.all(
                                    width: 5,
                                    color: Colors.purple
                                )
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        )
      )
    );
  }
}

그냥 Align, Column, Row 위젯을 활용하여 Container들을 적절히 배치 했습니다.

 

 

🙋‍♂️사진 적용

---

당근 사진을 적용해봤습니다.

 

 Container(
              width: 170,
              height: 180,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.asset(
                  "./carrot.jpg",
                  fit: BoxFit.fill ,
                ),
              )
            ),

해당 Container에 child로 ClipRRect 위젯을 넣었습니다. border radius가 잘되게 해주는 위젯입니다.

그리고 그 안에 child로 Image를 넣어줬습니다. Image 삽입에 대한 설명은 이 게시물에 작성했습니다.

 

 

🙋‍♂️제목 적용

---

약간의 각색이 들어갔습니다.

 

Container(
            width: 310,
            height: 100,
            child: Text("무수히 많은 당근 말과 토끼가 좋아함 (이파리 포함)",
              style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),

Text 위젯으로 글자를 표현해줬고 Text위젯의 style 속성으로 fontSize와 fontWeight 값을 설정했습니다.

 

 

 

🤷‍♂️위치 부분 적용

---

Container(
            width: 310,
            height: 40,
            child: Text("성동구 행당동 · 끌올 10분 전 ",
              style: TextStyle(
                color: Color.fromRGBO(141, 139, 141, 1.0),
                fontWeight: FontWeight.w600,
                fontSize: 16,
              ),
            ),
          ),

Text위젯으로 글자를 표현해줬고 색과 두께, 글자크기를 변경했습니다. 

Column위젯의 mainAxisAlignment를 center로 바꾸고

제목 Container의 높이를 줄여서 숙제 레이아웃과 비슷하게 만들었습니다.

 

 

🧏‍♂️ 가격부분 적용

---

Container(
            width: 230,
            height: 40,
            child: Text("210,000원",
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w900,
              ),
            ),
          ),

 

 

 

💆‍♂️하트 아이콘 부분

---

Container(
            width: 310,
            height: 25,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  width: 35,
                  height: 25,
                  child: Icon(Icons.favorite_border),

                ),
                Container(
                  width: 35,
                  height: 25,
                  child: Text("4",
                    style: TextStyle(
                      fontSize: 19,
                    ),
                  ),
                )

하다가 레이아웃 구성에서 잘못됨을 깨닫고 다시 했었습니다.

 

 

🙇‍♂️마무리 정리

---

AppBar까지 조금 손봐서 비슷한 레이아웃을 구성하게 됐습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home : Scaffold(
        appBar: AppBar(
          actions: [Icon(Icons.search, color: Colors.black, size: 50,),
                    Icon(Icons.menu, color: Colors.black, size: 50,),
                    Icon(Icons.notifications, color: Colors.black, size: 50,),
          ],
          title: Text("Homework",
            style: TextStyle(
              color: Colors.black
            ),
          ),
          leading: Icon(Icons.menu, color: Colors.black,),
          backgroundColor: Colors.white,
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Container(
            width: 500,
            height: 200,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Container(
                  width: 160,
                  height: 180,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Image.asset(
                      "./carrot.jpg",
                      fit: BoxFit.fill ,
                    ),
                  )
                ),
                Container(
                  width: 310,
                  height: 190,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: 310,
                        height: 75,
                        child: Text("무수히 많은 당근 말과 토끼가 좋아함 (이파리 포함)",
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                        ),
                      ),
                      Container(
                        width: 310,
                        height: 25,
                        child: Text("성동구 행당동 · 끌올 10분 전 ",
                          style: TextStyle(
                            color: Color.fromRGBO(141, 139, 141, 1.0),
                            fontWeight: FontWeight.w600,
                            fontSize: 16,
                          ),
                        ),
                      ),
                      Container(
                        width: 310,
                        height: 40,
                        child: Text("210,000원",
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.w900,
                          ),
                        ),
                      ),
                      Container(
                        width: 310,
                        height: 25,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Container(
                              width: 35,
                              height: 25,
                              child: Icon(Icons.favorite_border),

                            ),
                            Container(
                              width: 35,
                              height: 25,
                              child: Text("4",
                                style: TextStyle(
                                  fontSize: 19,
                                ),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        )
      )
    );
  }
}

코드는 이렇습니다. Container와 Row, Column들을 적절히 사용했고  Container 안에는 child가 하나밖에 못오는 점을

생각하여 Row와 Column을 적절히 사용하면서 해결했습니다.