Growth Diary

지난 포스팅때 pickMultiImage()를 이용해서 갤러리에서 이미지를 가져와 봤습니다. 이제 이 코드를 제가 만들던 페이지에 옮겨서 작업을 이어나가려했는데 두가지 문제가 발생하였습니다. 1. pickMultiImage( ) 갯수 제한 설정 불가 한번에 이미지를 여러개 선택해서 List 형태로 가져다 쓸 수 있는건 좋았지만 갯수 제한을 설정할 수 없어서 너무 많은 이미지를 가져와서 오류가 발생하는 문제가 있었습니다. 저는 2개의 이미지만 가져올 수 있도록 만들고 싶었기 때문에 방법을 열심히 찾아봤지만 갯수를 지정해주는 방법은 찾지 못했습니다... if문을 사용해서 3개이상의 이미지가 선택되면 이미지가 안나오고 버튼이 남아있게끔 구현하였지만 임시방편일뿐 선택되는 이미지의 갯수 자체를 고정 시키진 못하였..

오늘은 제가 갤러리에서 이미지를 가져오고 지우는 과정에서 겪었던 많은 시행착오 과정을 얘기해보려합니다. 일단 본격적인 설명에 앞서 Flutter에서 이미지를 가져와서 사용하는데 필요한 라이브러리와 기본적인 지식들을 먼저 가볍게 말씀드리고 넘어가도록 하겠습니다. 먼저 제가 만들려고하는 것은 pubspec.yaml 의 assets를 설정해줘서 assets디렉토리에 저장된 이미지를 가져오는 방식이 아니라 image_picker 라이브러리를 이용해서 핸드폰 갤러리에 저장된 이미지를 가져오고 지울수 있도록 만드는것이 목표였습니다. image_picker 라이브러리의 ImagePicker().pickMultiImage()를 이용해서 한번에 여러개의 이미지를 가져오려고 했습니다. 이렇게 선택된 이미지들은 XFile ..

지난 포스팅때 데이터를 서버로 보내는걸 했는데 데이터 항목중에 현재 날짜도 포함되어있습니다. 따라서 오늘은 Flutter의 라이브러리를 사용해서 현재 날짜를 받아오는 걸 해보겠습니다. 사용 할 라이브러리는 다음과 같습니다. https://pub.dev/packages/intl intl | Dart Package Contains code to deal with internationalized/localized messages, date and number formatting and parsing, bi-directional text, and other internationalization issues. pub.dev pubspec.yaml 파일에서 intl 라이브러리의 최신 버전을 가져와줍니다. 날짜 정보..

저번에 get 을 이용해서 서버에서 데이터를 가져오는 것을 해보았으니 이번에는 post를 이용해서 서버에 데이터를 보내는걸 해보도록 하겠습니다. TextEditingController TextField에서 작성한 값을 서버로 전송할 계획인데 이렇게 하기 위해서는 TextEditingController()를 이용해줘야합니다. final TextEditingController namecontroller = TextEditingController(); 이렇게 namecontroller를 선언해주고 나중에 TextField에서는 children: [ TextField( controller: namecontroller, decoration: const InputDecoration(hintText: 'Enter T..

Listview.builder()는 동일한 형태의 view를 여러개 화면에 그릴때 효과적으로 사용할 수 있는 위젯입니다. 기본적으로 itemCount와 itemBuilder 속성이 필요합니다. itemCount는 용어 그대로 몇 개의 아이템을 표시할 것인지, itemBuilder는 어떤 view를 화면에 그릴지를 선택하는 속성입니다. itemCount : int값이며 ListView 항목들의 총개수에 해당한다. (단, 주어지지 않으면 무한히 항목을 만든다.) itemBuilder(BuildContext ctx, int i) : i번째에 해당하는 항목에 그려질 View를 반환하는 함수이다. idx는 0부터 시작. ListView.builder( itemCount: _riview.length, itemBui..

지난 포스팅에 이어 서버에서 가져온 데이터를 앱 화면에 보여지도록 해보겠습니다. 4. 데이터 Fetch fetchAlbum()메소드를 initState() or didChangeDependencies()에서 호출합니다. initState() 메소드는 한번 실행된 후 다시는 실행되지 않습니다. 따라서 InheritedWidget의 변화에 따라 API가 다시 로드 되는 것을 원한다면, fetchAlbum() 메소드를 didChangeDependencies()안에서 호출하고 그렇지 않다면 initState()에서 호출하면 됩니다. class _ListTileAppState extends State { late Future futureAlbum; //late : non-nullable 변수의 초기화를 나중에 할..

오늘은 서버에서 데이터를 가져와서 flutter 앱 화면에서 보이도록 해보겠습니다.(flutter 공식문서 내용을 참고하였습니다.) 1.  패키지를 추가합니다. pubspec.yaml는 플로터 프로젝트를 생성하면 같이 생기는 기본 파일로 패키지 의존성 관리 및 프로젝트 정의 등의 다양한 역할을 수행하는 파일입니다. 그중에 dependencies는 패키지의 의존성을 작성하는 곳으로 주로 외부 패키지를 가져다 쓰기 위해 사용되는데 이곳에 http 패키지를 추가해줍니다. 그리고 AndroidManifest.xml 파일에서 인터넷 권한을 추가해줘야합니다.  AndroidManifest.xml파일에 을 작성해줌으로써 앱에 인터넷 권한이 추가됩니다. http 패키지는 import 'package:..

앱 개발도중 기초적인 부분에서 헷갈려서 포스팅하면서 다시 한번 정리하고자합니다! Flutter에서는 화면에 무엇인가 표시하는 경우 모든 것을 Widget으로 처리합니다. 이러한 widget은 크게 StatefulWidget과 StatelessWidget 2개로 나뉩니다. 오늘은 이 두 위젯의 차이점에 대해 포스팅 하고자 합니다. Stateless Widget 화면이 로드될 때 한 번만 그려지는 State변경이 불가능한 위젯으로 변경이 필요한 Data가 없는 것을 의미하며 이벤트 또는 사용자 상호 작용에 의해 동작하지 않습니다. 쉽게 말하면 한번 빌드 된 이후로 그 위젯의 상태에 관여할 수 없습니다. 보통 아래와 같이 간단하게 선언됩니다. StatelessWidget을 상속하고, build() 함수를 @o..

저는 플로터를 실행할때 플로터 자체에서 모바일로 볼 수 있도록 제공해주는 애뮬레이터를 사용하지않고 웹이나 윈도우에서 결과를 확인했습니다. 그러다가 어차피 앱을 만드는거니까 모바일 환경에서도 제대로 확인을 해보는게 좋겠다는 생각이들 어서 애뮬레이터를 생성하고 실행 해보았습니다. 그런데 uses-dk:minSdkVersion 16 cannot be smaller than version 19로 시작하는 장문의 에러가 발생하였습니다. 찾아보니까 flutter에서 빌드 시, 특정 라이브러리가 minsdk버전을 충족하지 못하면 위와 같은 에러가 발생하고 minSdkVersion을 올려야 한다는 사실을 알게되었습니다. 그래서 어디서 버전을 올릴 수 있나 하고 찾아봤는데 android/app/build.gradle 파..

TextFormField는 텍스트를 입력하고 입력한 텍스트를 저장 및 유효성 검사를 하기 위한 위젯으로 Form 과 함께 많이 사용합니다. 먼저 TextFormField를 사용하기 위한 방법에 대해서 알아보도록 하겠습니다. 1. Globalkey로 Form 만들기 Form 위젯은 여러 양식 필드를 그룹화하고 유효성을 검사하기 위한 컨테이너 역할을 합니다. 양식을 만들때 GlobalKey를 이용하여 Form을 고유하게 식별하고 이후에 여러 양식 필드의 유효성을 검사할 수 있습니다. GlobalKey는 요소를 식별하고 다른 키로의 액세스를 제공한다고 합니다. 그리고 상위 위젯에 적용했을 시 하위 위젯에까지 적용이 된다고 합니다. 저는 Form에 글로벌키를 사용하고, 하위 위젯인 TextFormField의 유..