Flutter16 동물 목록 어플 만들기(ListView)[2] 동물 목록 어플 만들기(ListView)[1] 대부분의 앱이 세로로 긴 목록으로 화면을 구성하다 보니 사용자들도 세로 스크롤이 편하게 느낀다. 리스트뷰를 이용하여 동물 목룍을 보여주는 앱을 만들어 보았다. 2022.11.09 - [독학일지/flutter] shinjoo95.tistory.com 이전 게시글 이어 작성하였습니다. 동물 추가 화면 만들기 다트에서는 반환값을 한 줄로 표현하고자 할 때 => 화살표를 이용할 수 있다. 즉, createState() => _SecondApp()코드는 _SecondApp()을 반환하는 createState() 함수를 호출한다는 의미이다. 동물 이름 입력란 만들기 [] 배열 안에 사용자가 동물 이름을 입력할 텍스트필드를 하나 추가한다. 키보드 유형은 text로 설정한.. 2022. 11. 12. 동물 목록 어플 만들기(ListView)[1] 대부분의 앱이 세로로 긴 목록으로 화면을 구성하다 보니 사용자들도 세로 스크롤이 편하게 느낀다. 리스트뷰를 이용하여 동물 목룍을 보여주는 앱을 만들어 보았다. 2022.11.09 - [독학일지/flutter] - 탭바(tabBar) 만들기 이전 탭바 게시물을 활용하여 제작하였다. 이미지 넣는 법 - 새로운 파일을 생성한 뒤 이미지들을 넣어준 뒤, - pubspec.yaml 파일을 열고 다음 코드를 기입해준다. - 파일을 저장하면 소스 편집 창위에 'Flutter commands'에서 을 클릭해 이미지를 사용한다. 동물 정보를 담당할 Animal 클래스를 생성 동물 이름(animalName), 동물 정보(kind), 동물 이미지 경로(imagePath), 날 수 있는지(flyExist)에 대한 정보를 변수.. 2022. 11. 12. 탭바(tabBar) 만들기 여러 페이지 만들고 이동하기 여러 화면을 만들고 각 화면을 탭바에 연결해 사용자가 탭을 눌렀을 때 각 화면으로 이동하는 앱을 구현한다. 모바일 앱 개발에서는 이와 같은 기능을 내비게이션(navigation)이라 칭힌다. 탭바 위젯을 사용하려면 탭 컨트롤러가 필요하다. main.dart _MyHomePageState 클래스에서 initState() 함수를 이용해 TabController를 선언한다. TabController에서 length에는 몇 개의 탭을 만들지 지정하고, vsync에는 탭이 이동했을 때 호출되는 콜백 함수를 어디서 처리할지 지정한다. _MyHomePageState 클래스에 *with 키워드를 추가하고 SingleTickerProviderStateMixin 클래스를 지정하면 vsync: .. 2022. 11. 9. 계산기 구현하기 flutter를 활용하여 덧셈, 뺄셈, 곱셈, 나눗셈 기능 구현하기 * 두 수를 입력받아 연산 후 그 결과를 출력하는 기능 - 텍스트필드를 다루려면 TextEditingController 를 설정해야된다. - _WidgetAppState 클래스에 TextEditingController를 선언하고, Text에 출력할 문자열도 선언. * 텍스트필드에 controller 선언 - 첫번 째 필드에 value1, 두번 째 필드에 value2 * 플러터가 제공하는 키보드 유형 키보드 유형 설 명 text 기본 텍스트 multiline 멀티 라인 텍스트, 메모 같이 여러 줄을 입력할 때 사용 number 숫자 키보드 표시 phone 전화번호 전용 키보드 datatime 날짜 입력 키보드 emailAddress @ 표.. 2022. 11. 8. Flutter의 구조 플러터의 폴더 및 파일 구성 폴 더 내 용 비 고 android 안드로이드 프로젝트 관련 파일 안드로이드 스튜디오로 실행 가능 ios iOS 프로젝트 관련 파일 엑스코드로 실행 가능(맥 전용) lib 플러터 앱 개발을 위한 다트 파일 플러터 SDK 설치 필요 test 플러터 앱 개발 중 테스트 파일 테스트 편의성 제공 * test - 일반적으로 함수를 테스트하려면 앱을 다시 실행해야 해서 시간이 걸리는데, 플러터 프로젝트는 test 폴더를 제공함으로써 편리하게 테스트할 수 있음 파 일 내 용 비 고 pubspec.yaml 패키지, 이미지, 폰트 설정 직접 관리 README.md 프로젝트 소개 .gitignore 깃에 커밋, 푸시 등 소스 코드를 업로드할 때 필요 없는 파일 기록 .metadata Flut.. 2022. 11. 7. 통신 및 다트예제 JSON - 대부분 앱은 서버와 데이터를 주고받으며 상호 작용하고 화면에 필요한 데이터를 출력한다. 이러한 데이터를 교환할 때 가장 많이 쓰는 형식이 JSON이다. 직접 문자열 형태나 XML을 이용해 데이터를 주고받기도 하지만, 가장 편리하면서 파일 크기도 작은 JSON형식을 주로 이용한다. JSON을 사용하려면 소스에 *convert라는 라이브러리를 포함해야한다. * import 'dart:conver'; - jsonDecode()함수를 이용하면 서버에 JSON 데이터를 받아서 사용할 수 있다. - jsonEncode()함수를 호출하면 키값이 큰따옴표로 묶이고 전체 데이터를 작은따옴표로 한 번 묶어서 JSON형태의 데이터가 된다. 이처럼 다트는 간단하게 JSON을 만들고 파싱하여 데이터를 주고받는 기능.. 2022. 11. 7. 연락처 앱 만들기 플러터를 활용하여 간단한 연락처 앱을 구현 https://github.com/shinjoo95/Flutter.git GitHub - shinjoo95/Flutter: 플러터를 활용하여 간단한 연락처 앱 만들기 플러터를 활용하여 간단한 연락처 앱 만들기 . Contribute to shinjoo95/Flutter development by creating an account on GitHub. github.com 기능 요약 - 전화번호 추가 기능 - 전화번호 삭제 기능 - 간단한 스타일링 2022. 10. 26. 이전 1 2 다음 반응형
