본문 바로가기

Flutter

 (26)
BLOC CUBIT 정말 좋은 SWITCH 문으로 사용하기.. 처음 if문 접했을때 riverpod 을 보고, switch를 적용 하고 . 문서 살펴보면서 만들어본 예제이고 앞으로 저도 이렇게 사용하려고 합니다. 디폴트를 _=> 이렇게 설정하는걸 발견, bloc는 모두 설정하다보니 , 귀차니즘이 찾은 작성법입니다. 디폴트 없나 하고,, 찾다보니 찾아 지더군요. . 아래 코드는 예제로 만든 코드로 각 상태마다 페이지를 구성 합니다. 페이시 시작할때, 로딩중일때, 완료했을때, 에러날때, ..등등 상태설정해서 응용이 가능합니다. return Scaffold( appBar: AppBar(title: const Text('LIst Cubit')), body: BlocBuilder( builder: (context, state) => switch (state) { Person..
Cubit basic Todo List , Flutter Cubit 으로된 간단한 Todo List 입니다. add, sub 만 구현해봅니다. 제일 먼저 할일은 flutter_bloc 패키지를 설치하고 main 에서 블록 프로바이더로 wrap 한다. 여러개 쓰는 경우는 Muliti로 @override Widget build(BuildContext context) { return BlocProvider( create: (context) => TodoCubit(), child: MaterialApp( title: 'Flutter Demo', // 또는 여러개일 경우 MultiBlocProvider( providers: [ BlocProvider(create: (_) => TodoCubit()), ] todo_cubit.dart 값을 입력 받아서 상태에 등록된 값을..
FloatingActionButton 여러개 사용시 에러및 오류 해결 하는 법. 플로팅 버튼이 쉽고 잘만들어진 버튼이지만, 써보면 에러가 나는 경우가 자주 있습니다. 이유는 이쁘다고 버튼을 여러개 쓰는 경우가 있고, 실행은 되는데 에러메시지가 나온다. 찾아보면 답이 있습니다. ======== Exception caught by scheduler library ===================================================== The following assertion was thrown during a scheduler callback: There are multiple heroes that share the same tag within a subtree. Within each subtree for which heroes are to be animated..
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(..
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 키보드 입력 Overflow 해결 키보드 문제로 아래처럼 오버플로우 문제가 나타나는 일이 종종 생긴다. 하지만, 핸드폰 기종마다 해상도도 다르고 해서 , 무조껀 해두는 편이 낫다. resizeToAvoidBottomInset: false, 를 Scaffold 에 한줄 추가 단점: 입력창 위치에 따라 가려 질 수 있다. @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false,// 오버플로우 appBar: AppBar(title: Text('bloc searchlist')), body: Container( child: Column( children: [ TextField( controller: searchTextControll..
가장 간단한 상태관리 ValueNotifier Provider 도 아니고 . valueNotifier 로 간단한 상태관리가 가능하다. ValueListenableBuilder 로하는 상태관리 State Manage 간단한 작업에 프로바이더 없이 상태관리가 가능 하다. import 'package:flutter/material.dart'; class ValueHome extends StatefulWidget { const ValueHome({super.key}); @override State createState() => _ValueHomeState(); } class _ValueHomeState extends State { int _counter = 0; ValueNotifier _counterChanged = ValueNotifier(0); @ov..

티스토리툴바