Flutter - 레이아웃 만들기

MaterialApp()

 

구글의 지원하는 위젯의 종류 

Cupertino (아이폰 스타일) 크게 이렇게 두가지 위젯이 있고 

이 안에서 만들면 디자인뿐만 아니라 앱의 전반적인 구조 또한 잡아줘서 편리함

 

flutter:
  uses-material-design: true

이게 켜져 있어야 material 디자인 사용 가능

 

 

머리가슴배로 나눠주는 Scaffold() 위젯

 

대분의 앱은 상단 중단 하단 이렇게 분리되어 나눠져 있음

 

상단부분은 앱의 이름과 아이콘, 설정 버튼이 있는것도 있고

중단은 앱의 내용 

하단은 주로 여러 메뉴 버튼이 있다

 

 

    return MaterialApp(
       home: Scaffold(
         appBar: AppBar(), // 상단에 넣은 내용
         body: Container(), // 중단에 넣을 내용
         bottomNavigationBar: BottomAppBar(), //하단에 넣을 내용

 

이렇게 각 위치에 원하는 위젯을 넣어 줄 수 있다.

 

특정요소를 가로로 배치 하고 싶을때는 container 가 아닌 row 를 이용한다. 

      home: Scaffold(
         body: Row(
           children: [
             Icon(Icons.star),
             Icon(Icons.star),
             Icon(Icons.star)

childern 이라는 파라미터를 이용하고 배열 형태로 위젯을 담아준다.

 

왼쪽이 기준으로 되어 있는데 

이걸 중앙으로 정렬해주려면 mainAxisAllignment 파라미터를 이용하고 여기안에 자동완성되는 여러 파라미터를 쓰면 

간격도 띄우고 여러 요소를 제어 할 수 있음

 

*자동완성 팁

구글검색이 귀찮을때 모 파라미터의 앞글자를 대문자로 치면 그에 따른 기능들이 자동 완성으로 나옴

또는 마우스 올리면 타입이 나오기도함

 

 

 

이번 강의 숙제였는데 아래쪽 아이콘들이 너무 작아서 크기를 주고 싶었다

그래서 Container를 사용하려 했는데 오류가 뜬다 자식위젯임을 표시하는 child 를 빼먹었다  

넓이나 높이를 줄때는 Container 보다 조금더 가벼운 SizedBox 라는 위젯을 사용해도 똑같이 적용 할 수 있다.

 

Container 내부에 height 파라미터를 이용해 높이를 줬다.