[Flutter Meetup In Songdo] 상태관리 올바르게 쓰기

상태관리 올바르게
쓰기
양수장

GDG Songdo Organizer (2020~ )
Flutter Songdo Organizer (2022 ~ )
Tech Lead @bluefrog (2020 ~ )
Android
Flutter
Back-end + DevOps
I’m an App Developer.
Bio
yangsterchief@duck.com
https://github.com/yangster-chief
https://www.linkedin.com/in/sujang-yang

GDG 인천 & 송도의 새로운 행사 소식은
카톡 오픈채팅방에서 :D
GDG 인천, 송도로 검색! 혹은 QR로 :)
카카오톡 오픈 채팅
https://open.kakao.com/o/gTplSH6

10월 21일 오후 1시
Machine Learning Meetup In Songdo
https://festa.io/events/4014

Flutter Songdo meetup
https://www.meetup.com/ko-KR/ﬂutter-songdo

Flutter Seoul meetup
https://www.meetup.com/ko-KR/ﬂutter-seoul/

Agenda
2 3
1
라이브러리를
이용한 상태관리
Flutter UI의
기본적인 이해
상태관리의
Best Practices

동적인 앱 구현
복잡한 UI 구현
코드의 가독성과 유지보수성
성능 최적화
앱의 확장성
+
+
+
Intro - 상태관리가 필요한 이유
+
+

Flutter UI의
기본적인 이해

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new
ViewC(...)
b.add(c3)

// Declarative style
return ViewB(
color: red,
child: const ViewC(),
);

var stars = Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: Colors.green[500]),
const Icon(Icons.star, color: Colors.black),
const Icon(Icons.star, color: Colors.black),
],
);
final ratings = Container(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
stars,
const Text(
'170 Reviews',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20,
),
),
],
),
);

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() =>
_MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) => Scaffold(
...
}

BuildContext?! | Decoding Flutter
BuildContext

SetState 메소드를 활용한 상태관리 단점
전역상태 관리
특정 위젯 내에서만 사용하는
상태를 다루는 곳에서
적합합니다. 뷰 전체나 앱
전체에 영향을 미치는 상태를
관리하는데 한계가 있습니다.
복잡한 상태 관리
페이지 내 여러 상태가
상호작용하는 복잡한 UI를
구성할 때, 코드 구성 또한
복잡해질 수 있습니다.
최적화 문제
setState 메소드는 관련된
위젯트리 전체를 재구성하기
때문에, 크고 복잡한
위젯트리에서는 불필요한
렌더링이 발생할 수 있습니다.

라이브러리를
이용한 상태관리

비즈니스 로직 컴포넌트(Bloc)의 약자로,
앱의 로직을 위젯 UI로부터 분리하여
관리하는 패턴
스트림을 사용하여 상태의 변화를
연속적으로 감지하고 처리하는 것이 가능
상태를 변경하는 단일 방법을 적용하여 앱
내의 상태 변경을 예측가능하게 만듦
Bloc

part 'ticker_event.dart';
part 'ticker_state.dart';
class TickerBloc extends Bloc<TickerEvent, TickerState> {
TickerBloc(Ticker ticker) : super(TickerInitial()) {
on<TickerStarted>(
(event, emit) async {...}, transformer: restartable());
on<_TickerTicked>((event, emit) =>
emit(TickerTickSuccess(event.tick)));
}
}
ticker_bloc.dart

on<TickerStarted>(
(event, emit) async {
await emit.onEach<int>(
ticker.tick(),
onData: (tick) => add(_TickerTicked(tick)),
);
emit(const TickerComplete());
},
transformer: restartable(),
);
ticker_bloc.dart

import 'dart:async';
/// Class which exposes a `tick` method to emit values periodically.
class Ticker {
/// Emits a new `int` up to 10 every second.
Stream<int> tick() {
return Stream.periodic(const Duration(seconds: 1), (x) => x).take(10);
}
}
ticker.dart

part of 'ticker_bloc.dart';
abstract class TickerEvent extends Equatable {
const TickerEvent();
@override
List<Object> get props => [];
}
...
class _TickerTicked extends TickerEvent {
const _TickerTicked(this.tick);
final int tick;
@override
List<Object> get props => [tick];
}
ticker_event.dart

part of 'ticker_bloc.dart';
abstract class TickerState extends Equatable {
const TickerState();
@override
}
class TickerInitial extends TickerState {}
ticker_state.dart

class TickerTickSuccess extends TickerState {
const TickerTickSuccess(this.count);
final int count;
@override
List<Object> get props => [count];
}
class TickerComplete extends TickerState {
const TickerComplete();
}
ticker_state.dart

class TickerApp extends MaterialApp {
TickerApp({super.key}): super(
home: BlocProvider(
create: (_) => TickerBloc(Ticker()),
child: const TickerPage(),
),
);
}
main.dart

class TickerPage extends StatelessWidget {
const TickerPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Bloc with Streams')),
body: Center( ... ),
floatingActionButton: FloatingActionButton(
onPressed: () =>
context.read<TickerBloc>().add(const TickerStarted()),
tooltip: 'Start',
child: const Icon(Icons.timer),
),
);
}
}
main.dart

child: BlocBuilder<TickerBloc, TickerState>(
builder: (context, state) {
if (state is TickerTickSuccess) {
return Text('Tick #${state.count}');
}
if (state is TickerComplete) {
return const Text(
'Complete! Press the floating button to restart.',
);
}
return const Text('Press the floating button to start.');
},
),
main.dart

Flutter와 독립적이며, Dart 언어만을 위해
설계되었습니다.
Provider와는 달리 전역 접근 가능성, 타입
안정성, 유연성 등의 특징을 갖습니다.
riverpod

part 'main.g.dart';
void main() {
runApp(
const ProviderScope(child: MyApp()),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
main.dart

@riverpod
class Counter extends _$Counter {
@override
int build() => 0;
void increment() => state++;
}
main.dart

class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: const Text('Counter example')),
body: Center(
child: Text('${ref.watch(counterProvider)}'),
),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).increment(),
child: const Icon(Icons.add),
),
);
}
}
main.dart

@riverpod
Future<List<Package>> fetchPackages(
FetchPackagesRef ref, {
required int page,
String search = '',
}) async {
final dio = Dio();
// Fetch an API. Here we're using package:dio, but we could use anything else.
final response = await dio.get<List<Object?>>(
'https://pub.dartlang.org/api/search?page=$page&q=${Uri.encodeQueryComponent(search)}',
);
// Decode the JSON response into a Dart class.
return response.data?.map(Package.fromJson).toList() ?? const [];
}

Immutable State
데이터 일관성 유지
상태가 예측 가능한
방식으로만 변경될 수
있습니다.
버그 감소
상태 변경으로 인한 부작용
(side-eﬀect)을 줄일 수
있습니다.
개발 효율성 향상
상태 변경을 추적하기 쉬워
디버깅이 용이합니다.

Clear Separation of Concerns
가독성 향상
코드를 더 이해하기 쉬워지고,
관리가 용이합니다.
유지보수성 향상
각 모듈이 독립적으로
작동하므로, 한 부분의 변경이
다른 부분에 미치는 영향을
최소화합니다.
재사용성 향상
독립적으로 작동하는 모듈은
다른 프로젝트에서도 재사용이
가능합니다.

상태 관리를 통해 UI 로직과 비즈니스
로직을 분리할 수 있습니다.
Clear Separation of
Concerns

dog_images_bloc.dart
...
@injectable
class DogImagesBloc extends Bloc<DogImagesEvent, DogImagesState> {
DogImagesBloc(GetDogImagesUseCase getDogImagesUseCase, ...) :
_getDogImagesUseCase = getDogImagesUseCase, ...
super(const DogImagesState()) {
on<GetRemoteDogImagesEvent>(_onGetRemoteDogImages);
}
...
void _onGetRemoteDogImages(GetRemoteDogImagesEvent event, Emitter<DogImagesState> emit) async {
emit(const RemoteDogImagesLoading());
await _getDogImagesUseCase.call(
params: GetDogDto(isRemote: true, limit: event.limit),
onSuccess: (data) async => emit(RemoteDogImagesLoaded(data)),
onFailure: (error) async => emit(RemoteDogImagesError(error)),
);
}
}

dog_images_event.dart
sealed class DogImagesEvent extends Equatable {
const DogImagesEvent();
@override
}
class GetRemoteDogImagesEvent extends DogImagesEvent {
final bool isForceUpdate;
final int limit;
const GetRemoteDogImagesEvent({this.isForceUpdate = true, this.limit = 10});
}
class GetLocalDogImagesEvent extends DogImagesEvent {
const GetLocalDogImagesEvent();
}
...

dog_images_state.dart
sealed class DogImagesState extends Equatable {
final List<DogImage> remoteImages;
final List<DogImage> localImages;
final AppError error;
const DogImagesState({
this.remoteImages = const [],
this.localImages = const [],
this.error = const AppError(),
});
@override
List<Object> get props => [remoteImages, localImages, error];
}
...
class RemoteDogImagesLoading extends DogImagesState {
const RemoteDogImagesLoading();
}
...

local_dog_card_page.dart
...
Widget build(BuildContext context) => BlocBuilder<DogImagesBloc, DogImagesState>(
builder: (context, state) {
if (state is LocalDogImagesLoading) {
return const LoadingDogCardFrame();
} else if (state is LocalDogImagesLoaded) {
final cards = state.localImages.map(DogImageCard.new).toList();
return LocalDogCardFrame(
items: state.localImages,
controller: controller,
onSwipe: _onSwipe,
cards: cards,
onClearAll: () {
context.read<DogImagesBloc>().add(const ClearDogImagesEvent());
},
onDelete: () {
...

dog_images_bloc.dart
...
@injectable
class DogImagesBloc extends Bloc<DogImagesEvent, DogImagesState> {
DogImagesBloc(GetDogImagesUseCase getDogImagesUseCase, ...) :
_getDogImagesUseCase = getDogImagesUseCase, ...
super(const DogImagesState()) {
on<GetRemoteDogImagesEvent>(_onGetRemoteDogImages);
}
...
void _onGetRemoteDogImages(GetRemoteDogImagesEvent event, Emitter<DogImagesState>
emit) async {
emit(const RemoteDogImagesLoading());
await _getDogImagesUseCase.call(
params: GetDogDto(isRemote: true, limit: event.limit),
onSuccess: (data) async => emit(RemoteDogImagesLoaded(data)),
onFailure: (error) async => emit(RemoteDogImagesError(error)),
);
}
}

local_dog_card_page.dart
return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
...
color: Colors.white,
boxShadow: [
...
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.breeds.isNotEmpty ?
item.breeds[0].name : 'No Name',
style: const TextStyle(color: Colors.black,
fontWeight: FontWeight.bold, fontSize: 20)),
const SizedBox(height: 5),
...

Flutter
Flutter 에
Clean Architecture 를
얹어보자 - 2/e

THANK
YOU!
v
yangsterchief@duck.com
https://github.com/yangster-chief
https://www.linkedin.com/in/sujang-yang

[Flutter Meetup In Songdo] 상태관리 올바르게 쓰기

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [Flutter Meetup In Songdo] 상태관리 올바르게 쓰기

Similar to [Flutter Meetup In Songdo] 상태관리 올바르게 쓰기 (20)

[Flutter Meetup In Songdo] 상태관리 올바르게 쓰기