기본세팅
프로젝트 생성 후 lib에 있는 main.dart를 열어준다.
main.dart파일에서 밑에 있는 예제 코드들은 다 날려주고
stless(혹은 stful)를 친 후 엔터를 눌러준다.
클래스명과 변수명은 실행시킬 앱이름과 똑같이 정해준다.
테스트 실행
device를 chrome으로 해놓고 초록색 실행버튼을 눌러서 실행을 시켜보자.
참고로 크롬창을 열려면 adroid studio를 관리자 권한으로 실행시켜야 한다.
위젯 종류
플러터에서는 위젯들을 배치하는 형식으로 앱을 디자인한다.
텍스트 위젯 -> Text('')
아이콘 위젯 -> Icon(Icons.아이콘이름)
이미지 위젯 -> Image.assest('이미지파일이름')
박스 위젯 -> Container()이미지 위젯 넣기 전 설정
프로젝트 폴더에 assets폴더 추가해주고 거기다 사진 넣어주기
test > pubspecs.yaml에서 54번줄 밑에 이런식으로 폴더경로 추가해준뒤
pub get 을 눌러준다.
Center
Center()는 자식위젯의 기준점을 중앙으로 설정해준다.
위 문법은 div박스를 div로 한 번 감싸는 것과 같다.
커스터마이징
MaterialApp는 구글 느낌나는 위젯들을 제공하고
CupertinoApp는 ios느낌나는 위젯들을 제공한다.
커스터마이징하고 싶으면 MaterialApp을 쓰면 된다고 한다.
Scaffold
Scaffold는 앱을 상중하 3부분으로 나눠준다.
MaterialApp에서 home에 해당하는 부분이다.
스캐폴드는 이런 식으로 앱화면을 3분할하는 역할을 한다.
위젯배치 및 정렬
위젯 여러개를 가로배치 하고 싶을 땐
Row안에 children을 넣고 그 안에 위젯을 넣어준다.
세로배치를 하고 싶을 땐 Row를 Column으로 바꿔주면된다.
children 배열 위에
mainAxisAlignment: MainAxisAlignment.center를
추가함으로써 배치된 위젯들을 중앙정렬할 수 있다.
center외에도 다양한 정렬 옵션이 있다.
crossAxisAlignment: MainAxisAlignment.center로
세로축 정렬을 할 수 있다.
crtl + space 를 눌러서 정렬커맨드들을 자동완성할 수 있다.
배운 거 활용
예제를 만들면서 배운 걸 활용해보았다.
컨테이너 여백주기
EdgeInsets.all()로 컨테이너에 여백을 준다.
margin은 컨테이너 바깥에 여백을 주는 것이고
margin을 padding으로 바꾸면
컨테이너 내에서 전방향으로 20만큼의 여백이 생기게 된다.
fromLTRB로 방향에 따른 마진(패딩)값을 줄 수도 있다.
컨테이너 박스에 테두리 넣기
박스에 테두리를 넣을 땐 BoxDecoration에서 Border속성을 줘야한다.
이때 박스의 색도 BoxDecoration안에서 설정해줘야 에러가 안난다.
컨테이너 정렬
컨테이너에 마우스 커서 찍고 Alt + Enter 눌러주면
컨테이너를 감쌀 것들을 선택할 수 있다.
여기서 Center를 누르면 컨테이너는 정중앙 정렬이된다.
Center 선택하고 Center -> Align으로 수정
alignment: Alignment.정렬위치로 컨테이너를 원하는데 정렬할 수 있다.
박스 가로세로 꽉차게
가로 세로 값에 double.infinity값을 줌으로써 컨테이너를
x,y축으로 꽉차게 만들 수 있다.
글자 색 넣기
글자 디자인은 TextStyle안에서 한다.
색상은 아시다시피 Colors.색깔명 이렇게 주는데
0xff헥스코드 이런식으로도 넣을 수 있다.
Color.fromRGBO() 로 RGB값과 투명도 설정도 ㄱㄴ하다.
버튼넣기 & 스타일
TextButton() 으로 버튼을 생성해준다.
ElavatedButton() 으로 더 예쁜 버튼 생성 ㄱㄴ (구글느낌의)
버튼 디자인은 style: ButtonStyle()안에 해준다.
버튼 역할을 하는 아이콘 넣기
AppBar디자인
title: 왼쪽제목
leading: 제목 왼쪽에 위치한 아이콘
actions: [우측아이콘들]컨테이너 비율 설정
컨테이너 일정비율로 쪼개기
Expanded()로 초록색 컨테이너를 제외한 나머지부분을
파랑색 컨테이너로 채워줄 수 있다.
박스 하나 꽉채우려면 Expanded(),
박스폭을 일정비율로 주려면 Flexible()을 쓰면 된다.
예제
이런디자인 짜보기
컨테이너와 Row들의 높이를 똑같이 설정해줘야한다.
글자들의 x축은 왼쪽정렬로 설정해줬고 row내의 세로축 정렬은 spaceEvenly로 일정한 간격을 두고 띄워지도록 설정했다.
