전체 글 (102) 썸네일형 리스트형 Flutter _ Login 기능 구현 준비 (VScode Flutter 프로젝트에 FireBase 연동하기) 230622 오늘은 현재 진행중인 Music is Life라는 개인 프로젝트의 UI 구성 중 로그인 기능이 필요하여 정리를 같이 해보도록 하겠다. 어떤 응용프로그램에 로그인 기능을 구현하는 방법은 다양하다. 조건문을 이용하여 데이터 비교로 구현하거나 DataBase를 연동하여 SQL문으로 확인하여 구현하는 방법이나 특정 웹이나 앱의 프레임워크의 Authorization을 이용한 방법등이 있는데 Flutter의 경우 조금 특별하게 Google에서 인수한 FireBase라는 플랫폼으로 구현할 수 있다. FireBase는 위와 같이 여러 빌드를 사용할 수 있는 웹 애플리케이션 플랫폼인데 인증이나 실시간 데이터베이스의 기능등을 사용하여 회원가입 기능이나 로그인 기능을 구현할 수 있고 나머지 기능들 또한 Flut.. Flutter _ Navigator and Routing 230614 오늘은 Widget의 이동을 담당하는 Navigator에 대해 포스팅 하겠다. 앱을 사용하다 보면 흔히 볼수있는 화면의 이동. 앱 개발자라면 필수로 알고있어야하고 자주 사용하기 때문에 개념을 정확하게 알고있어야 된다고 생각한다. https://docs.flutter.dev/ui/navigation Navigation and routing Overview of Flutter's navigation and routing features docs.flutter.dev Flutter 공식 Documentation를 참고하여 Navigator는 무었이고 어떤 역할을 하는지 무엇을 할 수 있는지 알아보자. 1. Navigator? Flutter에서는 화면 사이를 이동하고 DeepLinks를 처리할 수 .. Flutter _ 이미지 배경 230613 학습용으로 진행했던 Flutter 미니 프로젝트가 끝나고 이제 혼자 구글링하면서하나의 앱을 만들어 보려고 한다. 코드 리뷰보다는앱 제작 과정 중 알게된 사실들을 짧게라도 포스팅할 것이다. 오늘은 새로운 앱의첫 화면을 구성하는 과정 중 내가 만든 이미지를 앱의 배경으로 만들어 보았다. 위 이미지는 앱 실행시 처음으로 보여줄 화면이고 이를 적용하기 위해서는 assets라는것을 추가해야한다. 1. 이미지 디렉토리 생성 우선 가장 먼저 현재 작업 디렉토리에 내가 만든 이미지를 저장한다. 2. pubspec.yaml에 assets 추가 pubspec.yaml을 보면 위와 같이 친절하게 어플리케이션에 assets를 추가하는법이 주석으로 달려있다. 양식에 맞춰 이미지 디렉토리 경로를 설정해준다. 3. 컨.. Flutter _ Favorites 230608 오늘은 웹툰의 좋아요 기능을 만들어 보자! 1. Favorite Action DetailScreen에 있는 AppBar에는 actions라는 리스트 위젯이 존재하는데 이것을 활용해서 좋아요 버튼을 만들어 보자. 위와 같이 actions를 선언하고 IconButton으로 만든 다음 눌렀을때의 함수 onPressed는 잠시 비워두고 아이콘만 추가해 주자. 멋진 아이콘이 생성 되었다. 이제 우리는 위의 버튼을 누르면? 채워진 하트가 나오고 다시 채워진 하트를 누르면? 비어있는 하트가 나오게 해야한다. 어떻게 휴대폰에 위의 데이터를 담아둘 수 있을까? 2. Shared_Preferences Package 위 질문의 정답은 바로 Flutter 팀이 만든 Shared_Preferences Package.. Flutter _ Url Launcher 230607 오늘은 지난 포스팅에이어 회차 목록을 클릭하면 해당 페이지로 이동하는 기능을 만들어 보자. 1. Url_Launcher 준비 Flutter에서 url 페이지 이동을 하기 위해서는 우선 Url_Launcher라는 패키지를설치해야한다. https://pub.dev/packages/url_launcher url_launcher | Flutter Package Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes. pub.dev 저번 Http 패키지 설치와 마찬가지로 pub.dev에서 검색 후 설치가 가능한데 위 링크를 참고해서 설치해보자. url_launcher 또한 터미널에서 설치하는 방식과 dependen.. Flutter _ Detail Screen Upgrade2 230606 오늘은 지난 포스팅에 이어 Detail Screen에 내용을 더 추가해 볼건데 새로운 FutureBuilder를 만들어 episodes 데이터들을 앱에 출력해보자. 1. Episodes 우선 새로운 SizedBox를 생성하여 첫 번째 FutureBuilder와 여백을 준 후 두 번째 FutureBuilder를 선언하였다. 두 번째 FutureBuilder가 가져올 future는 episodes이고 snapshot에 데이터가 없다면 빈 Container를 출력한다. 이제 만약 데이터가 존재한다면 어떻게 출력할것인지 정해야하는데 Column을 출력하는 방법도 있고 ListView를 출력하는 방법도 있다. ListView는 여러 요소를 다루는데 최적화 되어있지만 동시에 뭔가를 구현하는데는 까다롭기.. Flutter _ Futures & Detail Screen Upgrade 230605 오늘은 저번 포스팅에서 만들었던 함수들을 활용하여 데이터를 불러와 디테일 페이지에 내용을 채워보자. 1. Futures 우선 가장 먼저 webtoon_detail_screen.dart 파일로 이동해서 위와 같이 webtoon을 정의하는데 중요한것은 getToonById()를 id로 받아야 한다는 것이다. 그런데 여기서 문제가 생긴다. DetailScreen에 선언된 id는 생성자로써 초기화된 변수 id이기 때문에 ToonflixApiService의 getToonById의 id와 매칭이 안되는 것이다. 조금 다른 방법을 써야할것 같다. 우선 DetailScreen을 StatefulWidget으로 바꾼다. 그러면 위와 같은 변화가 생긴다. 우리가 잘쓰던 key값들에 widget이 붙는데, 이러한.. Flutter _ ApiService Upgrade 230605 오늘은 웹툰의 상세페이지에 내용을 추가하기 위해 API의 데이터를 추가적으로 Fetch하는 작업을 해보겠다. 1. Api_Service Upgrade 현재 우리의 강의용 Api에서 id를 붙이면 해당 id의 웹툰의 title, about, genre, age, thumb의 정보가 출력되는데 이 key값들을 이용해 우리가 만들었던 Api_Service 를 업그레이드 하여 DetailWebtoon에 정보를 가져오자. 1-1. webtoon_detail_model 우선 Toonflix_api_service.dart 파일로 이동하여 새로운 함수를 선언해야 한다. 역시 Future 타입으로 모델에 데이터를 리턴 받아야 하는데 우리가 기존에 사용했던 WebtoonModel은 title, thumb, i.. 이전 1 2 3 4 ··· 13 다음
