티스토리

JuHyeong.dev

검색하기

블로그 홈

JuHyeong.dev

dkswnkk.tistory.com/m

어제보다 나은, 오늘보다 성장한 내일

구독자: 114

방명록 방문하기

주요 글 목록

[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를 해석하여 주석을 달은 부분이다. 한번 훑.. 공감수 3 댓글수 0 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 사용자의 경우.. 공감수 3 댓글수 0 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.. 공감수 0 댓글수 0 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 공감수 0 댓글수 0 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.. 공감수 7 댓글수 0 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.. 공감수 0 댓글수 0 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: .. 공감수 0 댓글수 0 2021. 11. 23.
[flutter] 이미지 추가 시 unable to load asset 에러 해결 방법 위의 사진을 넣기 위해 아래와 같이 정확히 경로를 불러왔지만 unable to load asset 에러가 떴다. Image.asset("assets/images/상품사진1@3x.png"), 알고 보니 파일명에 '@'와 같은 특수문자가 들어가서 에러가 난 것이었다. 파일명에서 특수문자를 빼고 다시 로드했더니 문제없이 해결되었다. 공감수 0 댓글수 0 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.. 공감수 2 댓글수 0 2021. 11. 23.
[flutter] 도로명 주소 검색하기 kpostal Pacakge 패키지 kpostal | Flutter Package Kpostal package can search for Korean postal addresses using Kakao postcode service. This package is inspired by Kopo package that is discontinued. pub.dev 코드 import 'package:flutter/material.dart'; import 'package:kpostal/kpostal.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget.. 공감수 3 댓글수 1 2021. 11. 20.
[flutter] url(네트워크) 이미지 불러오기 우리가 정적인 이미지를 불러올 때는 아래와 같이 Image.asset 를 적어준다. Image.asset('assets/images/dju.jpg') 하지만 네트워크, 즉 url로 이미지를 불러올 때는 아래와 같이 사용한다. Image.network(https://~) asset가 아니라 network임을 기억하자. 공감수 0 댓글수 0 2021. 11. 18.
[flutter] GetX 상태관리에 대해 알아보자 Flutter 에는 상태 관리를 도와주는 Provider, block, GetX 등 여러 가지가 도구가 있다. 그중에서 GetX에 대해서 알아보려고 한다. 상태 관리를 왜 해야 할까? Simple app state management A simple form of state management. flutter.dev 위의 공식 문서를 살펴보면 알겠지만, flutter는 widget안에 widget으로 구성되고 그 widget은 또 widget으로 구성되는 이른바 트리구조로 구현되어있다. 만약 최하단 위젯에서 최상단 부모 위젯으로 data를 보내면 어떨까? 또는 다른 페이지의 위젯으로 data를 보내면 어떨까? 하나의 data를 사용하기 위해서 매번 여러 페이지에서 정보를 불러온다면 앱의 규모가 커질수록 .. 공감수 2 댓글수 0 2021. 11. 9.
[flutter] alert(확인창) 띄우기 확인창 띄우기 Future _neverSatisfied() async { return showDialog( //다이얼로그 위젯 소환 context: context, barrierDismissible: false, // 다이얼로그 이외의 바탕 눌러도 안꺼지도록 설정 builder: (BuildContext context) { return AlertDialog( title: Text('제목'), content: SingleChildScrollView( child: ListBody( //List Body를 기준으로 Text 설정 children: [ Text('Alert Dialog 입니다'), Text('OK를 눌러 닫습니다'), ], ), ), actions: [ TextButton( child: Text.. 공감수 0 댓글수 0 2021. 11. 6.
[flutter] Row(행) 과 Column(열) 위젯 이란? Row Widget(행 위젯) 기본적인 사용법은 간단하다. Row를 하나 선언하고, 자식 요소를 넣으면 된다. Row( children: [ FlutterLogo(), Text('Hello, Flutter Beginner!'), Icon(Icons.sentiment_very_satisfied), ] ) 이렇게 하면 아래 이미지와 같은 레이아웃이 형성된다. mainAxisAlignment 속성을 사용하면 주 축을 기준으로 정렬을 수정하는 것이 가능하며, 교차 축 정렬은 crossAxisAlignment 속성을 사용할 수 있다. Row( mainAxisAlignment: MainAxisAlignment.center, // 주 축 기준 중앙 crossAxisAlignment: CrossAxisAlignment.. 공감수 0 댓글수 0 2021. 11. 6.
[flutter] DropdownButton 사용하기 List dropdownList = ['1', '2', '3']; String selectedDropdown = '1'; .. .. DropdownButton( value: selectedDropdown, items: dropdownList.map((String item) { return DropdownMenuItem( child: Text('$item'), value: item, ); }).toList(), onChanged: (dynamic value) { setState(() { selectedDropdown = value; }); }, ), 공감수 3 댓글수 0 2021. 11. 6.
[flutter] body안에서 tabbar 사용하기 body안에서 tabbar 사용하기 import 'package:flutter/material.dart'; class NestedTabBar extends StatefulWidget { @override _NestedTabBarState createState() => _NestedTabBarState(); } class _NestedTabBarState extends State with TickerProviderStateMixin { TabController _nestedTabController; @override void initState() { super.initState(); _nestedTabController = new TabController(length: 5, vsync: this); } @.. 공감수 0 댓글수 0 2021. 11. 1.
[flutter] 달력 띄우기(DatePicker) 달력 띄우기 example Future selectedDate = showDatePicker( context: context, initialDate: DateTime.now(), // 초깃값 firstDate: DateTime(2020), // 시작일 lastDate: DateTime.now(), // 마지막일 ); 문제점 달력이 영어로 출력된다. 해결방법 pubspec.yaml flutter_localizations: sdk: flutter main.dart MaterialApp( title: 'TEST APP', localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], su.. 공감수 0 댓글수 0 2021. 10. 19.
[flutter] 변경된 스낵바(SnackBar) 문법 기존 문법 Scaffold( key: scaffoldKey, body: Builder( builder: (BuildContext context) { return GestureDetector( onTap: () { Scaffold.of(context).showSnackBar(SnackBar( content: const Text('snack'), duration: const Duration(seconds: 1), action: SnackBarAction( label: 'ACTION', onPressed: () { }, ), )); }, child: const Text('SHOW SNACK'), ); }, ) ); 변경된 문법 Scaffold( key: scaffoldKey, body: GestureDetec.. 공감수 0 댓글수 0 2021. 10. 19.
[flutter] 변경된 버튼들(FlatButton,Outline Button,RaisedButton) 변경된 버튼 종류 버튼종류 변경 모양 FlatButton TextButton OutlineButton OutlinedButton RaisedButton ElevatedButton 1.FlatButton -> TextButton TextButton( onPressed: () { // Respond to button press }, child: Text("TEXT BUTTON"), ) TextButton.icon( onPressed: () { // Respond to button press }, icon: Icon(Icons.add, size: 18), label: Text("TEXT BUTTON"), ) 기존의 Flat Button에서 style문법이 변화했다. FlatButton( textColor: C.. 공감수 2 댓글수 0 2021. 10. 19.
[flutter] 앱 시작화면(spash image) 이미지 설정하기 Splash Flutter 앱을 실행하면 개발한 첫 번째 페이지가 생성되어 출력되기 전에 1초 정도 하얀색 화면이 출력된다. 우선 앱 실행 초기에 잠시 출력되는 스크린을 네이티브 스플래쉬(Native Splash) 스크린이라고 한다. Flutter는 멀티 플랫폼을 지원하는 크로스 플랫폼이지만 실제 안드로이드나 Ios의 입장에서 보면 각 플랫폼의 네이티브 앱이 먼저 실행된 후, Flutter 앱으로 점프하는 방식이다. 개발한 Flutter 앱이 실행되기 전에 각 플랫폼의 네이티브 스크린이 잠시 출력되게 되면서 발생하는 문제다. 해결방법 기본 네이티브 스플래쉬 스크린을 앱의 스타일에 맞게 커스터마이징 하는 것이다. 이미 이를 지원하는 플러그인이 존재한다. pub.dev 문서 animated_splash_sc.. 공감수 0 댓글수 0 2021. 10. 19.
[flutter] xml 을 json 형식으로 변환하기 xml2paker xml2parker 패키지란? xml 형식으로 받은 데이터를 json으로 변환해주는 라이브러리이다. 공식문서 install xml2json: ^5.3.1 import import 'package:xml2json/xml2json.dart'; example final getXmlData = response.body; //xml 데이터를 받아온다. print(getXmlData); //xml데이터를 잘 받아왔는지 확인. final Xml2JsonData = Xml2Json()..parse(getXmlData); //json으로 변환 final jsonData = Xml2JsonData.toParker(); //그냥 령식 옵션 print(jsonData); //json데이터로 잘 변환되었나 확인. 공감수 0 댓글수 0 2021. 10. 19.
[flutter] 실제 아이폰에서 앱 실행하기 iphone 과 Mac 을 연결한 상태를 유지. 1) Xcode 설정 터미널에서 프로젝트가 있는 다이렉트에서 아래 커맨드 입력. open ios/Runner.xcworkspace Runner -> Signing & Capabilities -> Team -> 개발자 계정 추가 2) 아이폰 연결 한 Apple ID당 1주일에 10번까지만 빌드가 가능하다. 테스트 앱 사용 가능 기간이 1주이다. 1주일이 지나면 앱이 실행할 수 없는 상태가 되지만, 이 경우에는 다시 설치하시면 된다. Apple Pay, Game Center, iCloud, 인 앱 결제, APNS(Push Notification), Wallet 등은 사용할 수 없다. 3) 빌드 flutter run -d 휴대폰 이름 --release 공감수 5 댓글수 0 2021. 10. 18.
[flutter] App 이름 설정하기 Android Open AndroidManifest.xml (위치: android/app/src/main) // Your app name here IOS Open info.plist (위치: ios/Runner) CFBundleName App Name // Your app name here 공감수 2 댓글수 0 2021. 10. 18.
[flutter] appBar Icon 간격 줄이기 Appbar의 action 즉 appBar의 우측에 세 개 이상의 아이콘을 넣으면 간격이 보기 싫게 고정되는 경우가 있다. 이를 해결하기 위해 아래와 같이 조절해준다. actions: [ IconButton( visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0), //이부분이 줄여주는 부분이다. padding: EdgeInsets.zero, icon: Icon( Icons.search, color: Colors.white, ), //iconSize: 20, onPressed: null, ), //Add more icon here ], 공감수 2 댓글수 0 2021. 10. 18.
[flutter] 뒤로가기 두번 클릭으로 앱 종료하기 뒤로 가기 버튼 두 번 클릭으로 종료하기 //BackButton class BackButton extends StatefulWidget { @override _BackButtonState createState() => _BackButtonState(); } class _BackButtonState extends State { DateTime backbuttonpressedTime; @override Widget build(BuildContext context) { return Scaffold( body: WillPopScope( onWillPop: onWillPop, child: Center( child: Text('Double Click to exit app'), ), ), ); } } Future o.. 공감수 1 댓글수 0 2021. 10. 18.
[flutter] setState 란? setState() 이란? setState() 함수 안에서의 호출은 State 에서 무언가 변경된 사항이 있음을 Flutter Framework 에 알려주는 역할이다. 이로 인해 UI 에 변경된 값이 반영될 수 있도록 build 메소드가 다시 실행된다. 예제 아래는 버튼을 누르면 count가 1씩 증가되도록 만든 코드이다. lass _ZeddPageState extends State { int count = 0; @override Widget build(BuildContext context) { return Center( child: Column(children: [ Text("$count"), CupertinoButton(child: Text("버튼 제목"), onPressed: this.increme.. 공감수 4 댓글수 0 2021. 10. 18.
[flutter] 구글플레이 앱 업데이트 하기 업그레이드 앱 배포하기 구글 플레이에 앱 배포 후 코드 수정으로 bundle 파일 혹은 apk 파일을 업데이트 시키는 경우. pubspec.yaml version: 1.0.1+2 수정할 때마다 +1씩 늘려줘야 한다. android/app/biild.gradle def flutterVersionCode = localProperties.getProperty('flutter.versionCode') if (flutterVersionCode == null) { flutterVersionCode = '2' } def flutterVersionName = localProperties.getProperty('flutter.versionName') if (flutterVersionName == null) { flutt.. 공감수 0 댓글수 0 2021. 10. 18.
[flutter] apk 추출하기 (apk 추출하기 3 of 3) 아래의 단계를 마무리 후 진행해주시기 바랍니다. [flutter] 앱 난독화 및 압축하기 (apk 추출하기 2 of 3) 아래의 단계를 수행하신 후 진행해주시기 바랍니다. [flutter] 앱 서명하기 (apk 추출하기 1 of 3) 앱 서명하기 1.keystore 만들기 keytool -genkey -v -keystore ~/파일명.jks -keyalg RSA -keysize 2048 -validi.. dkswnkk.tistory.com 앱 번들 및 추출하기 커맨드 라인에서 프로젝트 루트 파일로 이동하여 아래의 명령어를 입력한다. 번들하기 flutter build appbundle apk 추출하기 flutter build apk --split-per-abi 문제 해결(나 혼자 삽질했던 상황들) (1) .. 공감수 0 댓글수 0 2021. 10. 18.
[flutter] 앱 난독화 및 압축하기 (apk 추출하기 2 of 3) 아래의 단계를 수행하신 후 진행해주시기 바랍니다. [flutter] 앱 서명하기 (apk 추출하기 1 of 3) 앱 서명하기 1.keystore 만들기 keytool -genkey -v -keystore ~/파일명.jks -keyalg RSA -keysize 2048 -validity 10000 -alias 지정할이름 -storetype JKS ~/ 는 생성될 디렉터리 주소이다. -alisa 는 후에 설정.. dkswnkk.tistory.com 앱 난독화 및 압축하기 Proguard 구성하기 먼저 android - app - proguard-rules.pro 란 파일을 생성해 준다. 그 후 아래 코드를 proguard-rules.pro 에 추가해 준다. ## Flutter wrapper -keep cla.. 공감수 0 댓글수 0 2021. 10. 18.
[flutter] 앱 서명하기 (apk 추출하기 1 of 3) 앱 서명하기 1.keystore 만들기 keytool -genkey -v -keystore ~/파일명.jks -keyalg RSA -keysize 2048 -validity 10000 -alias 지정할이름 -storetype JKS ~/는 생성될 디렉터리 주소이다. -alisa는 후에 설정해줄 alisa의 이름이다. 각 질문에 대한 내용은 아래와 같다. Q > What is your first and last name? 당신의 첫번째와 마지막 이름은 무엇인가요? A > AhnJuHyeong Q > What is the name of your organizational unit? 당신의 부서의 이름은 무엇인가요? A > solo Q > What is the name of your organization?.. 공감수 0 댓글수 0 2021. 10. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.