나만의 개발블로그

폰에 저장된 이미지 가져오기 (Image Picker) 우선 플러그인을 하나 설치해야 하기에 pubspec.yaml에서 코드 기입 이후 전구를 클릭 해서 Pub get 해주기 dependencies: flutter: sdk: flutter http: ^0.13.4 image_picker: ^0.8.4+4 이후 ios/Runner/Info.plist 에서 아래의 코드를 기입 해주기 해당 코드는 허락 받는 코드가 되고 안드로이드는 필요 없는데 IOS에서는 필요해서 작성해줘야 함. NSPhotoLibraryUsageDescription 사진첩좀 써도 됩니까 NSCameraUsageDescription 카메라좀 써도 됩니까 NSMicrophoneUsageDescription 마이크 권한좀 제발 이제 main.d..

상세페이지 만들기 (Navigator) 버튼 클릭 시 사진을 업로드 할 수 있는 페이지 만들기 현재는 Tab을 활용해서 보여지는 페이지를 다르게 했는데 이번에는 Navigator를 사용해서 보여주는 방법을 배우기! Naviagor는 기존 페이지에 새로운 페이지를 덮어씌워서 페이지를 보여주게 한다. 웹과 다르게 모바일에서는 새로운 페이지를 열 때 기존 페이지에 새로운 페이지를 덮어씌우게 된다. 예시로 카카오톡에서 새로운 링크를 클릭 시 새로운 페이지가 기존 페이지를 덮어씌우는 것과 같다. 그래서 기존 Tab과의 차이점으로는 Stack으로 관리하기에 뒤로가기 버튼이 잘 작동하게 된다. 현재 AppBar에 만들어 뒀던 add_box_outlined 아이콘을 클릭 시 작동하기 위해 onPressed 메서드 안에..

스크롤 위치 파악하는 법과 더보기 요청 문자 중간에 변수를 넣는 방법 React와 같이 ${} 사이에 변수를 넣어주게 되면 된다. Text('좋아요 ${homeData[idx]['likes'].toString()}', style: TextStyle(fontSize: 15, fontWeight: FontWeight.*w700*),), 무한 스크롤 기능 구현 인스타나 페이스북과 같이 스크롤이 끝까지 내려가게 되면 서버에서 다시 데이터를 받아와서 끝없는 사용 경험을 줄 수 있도록 하기. 순서 스크롤바 높이 측정하기 import 'package:flutter/rendering.dart'; ← 스크롤 관련 유용한 함수가 있음 현재 LiswView 위젯에 서버로부터 받아온 데이터를 뿌리고 있기에 LiswView의 ..

Future 다루기 & FutureBuilder 지난 숙제에서 나는 서버에서 받은 데이터의 길이에 따라 출력하도록 했는데 강사님은 기존 배열에 데이터가 있는지 여부에 따라 조건 분기로 했다. 그래서 조건문을 통해 배열.isNotEmpty로 코드를 작성 조금 이상한 부분은 idNotEmpty가 자동 완성은 없는데 조건 분기가 잘 됨… class Home extends StatelessWidget { Home({super.key, this.homeData}); final homeData; @override Widget build(BuildContext context) { if (homeData.isNotEmpty){ return ListView.builder( itemCount: homeData.length..

앱이 서버와 데이터 주고받는 법 Flutter에서 GET, POST 요청을 하는 방법 pubspec.yaml의 dependencies에 아래 코드 추가 후 Pub get 클릭해서 설치하기 dependencies: flutter: sdk: flutter http: ^0.13.4 이후 android/app/src/main/AndroidManifest.xml 파일에 코드 삽입 해당 코드는 인터넷 사용 허락에 대한 코드 안드로이드만 설치가 필요하고 IOS는 별도 설치가 필요하지 않다고 함 마지막으로 main.dart 파일의 상단에 import 해오기 import 'package:http/http.dart' as http; import 'dart:convert'; 이제 요청을 해볼 텐데 앱이 로드 되었을 경우 바..

탭으로 페이지 나누는 법 페이지 나누는 방법 Navigator Router Tab 동적인 UI 만드는 방법 State 만들기 State에 현재 UI의 상태를 저장 화면 구현 State에 따라 Tab이 어떻게 보일지 작성 UX 경험 반영 유저가 쉽게 State 조작을 할 수 있도록 작성 구현 우선 state를 만들고 추후 변형 될 것을 위해 statefull 한 클래스로 변경 변수 생성 후 현재 상태 값을 넣어주기 보여질 값을 작성 state 변경 함수 작성 이후 현재 만들어 둔 BottomNavigationBar 에는 onPress가 없기에 onTap으로 state 변경 함수를 적용하기 여기서 파라미터 값을 추가해주고, 해당 파라미터 값은 items에 있는 버튼들의 종류를 의미 import 'packag..

import 문법과 ThemeData 추가 내용 이전 숙제 보강 내용 elevation 은 그림자 크기를 의미 appBar 생성 시 하단 border 같은 부분에 그림자가 있는데 해당 그림자를 조절할 수 있는 속성! import 문법 지난 시간에 배운 ThemeData() 위젯이 현재는 main.dart 파일 내에 위치해서 파일 코드는 여전히 길게 존재하게 되는데 해당 코드를 다른 파일로 빼서 실질적인 코드만 존재하도록 해주기! main.dart 파일이 있는 lib 폴더에 아무 작명의 dart 파일을 생성 강사님은 style.dart 라고 작명하심. 이후 변수에 main.dart 파일에서 작성한 ThemeData() Block 부분을 잘라서 붙여넣기 이후 style.dart 파일에는 flutter 기본 ..

프로젝트 설치 & ThemeData로 스타일 분리하는 방법 새롭게 프로젝트 만들기 Flutter로 프로젝트 생성 시 SDK 위치 잘 확인 후 생성하기 이후 analysis_options.yaml의 rules 내부에 아래의 코드 넣어서 Lint 우선 끄기 추후에 앱 발행 시 다시 true로 돌려서 불필요한 재렌더링 막아서 성능 향샹 시키기! rules: prefer_typing_uninitialized_variables: false prefer_const_constructors_in_immutables: false prefer_const_constructors: false avoid_print: false prefer_const_literals_to_create_immutables: false 우선 해당 ..

글자 입력란 TextField에 스타일주는 법 TextField() 위젯에 스타일을 줄 때 TextField() 위젯 안에 decoration: InputDecoration()으로 스타일을 줄 수 있다. TextField 양 옆에 아이콘을 넣을 때 decoration: InputDecoration()안에 icon: Icon(Icons.???) 넣어주면 됨. 물론 icon 파라미터 대신 prefixIcon suffixIcon 도 있음. child: TextField( controller: inputData, style: TextStyle(fontSize: 30), decoration: InputDecoration( icon:Icon(Icons.ac_unit_sharp), // 텍스트 필드 왼쪽 밖 pref..

null check 하는 법 & Android 앱으로 발행하기 Build 하기 전 체크 사항 Type check 변수, 함수를 만들 시 타입 체크를 했는지 null check 아래의 두 가지를 이용해서 확인 후 null 의 경우 다른 값을 보여주도록 하기 삼항연산자 Text(person[i].givenName == null ? '무명': person[i].givenName) 그런데 Dart 자체에서 null의 경우엔 삼항연산자 보다는 ??를 사용하기를 원하는 듯 ?? Text(person[i].givenName ?? ‘무명’) 이렇게 Type과 Null 체크를 다 했다면 Build 하기! Project Structure 버튼을 찾아 클릭하기! 나는 안보여서 단축키로 접근 Ctrl + Alt + Shift..