'개발/Flutter' 카테고리의 글 목록

2023.11.01· 개발/Flutter

flutter로 빌드한 프로젝트는 react로 변경하는 작업을 진행 중이다. 프로젝트를 flutter로 빌드하는 작업을 내가 하지 않았지만 어느정도 flutter코드를 읽을 수 있어서 clone해서 코드를 살펴보려는데 버젼이 맞지 않아서 제대로 run이 되지 않는것이다! 플러터 버젼 업그레이드하기 🚀 굉장히 간단하다! 터미널에 아래와 같이 적어주면 된다. flutter upgrade 그전에 우선 version을 체크해보자 flutter --version 이렇게 하면 version과 dart version도 함께 확인하실 수 있다. upgrade 후에는 작업중인 프로젝트로 가서 flutter -v pub get 을 한번 해줘야 프로젝트가 제대로 돌아간다!

플러터 초급) class 개념을 알자

2023.08.27· 개발/Flutter

dart라는 언어와 통역을 하기 위해서 변수, 메소드 등이 필요하다 method는 믹서기와 같은 기능을 하는데, 어떤 기능이 필요할 때 사용한다. 변수의 경우에는 다양한 아이템을 보관하기 위해서 사용하는 것으로 변수의 크기도 타입에 맞게 선언되어야한다. string, boolen 과 같이 말이다. 예를 들자면 String이라고 타입을 정하고 변수를 선언해주면 컴퓨터가 그에 맞는 공간을 준비하고 만들어준다. 이제는 클래스다 클래스는 하나의 인형이 있다고 하면, 그 인형을 이루기 위해서 다양한 부분이 존재한다. 팔, 머리 , 몸통과 같이 말이다. 저렇게 부분적으로 파트별로 나눈 부분을 클래스라고 이해하면 좋을 것 같다. 크고 복잡한 것을 만들때 나눠서 만들어 조립! 객체(object) 는 눈에 실체가 보이든..

[플러터] Container에 배경 이미지 넣는 방법 2가지

2023.05.25· 개발/Flutter

container를 색으로 채우는 것이 아니라 이미지로 넣어야 할 경우도 있다. 이때, 간단하게~ 두 가지 정도의 방법이 있다! 1. src 이미지 주소를 쓸 때 Container( width: 155.0.w, decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( src ), fit: BoxFit.cover ), ), ) 2. image assets 을 쓸 때 Container( width: 155.0.w, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('/assets/image.png'), fit: BoxFit.cover ), ), ) 이미지 주소를 어..

[플러터] Stateless vs Stateful 개념

2023.05.07· 개발/Flutter

약 1여년 가까이 플러터로 앱을 제작하고 있는데 여전히 소소한 개념들을 제대로 알지 못 한다는 생각이 들었다. GetX로 상태 관리를 하면서 stateless 위젯만 사용하고 있는데 사실 stateful이라고 getx를 못 쓰는 것은 아니다. 그런데 개념이 확실하지 않다보니 그저 안 쓰게 되는 상황이 발생. 그리고 화면안에서 클릭 이벤트만으로 위젯이 변경되야하는 레이아웃을 구성하게 되면서 그냥 stateless로 써야하는걸까 getx로 관리해야하는 걸까라는 의문이 들었고, 어떤 방법이 더 좋은 방법인지 알수가 없어서 개념 정리를 다시 한번 해보려고 작성해본다. ✅ Stateless Widget 화면이 로드될 때 한 번만 그려지는 state가 없는 위젯으로 변경이 필요한 Data가 없는 것을 의미 이벤트 ..

[플러터/flutter] RxList 는 substring을 쓸 수 없는 것인가!? 😤

2023.05.05· 개발/Flutter

♨️ 문제상황 만들고 있는 프로젝트 페이지 중에 글을 검색하는 페이지가 있는데, 최근 검색어를 등록, 삭제기능을 수정해야 하는 상황. Hive에 저장해두고 해당 아이템을 꺼내와서 obx로 상태관리를 하면서 삭제, 등록을 해야 하는데, 단어를 하나씩 추가할 때마다 배열의 뒤에 붙는 게 아니라 앞에 붙게 하거나, 뒤로 붙일 거면 reverse를 시켜서 배열이 드러나게 해줘야 하는 상황. 여기까지는 괜찮은데, 문제는 해당 인덱스를 사용해서 삭제를 해야 하는 상황이다. 배열 앞쪽으로 추가하는 방식으로 했더니 인덱스는 변하지 않는 것인지 해당 단어를 누르면 다른 단어가 사라졌다. 게다가 10개 이상은 출력시키지 말라는 조건까지 붙었다. 해결 방안 ✅ 최근검색어 업데이트 될 때 배열 앞쪽으로 보내기 ➡️ inser..

[플러터/flutter] 이미지로 움직이는 로딩 인디케이터 만들기 / flutter AnimatedSwitcher 사용하기

2023.01.29· 개발/Flutter

움직이는 .gif 이미지말고 정적인 .jpg 이미지로 움직이는 로딩 인디케이터를 만들어야했습니다! 한참을 이것저것 찾아봤었는데요. 플러터의 AnimatedSwitcher 를 이용하면 쉽게 만드실 수 있어요. 더 좋은 방법이 있다면 알려주세요 ㅠ 저도 알고 싶습니다. 👉🏻 공식 flutter - AnimatedSwitcher 페이지 가기 https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html AnimatedSwitcher class - widgets library - Dart API A widget that by default does a cross-fade between a new widget and the widget previously..

[플러터] FutureBuilder 사용하기 - 로딩 indicator 넣기

2022.11.25· 개발/Flutter

⚡️ api로 데이터를 받아올 때, 비동기처리시에 요긴하게 쓰일 futurebuilder! 화면 이동시에 데이터가 다 넘어오기 전에 부분적으로 로딩되는 것을 방지하기 위해서 인디케이터등을 띄울 때가 있는데 이걸 하기 위해서 FutureBuilder 라는 것이 필요하다 FutureBuilder 공식문서 FutureBuilder class - widgets library - Dart API Widget that builds itself based on the latest snapshot of interaction with a Future. The future must have been obtained earlier, e.g. during State.initState, State.didUpdateWidget,..

[플러터] 안드로이드 스튜디오 ios 디바이스 인식 못 할 때

2022.11.23· 개발/Flutter

xcode를 업데이트 해야하는 순간이 오니 안드로이드 스튜디오해서 시뮬레이터를 돌릴려고 하니 ios 디바이스가 인식되지 않는 문제가 생겼다. xcode문제구나 싶어서 업데이트를 했더니 달라지는게 없다 찾아봤더니 이젠 pods를 다시 install하란다 ....... 웹쪽을 하는 사람으로써 앱하는 분들 진짜 어케합니까?.... =3 한숨만 나옴... 우여곡절 끝에 해결책을 찾아서 디바이스를 다시 연동시킬 수가 있었다. 해결책의 흐름을 기록해보려고 한다. 1. xcode 업데이트 2. flutter 프로젝트 폴더에 ios 폴더로 가서 pods 관련 폴더 지우고 pods 다시 install 1,2 를 다 해도 변화가 없음 3. 터미널 켜서 flutter doctor를 쳐봄. 거기서 나오는 오류들을 해결 ios..

[플러터] TextEditingController 로 input 관리하기

2022.11.08· 개발/Flutter

✔️ input에 데이터를 넣어서 관리하는 방법을 찾다가 TextEditingController 라는 걸 알게 되었답니다 공식문서 https://docs.flutter.dev/cookbook/forms/retrieve-input Retrieve the value of a text field How to retrieve text from a text field. docs.flutter.dev 이게 웹 프론트 하는 분들을 이해하실 것 같은데, 한 페이지 안에 input이 너무 많아서 처음에는 일일히 변수를 다 만들어서 setState를 마치 React의 useState 인양 이용해서 사용했지만, 그렇게 하면 코드가 굉장히 지저분해지고 관리가 되지 않아요 ㅠㅠ 그래서 요 아이가 필요하답니다. 1. TextEd..

[플러터] 라우팅시에 GetX controller 없애기

2022.10.10· 개발/Flutter

현재 만들고 있는 프로젝트에서 page4에 있는 버튼을 토글하는 부분이 있는데, 이 부분을 controller에서 관리를 해주고 statelessWidget에서 쓰기 때문에 dispose를 사용해서 죽일수가 없는 상황이였다. 해결책 1. 버튼을 초기화하는 함수를 만들어서 라우팅할 때마다 그 함수도 같이 실행시켜주기 개인적으로 생각해봐도 안 좋은 코드이고(ㅋㅋㅋㅋㅋ) 회사 플러터 개발자에게도 물어보니 추천하고 싶지 않은 방법이라고 했다. 해당 함수는 controller 파일에 만들어서 클릭 동작이 일어날 때마다 넣어주는 방식이다. 2. onClose() 를 사용해서 페이지를 떠나면 자동으로 메모리 삭제시키기 이 방법이 제일 합리적인 방법인것 같다. 이렇게 함수를 넣어서 사용해줘도 되고 안그래도 된다. 문제..

[플러터] Listview 에 생기는 공백

2022.08.15· 개발/Flutter

[문제발생] 아아아아아아아니 왜 도대체 flutter에 listview 를 쓰면 이상한 공백이 생기는 것인가! 리스트를 화면 위로 올리면 제일 처음에 올라오는 리스트 위로 마치 margin을 준 것처럼 여백이 생겨나 있다. [해결책] padding: const EdgeInsets.symmetric( horizontal: 20, vertical: 12), listview를 써서 데이터를 map으로 돌려서 화면에 올려 줄 때 요 코드를 넣어주면 해결된다. horizontal, vertical 수치를 변화해서 넣어주면 되는데, 이것도 잘 써야한다. 뭔가 ... 무조건 0으로 넣어도 이상하다. 뭔가 이게 완전한 해결책이 아닌 것 같아 답답~~하다. ✔ 참고자료 https://velog.io/@tygerhwang..

[flutter/플러터] 버튼으로 Checkbox 토글하기

2022.07.10· 개발/Flutter

Demo 편집하기 버튼을 누르면 리스트 앞에 체크박스가 나타나면서 따로 선택할 수 있게 레이아웃을 구현해야한다. 레이아웃 구성 '편집하기' 와 '삭제하기' 버튼을 boolean 값으로 구분해서 만들기 Listview로 checkbox와 text를 한 줄로 넣어서 만들어준다 boolean값으로 checkbox가 나올때와 안 나올 때를 구분한다 반복되서 들어갈 checkboxmodal widget을 만들어줍니다 Listview 안에 들어갈 checkboxmodal을 만들어줍니다. title과 time은 필수라서 required를 붙여줍니다. class CheckBoxModal { String title; bool value; String time; String purpose; CheckBoxModal( {r..

티스토리툴바