Bull

ChangeNotifierProvider주로 객체의 상태가 변하고, 이 상태 변화에 따라 UI를 업데이트해야 할 때 사용한다. ChangeNotifier를 상속받은 클래스에서 상태를 관리한다. 이 클래스는 상태가 변경될 때 notifyListeners() 메서드를 호출하여, 이 상태를 구독하고 있는 모든 위젯들이 리빌드되도록 알린다.쇼핑 카트에 항목을 추가하거나 삭제할 때, 이런 상태 변화는 UI에 반영되어야 하므로 ChangeNotifierProvider를 사용한다.class CartModel extends ChangeNotifier { List _items = []; List get items => _items; void addItem(Item item) { _items.add(item);..

https://pub.dev/packages/pdf pdf | Dart packageA pdf producer for Dart. It can create pdf files for both web or flutter.pub.devpdf package플러터에서 pdf 를 추출하고싶을 때 사용한다. pdf 자체를 만드는 건 아래 사진과 같이 여러 플랫폼에서 지원 가능하다.pdf를 추출하거나 보려면 priniting 패키지를 같이 사용한다. 혹은 pdf view/extract 가 가능한 패키지로 볼 수 있다. pdf 패키지 만으로도 추출할 수 있지만 간단함을 위해 나는 printing 패키지를 함께 쓰겠다. pdf 패키지로 추출하는 방법은 패키지에 나와있지만 보여주자면 아래를 참고하면 된다.final file ..

https://webostv.developer.lge.com/news/2024-07-15-new-and-successful-experiment-of-webos-with-flutter New and Successful Experiment of webOS with Flutter for Better Performance and Playful Experience | webOS TV DeveloperCheck the library, API, and other reference information provided by the webOS TV platform.webostv.developer.lge.com webOS의 배경webOS는 원래 Palm, Inc.에서 개발된 운영체제로, 2009년에 처음 발표되어 주로 스..

채팅 관련 서비스를 개발하던 중, GPT api를 불러오는데 생각해보니 GPT는 마크다운으로 답변할 때가 많다. 그래서 응답을 받은 텍스트를 마크다운 그대로 적용시키기 위해 플러터에서 필요했다.코드블록과 인라인 코드 블록도 이렇게 적용시킬 수 있다.플러터에서 마크다운을 적용 시키는 패키지는 다음과 같이 flutter_markdown 패키지를 사용한다.https://pub.dev/packages/flutter_markdown flutter_markdown | Flutter packageA Markdown renderer for Flutter. Create rich text output, including text styles, tables, links, and more, from plain text dat..

심도있게 하고 차근차근 조금씩 코드를 해석하기 위해 분량이 적다.SharedPreferences 패키지로 api key 저장하기SharedPreferences 패키지는 비동기적으로 모바일 기기와 통신하여 데이터를 파일로 저장해준다. 만약 서비스를 회원 등록없이 간단한 데이터만을 사용하여 기록 저장을 하고 싶다면 SharedPreferences를 사용할 수 있다. 난 우선 api key를 통해 내 백엔드 서버를 배포하고 api 통신을 하도록 생각을 하고 있다. 그래서 회원등록이 아닌 개인 api key를 사용하여 서버에 접근할 수 있도록 모바일 기기에 데이터를 저장할 것이다. 그래서 SharedPreferences를 사용하기로 결정했다. 순서는 간단하다.1.  라우팅 설정으로 api key 입력 페이지로 ..

* 정확하지 않고 이해한 바탕으로 쉽게 설명하기 위해 대략적으로 적었으니 틀린 내용이 있을 수 있습니다.Bloc 간단 브리핑Bloc Pattern은 Flutter에서 상태관리 패키지 중 하나로, [bloc, event, state] 클래스를 나누어 세부적으로 각각 역할이 주어진다. event는 말 그대로 이벤트를 처리하는 기능을 구현하는 클래스이다. state는 상태를 나타내는 클래스라고 할 수 있다. 그러면 bloc은? bloc은 이 event와 state를 전체적으로 관리해주는 역할을 한다.// eventabstract class BlocEvent {}class BlocEvent1 extends BlocEvent {}class BlocEvent2 extends BlocEvent {}// ...//st..

아이디어는 다음과 같다. GPT api를 연결해서 단어의 질문을 받는다. 단어에 대한 뜻이나 예문을 저장하고 폴더는 태그형식으로 담아 놓는다. (태그도 GPT가 생성한다) 태그는 직접 수정할 수 있기 때문에 즐겨찾기 기능을 따로 넣지 않고 즐겨찾기처럼 찾을 수 있는 태그를 단어에 달아 놓는다. 스트릭을 통해서 공부를 얼마나 했는 지 볼 수 있다. 캘린더에 백준 스트릭처럼 출석 도장을 찍는다. 백준 그대로 처럼 그래프 뷰도 만들 예정이다.처음에는 GPT api 만 활용하려고 생각했는데 기회만 된다면 다른 LLM model을 택하여 돌려쓸 수 있도록 하는 방법도 생각 중에 있다. 근데 사실 더 고민인 건 개인 api를 사용해야 할 지, 인 앱 결제 방식으로 내 api를 사용하는 방식으로 할 지 고민도 있다...

이 깔끔하고 아름다운 토글형태의 선택버튼이 있는 이미지를 생각했지만 아는 건 쥐뿔만큼 없는 난 토글 스위치라는 단어 밖에 생각나지 않았다. 요즘 GPT도 멍청해져서 그냥 혼자 찾아보고 있다가 카톡 오픈채팅으로 질문을 물어보았다. 구현하라고 하면 구현할 수는 있겠지만 내장되어 있는 위젯을 사용하는 게 더 깔끔하기 때문에 찾아보았다.좋은 답변들이 왔지만 결국 자문자답하였다 ㅋㅋ 도움을 주신 분들 감사합니다.글을 쓴 이유?그림과 같은 토글버튼의 존재를 몰랐기 때문에 기억하려고 적은 이유가 커서 이미 목적은 달성했다. 제목을 저렇게 지은 이유도 이 때문이다. ToggleButtons에 대한 설명은 문서를 보면되니까. 기본을 알려주는 교과서적인 정리는 시간이 될 때..? 근데 하나 적고 싶은 게 있다!Toggle..

https://stackoverflow.com/questions/59554348/how-can-i-change-drawer-icon-in-flutter How can I change Drawer icon in flutter?The drawer has this default three horizontal bars as default icon but I want to change it to something else. I have checked the possible options under the Drawer(), but no property seems to be atta...stackoverflow.com검색어"Drawer icon flutter"변경 방법Widget build(BuildContext c..

https://stackoverflow.com/questions/50400529/how-to-change-textfields-height-and-width How to change TextField's height and width?How to customise TextField's width and height?stackoverflow.com 검색어"textField height flutter"처음 검색이 아니였던 것;두 번째 검색하는 거였다니.....그래서 적용 방법은?SizedBox( height: 100.0, child: TextField(),)부모 위젯에 SizeeBox 해주면 된다!

사진처럼 TextField에 테두리 color도 적용하고 Border radius도 적용한 상태에서 Boder radius에 fit한 Background color도 추가하고 싶었다. 아래의 코드를 보고 어느 프로퍼티에 넣는 지 확인해보자.설명Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(30), color: const Color.fromARGB(255, 236, 255, 237), ), child: TextField( (...CODE...) ),)우선 컨테이너로 TextField로 감싸야 한다. TextField의 내부에서 border radius에 맞게 background color를 찾는..

서론원래는 테트리스를 GPT를 이용해서 빠르게 만드려다가 생각보다 시간이 걸릴 거 같아서 연습 삼아 구글의 공룡게임을 만들게 되었습니다. flame에 대해서는 거의 모르는 상태입니다.void main() { final game = FlameGame(); runApp(GameWidget(game: game));}끽해야 flame을 실행하려면 첫 시작을 위처럼 코드를 작성해야 한다는 정도로 알고 있는데요. 얄팍한 지식이지만 설명을 하면서 어떻게 동작하는 지 설명해보겠습니다. 특히 배경에 대해서 완전한 마무리를 지은 것이 아니라서 그거에 대해 양해를 구하고 설명해보겠습니다.소스코드와 에셋은 제일 아래에 제공해놨으니 참고하세요!assets먼저 게임을 만들려면 에셋이 필요합니다. 공룡 게임을 만들기 위해서 공..