스나이퍼팩토리 내개인블로그 스나이퍼팩토리 내개인블로그

Hero 위젯 사용하여 아래의 결과물을 제작하세요. 플러터 공식문서에서 예제코드 및 실행영상을 확인하세요. https://docs.flutter.dev/development/ui/animations/hero-animations 네트워크 데이터를 얻을 수 있는 API 주소는 다음과 같습니다. https://sfacassignment-default-rtdb.firebaseio.com/.json JSON으로 데이터를 전달받을 수 있으며 body의 속성 값안에 List 형식으로 데이터를 받아볼 수 있습니다. main.dart import 'package:assigment19/mainpage.dart'; import 'package:flutter/material.dart'; void main() { runApp(..

기존의 키오스크앱을 활용하여 다음의 결과물을 제작할 수 있도록 합니다. 음식리스트는 다음의 API 주소에서 가져올 수 있습니다. http://52.79.115.43:8090/api/collections/options/records 속성값 items에 List 형태로 메뉴를 받아올 수 있습니다. 음식을 클릭하면, 주문리스트에 저장함과 동시에 앱 데이터에도 저장될 수 있도록 합니다. 주문 리스트의 Chip 의 삭제버튼을 누르면 앱 데이터에도 새로 저장될 수 있도록 합니다. 이 때, 앱 데이터를 저장하는 패키지는 shared_preferences 를 사용하여 해결합니다. 해당과제는 새로고침을 해도 주문리스트가 남아있는지가 핵심입니다. pubspec.yaml dependencies: flutter: sdk: f..

다음의 앱을 똑같이 구현하세요. 비밀듣는 고양이 API를 활용하여 다음과 같이 만들 수 있습니다. 페이지별 이미지는 다음과 같습니다. Requirements 주어진 패키지를 활용하여 비밀공유 앱을 제작합니다. 구현이 되어야 하는 기능은 다음과 같습니다. BottomSheet Drawer FAB 밑으로 당겨서 새로고침 기능 비밀 수 만큼 생성되는 커스텀 위젯(SecretCard) 생성 이 때 사용된 의존성 패키지는 다음과 같습니다. // ... pubspec.yaml 파일 일부입니다. dependencies: flutter: sdk: flutter animated_bottom_navigation_bar: ^1.1.0+1 cupertino_icons: ^1.0.2 font_awesome_flutter: ^1..

패키지 image_picker를 활용하여 다음의 UI를 만들어주세요. Requirements 네모 컷 위젯을 한 번 탭하면 이미지를 선택할 수 있도록 갤러리를 불러옵니다. 이 때 이미지를 선택할 경우 해당 네모 컷 위젯에 선택된 이미지로 대체됩니다. 다시 한 번 클릭해서 이미지를 바꿀 수 있습니다. 네모 컷 위젯을 더블클릭하면 기존의 이미지가 없어지도록 합니다. 최대한 코드를 줄여볼 수 있도록 합니다. import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; import 'dart:io'; void main() { runApp(const MyApp()); } class MyApp extends State..

다음의 URL에 데이터를 요청하여 문제를 해결합니다. https://sfacassignment-default-rtdb.firebaseio.com/.json 디바이스가 인터넷에 연결돼있는지 확인하는 패키지를 사용합니다. 패키지명 : connectivity_plus FAB을 누르면 인터넷이 연결되어있는지 확인합니다. 인터넷 연결을 확인중일 때 “인터넷 확인중입니다”와 로딩 위젯을 보여줍니다. 이 때, 로딩 위젯은 어떠한 것이든 상관없습니다. 화면을 아래로 당기면 데이터를 새로 요청할 수 있도록 패키지를 사용합니다. 패키지명 : pull_to_refresh 데이터를 가져올 때 사용자에게 데이터가 로딩중이라는 것을 알려줄 수 있도록 패키지를 활용합니다. 패키지명 : Shimmer 위 기능을 우선적으로 구현하며,..

Assignment 제공되는 패키지 secrets_cat_sdk를 활용하여 다음의 기대 결과물을 따라 만드세요. 이번 과제는 최대한 다음의 결과물과 다른 디자인으로 제작하는데 목표를 두세요. Requirements 앱 이름은 [비밀듣는 고양이]가 아닌 다른 이름으로 진행하세요. 앱 내에서 사용될 폰트는 다음과 같습니다. 플러터에 폰트 등록 방법을 검색하여 앱내에 적용할 수 있도록 하세요. neo.ttf 매인 캐릭터 또한 다음의 링크에서 마음에 드는 이미지를 골라서 진행하세요. flaticon 페이지들의 배경이미지는 다음의 링크에서 마음에 드는 이미지를 골라서 진행하세요. unsplash 각 위젯별 애니메이션은 최소 3개 이상이 적용되어야 합니다. 이 때 적용되는 애니메이션은 자유입니다. 페이지는 3개 이..

5. 다음의 URL에 네트워크 데이터 요청을하고, 응답 데이터를 활용하여 다음의 결과물을 제작하시오. URL : https://jsonplaceholder.typicode.com/photos?albumId=1 위 URL은 이미지와 타이틀을 List형태로 보내주는 무료 API입니다. 아래로 스크롤이 가능하도록 받은 데이터를 전부 나열하세요. import 'package:flutter/material.dart'; import 'package:dio/dio.dart'; import 'package:http/http.dart' as http; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super..

다음의 URL에 네트워크 데이터 요청을하고, 응답 데이터를 활용하여 다음의 결과물을 제작하시오 URL : https://sniperfactory.com/sfac/http_json_data 이 때, StatefulWidget을 생성하고 다음의 코드를 사용할 수 있도록 합니다. getData는 네트워크에 데이터를 요청하는 코드입니다. 그 외 해결방법은 자유입니다. 응답 데이터: {"item":{"name":"스나이퍼팩토리 플러터 과정","description":"스나이퍼팩토리의 플러터 과정입니다! 지금 바로 신청해볼까요?","image":"https://picsum.photos/200/200","price":4000000}} 내 코드 import 'package:flutter/material.dart'; i..