플러터34 [flutter 상태관리] 6. stateful widget 실습2, 태그 필터 갤러리 만들기 상태 관리 관점에서 stateful widget 실습을 하고 있습니다. sateful widget 실습 1에서 체크박스로 선택 가능한 갤러리를 만들었는데요. 이 화면을 개선해서 태그로 필터 기능을 가지는 갤러리로 수정해 보도록 하겠습니다. *이번 실습을 통해서 배우는 것 1. GridView 2. where 활용법 (자바스크립트의 filter) 4. 상위 위젯에서 하위 위젯으로 상태와 콜백 메소드 건네주기 5. 갤러리 만들기 6. Drawer 지난 앱의 상태 지난 포스트에서 만든 앱은 아래와 같은 화면을 가지고 있습니다. 갤러리는 사진을 단순히 보여주는 일반모드와, 사진을 길게 클릭했을 때 체크박스로 선택을 할 수 있는 태그 모드가 있습니다. 사진의 체크박스를 선택하면 선택된 상태는 로컬 상태에 저장됩니.. 2022. 6. 6. [flutter 상태관리] 5. stateful widget 실습, 체크박스를 가진 갤러리 만들기 지난 포스트에서 상태 관점으로 stateful widget을 알아보았습니다. 이번 포스트는 상태를 관리하는 갤러리 화면을 만들면서 플러터 공부를 해보도록 하겠습니다. 이번 포스트에서는 Stateful Widget의 상태 관리, 상위 위젯에서 하위위젯으로의 데이터 전달, 갤러리 만들기, Stack 레이아웃 등에 대해 다루게 됩니다. 갤러리 화면 개요 앞으로 코딩할 화면을 간략히 파악해보겠습니다. 우선 아래처럼 갤러리 화면에 사진들이 보여지고 있습니다. 태그 모드가 존재하는데, 태그 모드로 들어가기 위해서는 사진 중 하나를 길게 클릭하면 됩니다. 아래가 사진을 길게 클릭해 태그모드로 전환된 화면입니다. 태그 모드에 들어가면 레이아웃은 크게 달라지지 않지만 사진 왼쪽 위에 체크박스가 생기게 됩니다. 각 사진별.. 2022. 6. 4. [Flutter] Dart, async / await 비동기 처리 플러터 앱에서 async와 await를 사용해 비동기 처리 코드를 깔끔하게 유지할 수 있습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Future와 then을 사용하는 비동기 처리 async와 await 키워드 async, await를 사용하는 비동기 처리 await와 block의 차이 이해하기 Future와 then을 사용하는 비동기 처리 아래 Future와 then을 사용한 비동기 처리 코드가 있습니다. (Future와 아래 코드에 대한 설명은 이쪽을 참고해 주세요.) main 함수에서 세 개의 함수를 호출하고 있습니다. mockFileIO가 호출되고 처리가 끝나면 다음 mockHttpRequest를 호출하게 됩니다. mockHttpRequest는 비동기 처리로 즉시 Future를 반환하게 되.. 2022. 5. 9. [Flutter Layout] 17. 플러터 Hero 위젯 애니메이션(화면 전환시 애니메이션 넣기) 화면이 전환될 때 애니메이션과 화면이 바뀌면 자연스러운 사용자 경험을 제공할 수 있습니다. Hero 위젯으로 화면이 전환되면서 애니메니션을 보여주는 방법을 익혀보겠습니다. 프로젝트 만들기 VSCode에서 new project로 herodemo라는 새로운 앱을 만들겠습니다. 잠시 후 플러터의 기본 코드가 자동으로 생성이 됩니다. 앱의 시작 코드가 들어있는 main.dart에서 MyApp클래스를 제외한 모든 불필요한 코드를 삭제하겠습니다. 불필요한 코드를 정리해 주었고 MyApp 위젯에서 home 속성에 HeroPage를 설정하고 있습니다. HeroPage HeroPage 클래스를 작성하겠습니다. HeroPage Stateless위젯으로 build메소드에서 Scaffold를 반환해 주고 있습니다. body는.. 2022. 4. 26. 이전 1 2 3 4 5 ··· 9 다음
