모두가 할 수 있는 플러터 UI 입문1

 

수직은 Column

수평은 Row

 

Scaffold: 구조가 있는 도화지로 MaterialApp 안에 꼭 Scaffold가 있어야 함

MaterialApp의 속성으로 debugShow CheckedModeBanner: false,를 주면 우상단의 Debug 배너가 사라진다

휴대폰 최상단에는 AppBar: 해당 화면에 대한 메뉴, 이동 버튼, 제목 등

- AppBar는 크게 세 줄로 이루어졌다고 할 수 있다

-- leading icon, title, actions

-- flexibleSpace

-- bottom

 

lib/main.dart의 main() 함수에서 runApp()함수를 호출하는데

이 때 runApp에게 넘여주는 위젯이 앱의 루트가 된다

 

컴포넌트 재사용의 필요성

- 개발의 편리성

- 이미 사용자들에게 익숙한 디자인 => UX가 좋음

- 위젯을 재사용할 수 있는 함수로 만드는 게 좋다

Row (
	children: [
        _buildMenuItem(Icons.home, "All"),
        SizedBox(width: 8),
        _buildMenuItem(Icons.fastfood, "burger"),
        SizedBox(width: 8),
        _buildMenuItem(Icons.pizza, "pizza"),
    ]
)

...
 
Widget _buildMenuItem(IconData mIcon, String text) {
    return Container(
        width: 60,
        height: 80,
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: Colors.black12),
    ),
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
     children: [
        Icon(mIcon, color: Colors.redAccent, size: 30),
        SizedBox(height: 5),
        Text(
			text,
            style: TextStyle(color: Colors.black87)
      )
    ]
    )
)
}

 

SafeArea

- 상태바(StatusBar) 영역에 여백을 준다

 

Text("hello, world", style: TextStyle(fontWeight: FontWeight.bold))

 

Spacer

 - 위젯 사이의 간격을 조정한다

 

Padding

- 패딩을 주려면 해당 위젯을 Padding 위젯으로 감싸야 한다

- 속성은 padding: const EdgeInsets.all(24.0)처럼 준다

 

Image-fit

- Boxfit.contain: 원본사진의 비율 유지

- Boxfit.fill: 지정 영역에 사진을 맞춤

- Boxfit.cover: 원본사진의 비율 유지 + 지정 영역에 사진을 맞춤. 단, 사진이 지정한 크기를 벗어나면 잘릴 수 있음

 

Expanded

- 남은 공간까지 위젯을 확장하여 공간을 채운다

- Column의 children으로 Image 위젯이 두 개 있을 때, 두 이미지로는 전체 스크린이 차지 않을 수 있다 

  그 때 Expanded 위젯으로 첫번째 이미지를 감싸면 

  Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)) 

  남은 공간만큼 첫번째 이미지가 차지하고 

  두 이미지를 각각 Expanded로 감싸면 남은 공간을 반반씩 각 이미지가 차지하게 된다

- flex라는 속성을 가진다(기본 값은 1) 

  첫번째 이미지에 flex:1, 두번째 이미지에 flex:3을 주면

  첫번째 이미지는 1/4의 높이를, 두번째 이미지는 3/4의 높이를 가진다

 

SizedBox

- width나

- height 둘 중 하나 이상의 값을 가지고 위젯 사이에 여백을 준다

- SizedBox에는 decoration 속성이 없다는 것이 Container와의 차이점이다

 

ListView

- 가장 일반적인 스크롤 위젯

- 가로축/ 세로축 스크롤 모두 가능

- 기본 정렬은 왼쪽 정렬

 

AspectRatio

- 자식 크기를 비율로 조정

- 레이아웃 제약하에서 허용하는 가장 큰 너비를 너비로 가지고

- 높이는 해당 너비에 비율을 적용한다

- AspectRatio(aspectRatio: 2/1, child: Image.asset())

- 이 때, 넓이가 300이라면 높이는 150이 된다

 

ClipRRect

- 둥근 사각형 모양으로 자식을 자른다

- Clip Round Rectangle

- 자식에게 shape나 decoration 속성이 없다면 ClipRRect를 이용해서 모서리를 둥글게 한다

- ClipRRect(borderRadius: BorderRadius.circular(20),)