Flutter 썸네일형 리스트형 Flutter http 패키지와 api 통신 하기 Flutter에서는 어떻게 http 통신을 할까? flutter 패키지인 http를 이용해서 api 통신을 하는 예를 알아보자. https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 환경설정 pubspec.yaml 파일에 http package를 등록해 주자. http: ^0.13.4 http의 get/post function을 사용하기 위해서는 http package의 import가 필요하다. import 'package:http/http.dart'; or // as http의 경우는 function을 호출할때 // http라고 앞에 붙.. 더보기 Flutter Json to model https://javiercbk.github.io/json_to_dart/ JSON to Dart JSON to Dart Paste your JSON in the textarea below, click convert and get your Dart classes for free. Handcrafted by Javier Lecuona Github json_to_dart Code Twitter javiercbk.github.io Flutter에서 api 통신하고 나서 결과 값으로 받는 json을 객체로 만들기 위해 json raw data를 class(모델)로 만드는 방법에 대해서 알아보자. JSON data json이 다음과 같은 형식으로 존재 한다면 해당 json을 잘 복사하자. { "page":1, ".. 더보기 Flutter Provider (프로바이더 with MVVM) 상태관리 패키지 Provider란? 일반적으로 우리가 어떤 데이터를 위젯에서 표현하다 보면 같은 데이터를 공유하는 Widget이 발생하게 되고 데이터의 무결성을 위해서 State값을 공유하고 하위 위젯에게 전달하기 위해서 의미 없는 StatefulWidget을 구현해야 할때가 있다. 위젯에서 위젯으로 데이터 State를 전달하고 전달해서 그변화를 감지하여 화면에 다시 그려주고 하는 일들을 하게 되면 State값의 변화로 인해 다시 그리지 않아도 되는 Widget을 빈번하게 다시 그리게 된다. 상태값(State)을 공유하면서 Depth가 깊어지고 그러면서 flutter구조가 가져오는 성능저하를 개선하고 반복되는 코드를 제거 하기 위해서 만들어진 것이 Provider이다. 이 포스팅에서는 간단하게 viewModel과 pro.. 더보기 Flutter Rotate Animation (회전 애니메이션 만들기) Flutter Rotate Animation (회전 애니메이션 만들기) 위와 같은 이미지를 아래와 같이 회전하게 만드는 방법은?? 일정한 타이밍으로 애니메이션이 진행되어야 하는 애니메이션이 하나이기 때문에 SingleTickerProviderStateMixin 클래스를 상속받는다. SingleTickerProviderStateMixin 클래스는 StatefulWidget을 지원하기 때문에 애니메이션이 구현되어야 하는 Widget은 StatefulWidget이어야한다. TickerProviderStateMixin을 제대로 상속받았다면 vsync 값에 this를 입력했을때 제대로 인식할 것이다. animationController를 선언 하면서 애니메이션의 간격을 duration 값으로 정한다. 값이 작아지.. 더보기 Flutter. 이미지를 원형으로 crop해보자 default로 로드한 이미지의 경우 위와 같은 모양을 하고 있지만 요구사항에 의해 원형으로 만들어야 한다면 다음과 같은 방법으로 가능하다. 방법 1. Container( width: 80, height: 80, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( fit: BoxFit.fill, image: AssetImage('assets/img/music.png'), ) ) ); 방법 2. CircleAvatar( radius: 40, backgroundImage: AssetImage('assets/img/home-delivery.png'), ); 더보기 Flutter. 화면에 경고 영역이 생기면.. (Right Overflowed by N Pixels) Right Overflowed by N Pixels. 화면에 맞지 않는 큰이미지를 로드 했더니 다음 처럼 화면에 경고(주의) 영역이 표시되었다. 이럴때는 다음과 같은 방법으로 해결할 수 있다. 1. 실제 이미지 사이즈 줄이기 디자인 툴을 이용하여 이미지의 실제 사이즈를 줄인다. 모바일 디바이스에 맞춰 디자인을 다시 한다. 2. Image 위젯을 SizedBox로 감싸고 사이즈 변경하기 설정한 사이즈로 이미지사이즈가 변경된다. SizedBox(width: 200, child: Image.asset('assets/img/music.png')); 3. Image 위젯을 Flexible로 감싸기. 화면에 맞춰 이미지 사이즈가 자동으로 조절 된다. Flexible(child: Image.asset('assets/.. 더보기 이전 1 2 3 다음
