동물 목록 어플 만들기(ListView)[2]

동물 목록 어플 만들기(ListView)[1]

이전 게시글 이어 작성하였습니다. 

---

동물 추가 화면 만들기

lib/sub/secondPage.dart

다트에서는 반환값을 한 줄로 표현하고자 할 때 => 화살표를 이용할 수 있다.

즉, createState() => _SecondApp()코드는 _SecondApp()을 반환하는 createState() 함수를 호출한다는 의미이다.

---

동물 이름 입력란 만들기

lib/sub/secondPage.dart

<Widget>[] 배열 안에 사용자가 동물 이름을 입력할 텍스트필드를 하나 추가한다. 키보드 유형은 text로 설정한다.

nameController를 사용하기 위해 TextEditingController() 함수의 반환값을 받는 변수를 final로 선언한다.

---

 

lib/sub/secondPage.dart

라디오 버튼을 이용해 동물의 종류를 선택할 수 있도록 텍스트필드 아래 코드를 추가한다. 

라디오 버튼을 만드려면 value, groupValue, onChanged 값을 지정해야한다. 

   - value는 인덱스 값이고, groupValue는 그룹화, onChanged는 이벤트처리이다. 

value에는 각각 0,1,2를 넣어 인덱스를 부여하고, groupValue에는 int형, _radioValue를 선언하여 넣는다

onChanged에는 라디오 버튼이 눌렸을 때 호출할 함수를 라디오 버튼의 인덱스 값을 _radioValue 변수에 넣는

_radioChanged()함수로 정의해서 넣는다. 

---

체크박스 만들기

lib/sub/secondPage.dart

동물이 날 수 있는지를 선택하는 체크박스를 추가한다.

---

동물 이미지 가로로 배치하기

lib/sub/secondPage.dart

Row 위젯은 이미지가 화면을 벗어나면 다 표시하지 못하고 노란색 빗금으로 알려준다. 이럴 때는 리스트뷰를 사용하면 편리하다.

리스트뷰는 세로 스크롤이 기본이지만 scrollDirection을 이용하면 가로로도 변경할 수 있다.

---

동물을 목록에 추가하기

lib/sub/secondPage.dart

AlertDialog에서 Title은 알림 창에 표시할 제목이고 content는 내용이다. 

actions는 배열 형태로 위젯을 가져올 수 있는데, 여기서는 버튼을 선언해 이벤트를 처리하도록 작성하였다. 

<아니용>을 누르면 알림 창이 꺼지고 <넵>을 누르면 animal을 리스트에 추가한 다음 알림 창이 꺼지도록 작성하였다. 

이 함수는 라디오 버튼에서 선택된 값을 전달받아 동물의 종류를 문자열로 반환한다.

---

구동 화면

---

 

GitHub - shinjoo95/flutter_listview_animal

---

Cupertino위젯을 활용하여 iOS 스타일로 작성한 코드

GitHub - shinjoo95/flutter_listview_animal_ios