본문 바로가기

Flutter

(19)
BLOC CUBIT 정말 좋은 SWITCH 문으로 사용하기.. 처음 if문 접했을때 riverpod 을 보고, switch를 적용 하고 . 문서 살펴보면서 만들어본 예제이고 앞으로 저도 이렇게 사용하려고 합니다. 디폴트를 _=> 이렇게 설정하는걸 발견, bloc는 모두 설정하다보니 , 귀차니즘이 찾은 작성법입니다. 디폴트 없나 하고,, 찾다보니 찾아 지더군요. . 아래 코드는 예제로 만든 코드로 각 상태마다 페이지를 구성 합니다. 페이시 시작할때, 로딩중일때, 완료했을때, 에러날때, ..등등 상태설정해서 응용이 가능합니다. return Scaffold( appBar: AppBar(title: const Text('LIst Cubit')), body: BlocBuilder( builder: (context, state) => switch (state) { Person..
RiverPod when 과 Bloc 비교 . Cubit도 가능 Switch, 비슷합니다. if문으로 상태값을 가져 와서 처리 하는데 . 리버팟의 when(data:(data){ return .. }. 을 보고 편리하다고 생각 했엇는데 BLOC 를 보니 . 비슷합니다. 비슷한 부분을 가져와 봅니다. 좀더 디테일 함은 BLOC 입니다. Switch이로 다양한 상태에 전부 정의가 가능 합니다.
Cubit 과 RiverPod 는 비슷한 점이 있다? 앞 글에서 RiverPod 과 Cubi , BLOC 기초 부분을 만들었습니다. 이제 코드를 비교해 보면 비슷한 부분이 보일 것입니다. 진짜 비슷합니다. 조금 뜯어보면 상당히 유사합니다. 컨버전을 하는 것도 찾아 볼 수 있습니다. Riverpod class CounterNotifier extends StateNotifier { CounterNotifier() : super(0); void add() { state = state + 1; } void subtract() { state = state - 1; } } 위 리버팟 아래 큐빗 비교 해보면 비슷하다. Cubit class CounterCubit extends Cubit { CounterCubit() : super(0); void increase() {..
BLOC basic Add Sub 큐빗과 함께 BLOC 도 add sub 를 만들어봅니다. Cubit 과 함께 비교되게 한페이지에 같이 작성이 됩니다. counter_bloc.dart import 'package:bloc/bloc.dart'; import 'package:meta/meta.dart'; part 'counter_event.dart'; class CounterBloc extends Bloc { CounterBloc() : super(0) { on((event, emit) { emit(state + 1); }); on((event, emit) { emit(state - 1); }); } } BLOC는 cubit 과달리 event 처리를 해야한다. counter_state.dart part of 'counter_bloc.dart'; @imm..
Cubit basic add sub 프로바이더인가 프로바이더 처럼 시작해보는 cubit 상태관리 counter_cubit.dart class CounterCubit extends Cubit { // 입력값은 int CounterCubit() : super(0); // 초기 값은 0 initial 설정가능 void increase() { emit(state + 1); } void decrease() { emit(state - 1); } } counter_home.dart 를 프로바이더 처럼 꾸미면 아래 코드와 같다. + 주의점 : 좀더 좋은 코드는 사용되는 text 부분에서만 bloc를 사용 하는 것이 많은 화면을 갱신 하지 않고 부분만 갱신하기에 좋다. class CountScreen extends StatelessWidget { CountScreen(..
RiverPod basic 1 add & sub 더하기 빼기 설치는 아래 처럼 flutter_riverpod 를 한다. 이유는 ConsumerWidget 해보면 위에것은 현재 참조가 없다. 앞으로 생길 수도 있으나 . 그래서 , 현재는 아래의 리버팟을 설치한다. https://pub.dev/packages/flutter_riverpod riverpod 는 사용할 클래스를 감싸줘야 한다. // riverpod 는 사용할 클래스를 감까줘야 한다. runApp(const ProviderScope(child: MyApp())); // 테스트용 카운터 상태 증가 감소를 설정, super의 디폴드 값은 0이다. class Counter extends StateNotifier { Counter() : super(0); void increase() => state++; void..
flutter State Management 상태관리 어떤걸 쓰지? getx provoder bloc.... 간단하게 플러터의 상태 관리에는 제일 많이 쓰이는게 순서대로 1 GetX 2 Provider 3 Bloc 4 RiverPod .......... 외에도 훅스, 리덕스 등등 많이 있다. 2 와 4는 레미라는 사람이 제안해서 만들어졌다. 이 글을 적는 저도 1 2 를 제일 많이 쓰고 3은 공부해 봤지만 개발해본적이 없음 , 개인적으로 4로 바꿔 보려합니다만, 3은 어쩔수 없이 같이 가야 할 것 같습니다. 이유는, 1 GETX은 build context 를 무시합니다. 문서 도큐먼트도 없고, 자칫 구글에서 지원을 안해준다면 getx를 사용해서 만든 어플이 무용지물이되거나 , 업데이트가 안되서 개발에 사용 못할 수도있다, 그렇지만, 사용자가 제일 많은 1위 상태관리 패키지 입니다. 앞으로 어찌 될지 모르지만 ,..
Bloc 에서 if 는 되는데 Switch는 안되는 이유와 해결법 계산기 Bloc 예제로 +-/* 를 처리 한다. 처음 switch 로 해결 하려 했지만, 안된다 . 이유는 Dart 언어의 타입 시스템 때문에 이런 현상이 발생 Dart는 if 문에서 타입 추론을 수행하여 event가 특정 하위 타입(AddEvent, SubtractEvent 등)인지 확인. 각 분기에서 num1과 num2에 접근할 수 있음 But, switch 문에서는 Dart가 이러한 타입 추론을 수행하지 않음. event.runtimeType을 확인하더라도 Dart는 event를 CalculatorEvent 타입으로 간주 따라서 num1과 num2에 접근하려고 하면 오류가 발생 이 문제를 해결하려면 각 case 분기에서 수동으로 타입 캐스팅을 수행해야 함 CalculatorBloc() : super..
Ai Chat , 패키지 없이 List로만 GPT or Bard , Gemini . 만들기// Flutter 2024. List 로만 만들어 보는 GPt 및 bard용 챗 ListView 입니다. 패키지 없이 리스트로 구성하면 여러 응용이 가능 합니다. 통신을 위해 json 변환기와 http 는 import 해줍니다. import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; Chatting 에 쓸 List를 위해 Model Class를 만듭니다. text 는 채팅 메시지 이고 , bool은 Ai 와 나를 구분해 추력하기 위해 사용합니다. class ChatMessage { final String text; final bool iAm; ChatMessage({required this.text, r..
Flutter Google Bard Gemini chat채팅 봇 만들기. https://pub.dev/packages/dash_chat_2 dash_chat_2 | Flutter Package The most complete Chat UI for flutter. Easy to use, highly customizable and fully featured pub.dev APi key 를 발급 받는다. https://ai.google.dev/ 회신으로 들어오는 답변은 다음 과 같다. 카테고리 범주등이 눈에 보인다. text 만 쓰기로 한다. 회신 받기까지의 코드는 아래에 ~ ​ ​ // respose.body 에서 text만 추출하기 ['candidates'][0]['content']['parts'][0]['text'] {candidates: [{content: {parts: [..