IT 프로그래밍-Flutter 8

[Flutter] FloatingActionButton에 SpeedDial(선택 버튼) 적용하기

안녕하세요. 오늘은 FloatingActionButton 구현 시, 선택버튼을 추가로 사용자에게 제시하는 방법에 대해 알아보도록 하겠습니다. 제가 원하는 기능은 FAB를 클릭할 경우 드롭업(?) 형식의 선택 버튼을 출력하여 사용자에게 추가적인 선택권을 제공하는 것이었는데요 !! 키워드 검색을 통해 적절한 API를 찾아내지 못하여(검색센스가 없어서 그런지 실제 레퍼런스가 없는 것인지는 모르겠지만요...) 여러번 찾아보고 가장 유사한 형태의 SpeedDial이라는 API를 소개하고자 합니다. 우선 영상을 통해 적용화면을 확인해보시죠 ! SpeedDial 적용화면 어떤가요?? 여러분들이 찾으시던 UI가 맞나요?? 아니라면 여러분들은 조금 더 검색을 해보셔야할 것 같습니다... 자!! 그렇다면 이제 적용방법에 ..

[Flutter] Dialog 생성 오류 해결기

최근 Flutter를 통한 앱개발을 수행하면서 만난 정말 당황스러운 오류를 해결한 과정을 공유합니다. A build function returned null. The offending widget is: Builder Build functions must never return null. To return an empty space that causes the building widget to fill available room, return "Container()". To return an empty space that takes as little room as possible, return "Container(width: 0.0, height: 0.0)". 에러로그는 다음과 같이 출력이 되었는데요. ..

[Flutter] 선택 다이얼로그 만들기

기존에 이미 만들어져 있는 위젯만큼 사용하기 편한건 없는 것 같습니다. 플루터 애플리케이션 개발 도중에 선택 다이얼로그를 만들고자 기존에 누군가 위젯을 만들어두지 않았을까하는 생각에 찾아보니 별다른 예제가 없었는데 그 이유는 엄~~~청 심플하게 만들 수 있기 때문이었습니다...ㅎㅎㅎ 혹시나 빠르게 선택 다이얼로그를 만들고자 하신다면 다음의 예제를 활용하시면 될 것 같습니다. showDialog( context: context, builder: (context) { return SimpleDialog( title: const Text("파일을 어떤형식으로 다운로드하시겠습니까?"), children: [ TextButton( child: Text("다운로드"), onPressed: () async { // ..

[Flutter] endless listview

안녕하세요. 지난시간에는 ListView의 작성방법과 클릭 시 상세페이지로 이동하는 방법에 대해 알아보았습니다. https://in-idea.tistory.com/64 [Flutter] 플루터 화면 이동하기 안녕하세요. 오늘은 지난시간에 이어 플루터에서 화면이동을 하는 방법에 대해 알아보겠습니다. (지난 실습은 아래 URL에서 확인하실 수 있습니다.) https://in-idea.tistory.com/63 [Flutter] 플루터 리스트 in-idea.tistory.com 오늘은 지난번에 구현한 아이템에 로딩간격을 두어 endless한 ListView를 만드는 방법에 대해 알아보도록 하겠습니다. 저는 10개 아이템을 간격으로 로딩 시차를 두어 로딩을 하는 방법을 사용하고자 합니다. 여기서 잠깐 !! 아이..

[Flutter] get API 사용 시 obx 컴파일 에러 발생 시 해결법

오늘은 제가 직면한 문제에 대해서 간단하게 정리만 하고 넘어가려 합니다. 플루터에서 리엑티브한 동작을 위해 사용하는 get API를 사용하던 도중 아래의 에러를 만나게 되었습니다. The getter 'obs' isn't defined for the type 'ScrollController' 문제를 해결하고자 이곳저곳을 돌아다녀 봤지만 그럴듯한 해결책이 없었습니다. https://stackoverflow.com/questions/57158458/flutter-error-the-getter-x-isnt-defined-for-the-class Flutter - Error: The getter X isn't defined for the class I have a class TripController that ..

[Flutter] 플루터 화면 이동하기

안녕하세요. 오늘은 지난시간에 이어 플루터에서 화면이동을 하는 방법에 대해 알아보겠습니다. (지난 실습은 아래 URL에서 확인하실 수 있습니다.) https://in-idea.tistory.com/63 [Flutter] 플루터 리스트뷰 만들기 안녕하세요. 오늘은 플루터 리스트뷰 예제를 가지고 왔습니다. 대부분의 상용 앱은 동일한 형태의 아이템(또는 객체)를 나열하기 위해 리스트뷰를 사용합니다. 쇼핑몰의 상품 리스트, 커뮤니티 in-idea.tistory.com 안드로이드에서 엑티비티가 쌓이는 방식과 마찬가지로 플루터에서도 Navigator를 이용하여 화면 즉 Screen을 스택구조로 쌓아 관리할 수 있습니다. 화면을 쌓는 메소드는 Navigator.push메소드로, 쌓을 화면을 정의할 Screen을 생성..

[Flutter] 플루터 리스트뷰 만들기

안녕하세요. 오늘은 플루터 리스트뷰 예제를 가지고 왔습니다. 대부분의 상용 앱은 동일한 형태의 아이템(또는 객체)를 나열하기 위해 리스트뷰를 사용합니다. 쇼핑몰의 상품 리스트, 커뮤니티의 게시글 리스트 등 다양한 상황에서 사용되죠! 그러면 플루터에서는 어떻게 리스트뷰를 만드는지에 대해 알아보도록 하겠습니다. 상황설정을 위해 도서리스트를 나열하는 예제를 작성해보았습니다. 우선, Book 객체를 정의해줍니다.(예제에서는 main.dart에 모든 클래스를 넣었습니다.) class Book { int id; String title; String imgSrc; Book({required this.id, required this.title, required this.imgSrc}); Map toMap() { ret..

[Flutter] 플루터 이미지 불러오기 중 오류현상

안녕하세요. 최근 플루터를 공부하면서 직면한 오류를 공유하고자 합니다. 한 페이지 내에서 여러가지 이미지를 불러오는 프로젝트를 진행하던 중 아래의 두 에러를 만나게 되었습니다... unhandled Exception: SocketException: Connection reset by peer (OS Error: Connection reset by peer…) Unhandled Exception: Connection closed before full header was received 이미지 불러오기는 png, jpg, gif의 확장자까지 모두 취급하였습니다. 카테고리를 나누어 메인페이지에서 최초 로딩 시 약 두번의 서버콜백 과정이 있었고 (객체지향적으로 봤을때 A라는 객체의 리스트를 한번 불러오고 해당 ..