Flutter 공부 기록 8

지난번에는 안드로이드 에뮬레이터를 사용해 보았는데, 다시 크롬을 사용하겠습니다.

지난번의 코드입니다.

이때 child를 사용했었는데, child는 하나의 위젯만 추가할 수 있고,

children을 사용하면 여러개의 위젯을 추가할 수 있습니다.

column을 사용하면 세로로 배치할 수 있고, row를 사용하면 가로로 배치할 수 있습니다.

그러면 여러 위젯을 세로로 배치해보겠습니다.

 

children으로 Text 2개를 세로(column)로 배치했습니다.

되긴 했는데, 중앙에 놓는게 더 보기 좋겠죠? 

 

mainAxisAlignment: MainAxisAlignment.center,

 를 추가해주시면 됩니다.

 

이번에는 텍스트를 꾸며볼겁니다.

css를 다뤄보신 분이라면 훨씬 쉬울거라고 생각합니다.

일단 사용해보겠습니다.

위에있는 텍스트만 스타일을 적용시켰습니다.

사용 방법은 style: TextStyle() 안쪽에 자신이 원하는 속성들을 집어넣으면 됩니다.

저는 글자 색이랑 글자 크기를 변경시켰어요.

추가로 글자 색 변경시키는 방법은

color: Color(), 를 사용하면 되는데, 값은 0xff에다 자신이 원하는 색 코드를 넣으면 됩니다.

여기서 0xff346789는 css의 #346789과 같아요.

 

이번에는 버튼을 사용해보겠습니다.

outlinedButton을 사용하면 테두리가 있는 버튼이 만들어집니다. (TextButton은 기본적으로 테두리가 없습니다.)

button의 텍스트도 child에 Text를 사용하여 넣을 수 있습니다.

 

 

ElevatedButton은 배경이 입체적으로 튀어나온 느낌을 준다고 하는데, 

겉보기에는 글자색이랑 배경색이 바뀐 효과만 보입니다.

 

IconButton을 사용해봤습니다.

앞의 세 버튼과 다르게 child를 사용하지 않고 icon을 사용합니다.

icon 전용 버튼이라 글자 같은걸 넣을 필요가 없어서가 아닐까 싶습니다.

저는 Icons.cabin을 사용했는데,

Icons.까지 입력하신 후 ctrl +space를 누르시면 사용해볼 수 있는 아이콘들의 목록이 나옵니다.

 

이번에는 GestureDetector을 사용해보겠습니다.

이름에서 알 수 있듯 움직임을 감지 하는데,

저는 일반 클릭, 더블 클릭, 길게 클릭을 기준으로 감지해보겠습니다.

GestureDetector는 IconButton 바로 아래다가 작성했습니다.

한번만 클릭했을 때, 더블 클릭 했을 때, 길게 클릭 했을 때를 기준으로 각각 이벤트를 발생시키고 싶다면,

onTap, onDoubleTap, onLongTap 안쪽에 원하는 기능을 넣으시면 됩니다.

저는 단순하게 print문을 넣어서  콘솔에 찍어봤습니다.

그런데, 아무 곳이나 클릭한다고 되는 것이 아니라, 해당 되는 영역을 child쪽에 Container로 만들어 주셔야합니다.

속성으로 width 및 height는 각각 가로,세로 길이를 나타내는데, 이게 하나라도 없으면 안보입니다.

보이는 것들은 기본적으로 설정되어 있는 것들일거에요.

color은 아까 사용해보았던거고, 

borderRadius: BorderRadius.circular(100),

이 부분은 테두리의 곡률? 저 안쪽의 숫자를 크게 넣을수록 원형에 가깝게 됩니다.

css로는 border-radius: 50%하면 무조건 원형이었는데, 이건 원형의 기준을 잘 모르겠어서 100쯤 넣으니 원형으로 보이게 나왔습니다.

 

GestureDetector가 감지할 수 있는 움직임을 몇개 더 기록해 놓겠습니다.

 

onPanStart: 드래그가 시작되었을 때 실행되는 함수 입력

onPanUpdate: 드래그 위치가 업데이트될 때마다 실행되는 함수 입력

opPanEnd: 드래그가 끝났을때 실행되는 함수 입력

 

여기서 pan 대신에 HorizontalDrag를 넣으면 수평으로 드래그 될 때만을 기준으로 바뀌고

VerticalDrag를 넣으면 수직으로 드래그 될 때만을 기준으로 바뀝니다.

Scale을 넣으면 확대가 될 때를 기준으로 바뀝니다.

 

이번에는 FloatingActionButton을 사용해보겠습니다.

기존의 아이콘 버튼을 이걸로 교체했습니다.

 

이 버튼은 borderRadius의 변경 없이도 자동으로 둥그런 속성을 가지고 있습니다.

단순히 이렇게 생긴 버튼이 필요할 때 사용하면 될 것 같습니다.

 

이번글은 여기서 마치고, 다음 글에서 이어서 하겠습니다.

감사합니다~