동물 목록 어플 만들기(ListView)[1]
대부분의 앱이 세로로 긴 목록으로 화면을 구성하다 보니 사용자들도 세로 스크롤이 편하게 느낀다.
리스트뷰를 이용하여 동물 목룍을 보여주는 앱을 만들어 보았다.
2022.11.09 - [독학일지/flutter] - 탭바(tabBar) 만들기
이전 탭바 게시물을 활용하여 제작하였다.
이미지 넣는 법
- 새로운 파일을 생성한 뒤 이미지들을 넣어준 뒤,
- pubspec.yaml 파일을 열고 다음 코드를 기입해준다.
- 파일을 저장하면 소스 편집 창위에 'Flutter commands'에서 <Pub get>을 클릭해 이미지를 사용한다.
동물 정보를 담당할 Animal 클래스를 생성
동물 이름(animalName), 동물 정보(kind), 동물 이미지 경로(imagePath), 날 수 있는지(flyExist)에 대한 정보를 변수로 선언하였다.
Animal 클래스의 생성자 함수를 보면 Animal 객체를 생성할 때 전달받은 동물 정보가 중괄호 안에 있는 각각의 매개변수에 대입된다.
매개변수 앞에 붙은 @required 애너테이션은 함수를 호출할 때 꼭 전달해야 하는 값이라는 뜻이다.
_MyHomePageState 클래스의 TabController 선언 아래 동물 정보를 담을 List를 선언한다.
List를 선언할 때는 처음에는 빈 값이므로 List.empty(*growable: true)로 선언하도록한다.
*growable은 이 리스트가 가변적으로 증가할 수 있다는 것을 의미한다.
initState() 함수에 각 동물의 정보를 입력해 Animal 객체를 생성하고 동물 목록 animalList에 추가한다.
FirstApp 클래스에서 animalList 데이터를 받아올 수 있도록 클래스를 수정한다.
처음에 FirstApp 객체를 생성할 때 목록도 있어야 하므로 final로 선언한다.
final로 선언 시 오류가 나면 list를 매개변수로 입력받는 생성자를 추가하면 된다.
이제 전달받은 list를 ListView.builder를 사용해 만들었다. ListView.builder를 사용하려면 ItemBuilder가 필요하다.
itemBuilder는 BuildContext와 int를 반환한다.
- BuildContext는 위젯 트리에서 위젯을 위치를 알려준다.
- int는 아이템의 순번을 의미한다.
position은 리스트에서 아이템의 위치를 나타낸다. position이 1이면 list[1] 코드는 목록에서 두번 째 아이템을 의미한다.
Animal 객체이므로 리스트에 .animalName, .imagePath와 같은 코드를 붙여 동물 정보를 가져올 수 있다.
터치 이벤트 처리로 알림 창 띄우기
터치 이벤트를 처리해야 하므로 GestureDetector 위젯을 사용한다.
GestureDetector 위젯은 한 번 터치, 두 번 터치, 길게 누르기, 끌기 등 손가락 제스처와 관련된 많은 이벤트를 처리한다.
한 번 터치햇을 때 알림 창을 듸우도록 onTap 이벤트에 showDialog() 함수를 호출한다.
AlertDialog를 이용해 dialog라는 이름의 알림창을 만들고 내용과 스타일은 content와 style로 설정한다.