Drawer / AspectRatio

플러터를 공부한 지 얼마 안되었을 때, 배웠던 것을 rewind 하는 시간이다.

1. Drawer

Scaffold에 포함된 것 중 하나!

공식 문서에서는 다른 페이지로 넘어가기 것 중 하나로 Drawer를 사용한다고 되어있다. (아래 사진 참조)

이제 코드로 설명해보자면

// drawer는 scaffold 속성
// scaffold 에서 endDrawer 속성을 주면 오른쪽에서 나옴 
 drawer:Drawer(
        // Drawer에 listview를 추가하면 스크롤 할 수 있음
        // vertical(수직)이 충분하지 않은 경우 옵션을 통해 담을 수 있는 공간
        child: ListView(
          // listview에서 padding을 제거 하기
          // padding: EdgeInsets.zero,

          children: [
            DrawerHeader(
              // 위의 사진의 파란색 부분이라고 생각하자 
              margin: const EdgeInsets.all(0.0),
              decoration: BoxDecoration(
     
                color: Color(0xFFFDD835),
              ),
              child: SizedBox(
                // sized 박스
                // child widget의 size를 강제하기 위해서
                // Row, Column에서 widget 사이에 빈 공간을 넣기 위해서
                width: double.infinity,
                // double.infinity는 parent가 허용하는 만큼 높임..!
                // 화면만큼 커지고 싶으면 mediaquery 사용
                child: Column(
                  children: [
                    CircleAvatar(
                    // 카톡에서 오른쪽 원형 사진 같은 친구
                      radius: 40.0,
                      // radius가 밖으로 티어나감
                      backgroundColor: Color(0xFFffffff),
                      // backgroundImage: Image.network(
                      //   "https://i.ibb.co/CwzHq4z/trans-logo-512.png",
                      // ), 에러 발생 => 강의 때 배웠던 child padding 추가해서 image.network 넣어보기

                      child: Padding(
                          padding: const EdgeInsets.all(4),
                          child: Image.network(
                            "https://i.ibb.co/CwzHq4z/trans-logo-512.png",
                            width: 40,
                          )),
                    ),
                    SizedBox(height: 12),
                    // 공백의 높이를 줌
                    Text(
                      'sunny',
                      style: TextStyle(
                        color: Color(0xFF000000),
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      'e_maker@test.com',
                      style: TextStyle(
                        color: Color(0xFF000000),
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ),

          
         
          ],
        ),
      ),

2. AspectRatio

특정 종횡비로 child의 크기를 조정하려는 widget

ex ) 4 / 1 => 가로 4 , 세로 1 비율로 조정

 AspectRatio(
              // 자식 위젯을 특정한 비율로 만드는 클래스라 생각하자
              aspectRatio: 3 / 1,
              // ( 너비3 / 높이 1)
              child: PageView(
                // 여러 페이지를 한 화면에서 구현할 수 있도록 해주는 위젯 
                children: [
                  Image.network(
                      "https://i.ibb.co/Q97cmkg/sale-event-banner1.jpg"),
                  Image.network(
                      "https://i.ibb.co/GV78j68/sale-event-banner2.jpg"),
                  Image.network(
                      "https://i.ibb.co/R3P3RHw/sale-event-banner3.jpg"),
                  Image.network(
                      "https://i.ibb.co/LRb1VYs/sale-event-banner4.jpg"),
                ],
              ),
            ),