Flutter (9) 썸네일형 리스트형 [Flutter] Retrofit, Dio로 편하게 API 통신하자 Flutter로 외부 백엔드와 연동할때가 있다.매번 불필요한 모델을 만들지 말고 아래와 같이 편하게 연동부를 개발하자 1. 먼저 pubspec.yaml에 필요한 패키지를 추가dependencies: dio: ^5.4.0 retrofit: ^4.0.3 json_annotation: ^4.8.1dev_dependencies: retrofit_generator: ^7.0.7 build_runner: ^2.4.6 json_serializable: ^6.7.1 2. api-service.dartimport 'package:dio/dio.dart';import 'package:retrofit/http.dart';part 'api_service.g.dart';@RestApi(baseUrl: "http:/.. [Flutter] 리팩토링 플러터는 관리를 안하면 한 화면에 너무 많은 위젯들이 담기게 되어 소스가 너무 길게 된다. 그래서 위젯별로 나눌수있도록 하는 방법에 대해서 알아보자 1. screen과 widget별로 나누는게 좋다. 버튼에 대한 코딩은 widget 폴더에, 화면 구성에 대한 패키지는 screen 하위에 두는 것이 좋은것같다. 나는 login 화면인, login.dart는 sreen에 이외 카카오버튼에 구성되는 widget은 별도로 뻈다. import 'package:boilerflutterapp/main.dart'; import 'package:boilerflutterapp/util/animations.dart'; import 'package:boilerflutterapp/util/const.dart'; import '.. [Flutter] SharedPreferences 사용하여 입/출력 정리 SharedPreferences에 대한걸 정리한다. 동기/비동기에 대한 처리를 제대로 하지않아, 오류가 발생했다. 목표 : SharedPreferences에 데이터를 넣고, 해당 데이터가 업데이트 될때마다, 리스트뷰에 추가해준다. 1. 저장 객체 선언 class Memo{ int? id; String content=''; String? completeYn; Memo(int id,String content,String completeYn){ this.id = id; this.content = content; this.completeYn = completeYn; } Map toJson() { return { 'id': this.id, 'content': this.content, 'completeYn': th.. [Flutter] 외부 서버 데이터 송수신 필수적으로 외부 백엔드 서버를 호출해서 데이터를 받아와야한다. 이에 필요한 작업을 해보도록 하자 일단 유틸로 하나 만들것이다. 메소드는 Post,Get,Put,Delete로? 무튼 1. pub get || pubspec에 http추가 flutter pub add http http: ^0.13.5 2. 유틸성 코드 추가 백엔드 서버에 이러한 내용이 있다고 가정하자. @PostMapping("/sample") public String test(){ return "hi sample!"; } 플러터 소스는 아래와 같다. var url = Uri.http('localhost:8080', 'sample'); var response = await http.post(url, body: {'name': 'doodle',.. [Flutter] 위젯 별로 공통 함수로 분류하기 플러터는 소스가 너무 길어진다. 그래서 관리하기도 어렵고 소스를 이해하기도, 유지보수하기도, 그리고...가독성도 떨어진다. 그래서 유틸성으로 개발해서 관리해보자 class WidgetUtil{ Widget getListView(List persons){ return ListView.builder( shrinkWrap: true, itemCount: persons.length, itemBuilder: (BuildContext context,int index){ return Container( height: 50, child: Text(persons[index].id), ); }); } } Container( child: new WidgetUtil().getListView(persons), ) ,Contai.. [Flutter] assets에 추가하고 IOS 빌드에 추가 IOS 빌드에 추가하고, 해당 이미지를 외부에서 사용해야할때가 있다. 시작해보자 1. Images 폴더 생성후 이미지 넣기 2. pubspec.yaml의 assets부분 수정 3. pub get 4.그대로 사용 5. 빌드 결과 확인 [Flutter] 화면 이동 및 Navigator 화면 이동 및 레이아웃 전환에 대해서 실습을 진행해보자 ElevatedButton을 두고, 해당 안에 onPressed메서드를 추가한다. 그리고, 해당 버튼을 눌렀을떄 Navigator push로 신규 페이지 라우트 객체를 넣어준다. HelloPage2는 다른 다트 파일에 있는 위젯이다. 어찌보면 굉장히 간단하다. 눌렀을때 단순히 클래스 파일만 넘기면 바로 처리가 되는 장점이 있다. [Flutter] 기타 등등 계속 앱의 상단에 정렬이 안된 상태로 글자가 있었는데 Center라는 위젯으로 이 텍스트를 감싼다면? 어플리케이션의 가운데에 이 글자가 정렬이 되게 된다. 또한 여러개를 넣을 수도있다. 이런식으로 컬럼이라는 속성도 존재한다. 프론트 개발을 할떄는 이렇게 외워야 할게 많은게 조금 킹받는다... 내가 덜익숙한거일수도... 다트는 형변환이 편하다. 그냥 달라를 붙이면 된다. counter를 참고하자. 무튼 이렇게 counter를 증가시킬수있고 mainAxisAlignment를 통해서 위젯안에 텍스트를 정렬할 수도 있다. 꿀 같은 사이트가 있다. https://flutterstudio.app AppBuilder 2 20180529-19:35 flutterstudio.app 미리 다 해볼수 없으니, 위젯을 사용해.. 이전 1 2 다음
