본문 바로가기

ETC/Flutter44

[flutter] 무한스크롤 과 새로고침 (pull_to_refresh) 인스타그램, 당근 마켓, 페이스북과 같이 화면을 계속 스크롤하여 데이터를 불러오는 기능은 정보를 공유하는 앱에서 거의 필수적으로 사용되는 기능 중 하나입니다. 오늘은 Flutter에서 이러한 무한 스크롤을 쉽게 구현할 수 있는 방법과 더불어 새로고침 할 수 있는 기능까지 살펴보려고 합니다. pull_to_refresh | Flutter Package a widget provided to the flutter scroll component drop-down refresh and pull up load. pub.dev pull_to_refresh 위 주소의 pull_to_refresh 패키지를 사용하면 손쉽게 구현할 수 있습니다. 아래 코드는 위 패키지 Readme를 해석하여 주석을 달은 부분이다. 한번 훑.. 2022. 1. 22.
[Flutter] CocoaPods's specs repository is too out-of-date to satisfy dependencies error 필자는 현재 M1 13 Pro를 사용하고 있고, 플러터를 빌드하다 보면 한 번씩 아래와 같은 오류가 뜨면서 빌드가 되지 않을 때가 있다. Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies. To update the CocoaPods specs, run: pod repo update Error running pod install Error launching application on iPhone 13 Pro. CocoaPods의 설정이 깨졌거나, Firebase의 SDK의 버전 종속성이 맞지 않을 때 발생하는데 다음 명령어로 이 오류를 해결할 수 있다. 먼저 Window 혹은 Mac Intel chip 사용자의 경우.. 2022. 1. 13.
[flutter,dart] List의 filled/generate 생성자 개발을 하던 중 이차원 배열이 필요한 상황이 생겼고, Dart에서 C++, Java의 int arr[3][3]={0,} 와 같이 배열의 크기를 지정해줌과 동시에 초기화를 시킬 수 있는지 궁금했다. List twoDimensionalArray = List.filled( 3,(i) => List.generate(3, (_) => false, growable: false), growable: false); 위와 같이 filled 생성자를 사용하면 손쉽게 크기를 지정해줌과 초기값을 지정해 줄 수 있었다. growable의 경우 default값은 false이며 true일 경우 확장이 가능하다. 위 코드의 경우 twoDimensionalArray = [[false, false, false], [false, fals.. 2021. 12. 29.
[flutter] listView Scroller disable(리스트 뷰 스크롤 막기) 아래 한줄 추가 physics: const NeverScrollableScrollPhysics() 참고 Flutter: ListView disable scrolling with touchscreen Is it possible to let a ListView only be scrollable with the ScrollController and not with the touchscreen? stackoverflow.com 2021. 12. 6.
[flutter] 서버로 이미지 업로드 하기(Dio, image_picker) 유저 프로필 사진을 변경하거나 리뷰에 올릴 사진을 업로드하기 위해 서버에 사진을 업로드하는 경우가 필요하다. 오늘은 서버로 이미지 파일을 업로드하는 경우를 알아보려고 한다. 그전에 설치해야 할 패키지가 두 가지가 있다. 첫 번째는 Http 통신을 위한 dio 패키지이다. Http 패키지를 이용해 통신하던 사람들에게도 이미지를 업로드할 때는 dio 패키지를 추천한다. 이미지를 서버에 업로드하기 위해서는 Content-Type를 multipart/form-data로 전송해야 하는데 dio를 사용하면 손쉽게 이용할 수 있고, 따로 http통신처럼 decode를 해주지 않아도 자동으로 decode 된 상태로 response가 내려오기 때문이다. dio | Dart Package A powerful Http cl.. 2021. 11. 30.
[flutter] tabar&tabbar view 스와이프 제한하기 tabbar를 구현했을 때 스와이프로 카테고리 이동을 못하게 하고 싶을 때가 있다. 그럴 때는 아래와 같이 'physics: NeverScrollableScrollPhysics(),' 부분을 추가해주면 된다. TabBarView( physics: NeverScrollableScrollPhysics(), controller: tabcontroler, children: [ Container(color: Colors.red), Container(color: Colors.green), Container(color: Colors.blue), ], ), 참고 disable swiping tabs in TabBar flutter Hello I have a tab bar in Flutter and I want to d.. 2021. 11. 23.
[flutter] 간단한 막대그래프 구현하기(리뷰 그래프) - vertical_barchart 리뷰 페이지 구성중 아래의 이미지처럼 리뷰 점수의 비율에 따른 막대그래프 구현이 필요했다. 편하게 구현할 수 있는 쓸만한 패키지를 발견해서 글을 써보도록 한다. vertical_barchart | Flutter Package Simple, responsive and beautiful Vertical BarChart. pub.dev 각각의 막대그래프의 정보를 기입한다. jumlah는 해당 막대그래프의 데이터 수이다. 총개수에서 자동으로 백분율로 변환하여 그래프로 나타내어 준다. List bardata = [ VBarChartModel( index: 0, label: "5.0", colors: [Color(0xfff93f5b), Color(0xfff93f5b)], jumlah: 179.w, tooltip: .. 2021. 11. 23.
[flutter] 이미지 추가 시 unable to load asset 에러 해결 방법 위의 사진을 넣기 위해 아래와 같이 정확히 경로를 불러왔지만 unable to load asset 에러가 떴다. Image.asset("assets/images/상품사진1@3x.png"), 알고 보니 파일명에 '@'와 같은 특수문자가 들어가서 에러가 난 것이었다. 파일명에서 특수문자를 빼고 다시 로드했더니 문제없이 해결되었다. 2021. 11. 23.
[flutter] Bottom Overflowed By ??? Pixels 오류 해결 해결방법 Scaffold에 resizeToAvoidBottomPadding:false 를 추가하고 body를 SingleChildScrollView로 감싼다. home: Scaffold( resizeToAvoidBottomInset : false, appBar: AppBar( title: Text("Registration Page"), ), body: SingleChildScrollView( child: RegisterUserPage(), )), 참고 Flutter - Bottom Overflowed By 119 Pixels I had an error "Bottom Overflowed by 199 pixel" when creating an Image inside the ListView, and after.. 2021. 11. 23.