Skip to main content

Bloc widgets

  • flutter_bloc: 7.0.0

BlocBuilder#

์ƒˆ๋กœ์šด state์— ๋ฐ˜์‘ํ•˜์—ฌ ์œ„์ ฏ์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋นŒ๋”์ž…๋‹ˆ๋‹ค. state ๋ณ€ํ™”์— ๋ฐ”๋€Œ๋Š” ๋ถ€๋ถ„๋งŒ ํฌํ•จํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

BlocBuilder<BlocA, BlocAState>(
bloc: blocA,
buildWhen: (previous, current) {
return true;
},
builder: (context, state) {
return ChildA();
},
);
  • bloc: BlocProvider์— ์˜ํ•ด ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ์›ํ•˜๋Š” Bloc๋ฅผ ์ œ๊ณต๋ฐ›์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ, blocํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํ†ตํ•ด ์ง์ ‘ ์ „๋‹ฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • buildWhen: state ๋ณ€ํ™”์— ๋”ฐ๋ผ builder๋ฅผ ํ˜ธ์ถœํ•˜๋ ค๋ฉด true, ํ˜ธ์ถœํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ฝœ๋ฐฑ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • builder: state ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ผ ์›ํ•˜๋Š” ์œ„์ ฏ์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ฝœ๋ฐฑ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

BlocProvider#

child ํฌํ•จ ๊ทธ subtree์— ์žˆ๋Š” ์ž์‹๋“ค์—๊ฒŒ Bloc๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„ ์ƒํ™ฉ์—์„œ create๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›ํ•˜๋Š” Bloc ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์—ฌ BlocProvider๊ฐ€ ๊ด€๋ฆฌํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

BlocProvider#

BlocProvider(
lazy: true,
create: (context) => BlocA(),
child: ChildA(),
);
  • lazy: ๊ธฐ๋ณธ์ ์œผ๋กœ BlocProvider๋Š” subtree์—์„œ context.read<BlocA>()๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ create๋กœ ๋“ฑ๋ก๋œ ์ฝœ๋ฐฑ์„ ํ˜ธ์ถœํ•˜์—ฌ Bloc๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. Bloc๋ฅผ ์ฆ‰์‹œ ์ƒ์„ฑํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ false๋กœ ์„ค์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  • create: Bloc๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ฝœ๋ฐฑ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. BlocProvider๊ฐ€ ์†Œ๋ฉธ๋  ๋•Œ, bloc.close()๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
  • child: ์œ„์ ฏ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

subtree์— ํฌํ•จ๋˜์ง€ ์•Š์€ ๊ฒฝ๋กœ๋กœ ์ƒ์„ฑ๋˜์–ด ์žˆ๋Š” Bloc๋ฅผ ์ „๋‹ฌํ•ด์•ผํ•  ๋•Œ, BlocProvider.value๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์‹ ์ด ์ƒ์„ฑํ•œ Bloc๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ด€๋ฆฌํ•˜์ง€ ์•Š๊ณ  ์ œ๊ณต๋งŒ ํ•ฉ๋‹ˆ๋‹ค.

BlocProvider.value(
value: context.read<BlocA>(),
child: ScreenA(),
);
  • value: ์ œ๊ณตํ•  Bloc๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • child: ์œ„์ ฏ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

MultiBlocProvider#

MultiBlocProvider ์‚ฌ์šฉ์‹œ BlocProvider<BlocA> ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  Bloc๋ฅผ ๋ช…์‹œํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

MultiBlocProvider(
providers: [
BlocProvider<BlocA>(
create: (BuildContext context) => BlocA(),
),
BlocProvider<BlocB>(
create: (BuildContext context) => BlocB(),
),
BlocProvider<BlocC>(
create: (BuildContext context) => BlocC(),
),
],
child: ChildA(),
);

BlocListener#

BlocListener๋Š” Bloc๊ฐ€ ์ƒ์„ฑ๋ ๋•Œ ๋ฐฉ์ถœํ•˜๋Š” ์ดˆ๊ธฐ ์ƒํƒœ์—๋Š” ๋ฐ˜์‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ผ์šฐํŒ…, ์Šค๋‚ต๋ฐ”, ๋‹ค์ด์–ผ๋กœ๊ทธ ๋“ฑ state ๋ณ€ํ™”์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

BlocListener#

BlocListener<BlocA, BlocAState>(
bloc: blocA,
listenWhen: (previous, current) {
return true;
},
listener: (context, state) {
// route, snackbar, dialog, etc...
},
child: ChildA(),
);
  • bloc: BlocProvider์— ์˜ํ•ด ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ์›ํ•˜๋Š” Bloc๋ฅผ ์ œ๊ณต๋ฐ›์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ, blocํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํ†ตํ•ด ์ง์ ‘ ์ „๋‹ฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • listenWhen: state ๋ณ€ํ™”์— ๋”ฐ๋ผ listener๋ฅผ ํ˜ธ์ถœํ•˜๋ ค๋ฉด true, ํ˜ธ์ถœํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ฝœ๋ฐฑ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • listener: state ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ผ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ฝœ๋ฐฑ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • child: ์œ„์ณ‡์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

MultiBlocListener#

MultiBlocListener(
listeners: [
BlocListener<BlocA, BlocAState>(
listener: (context, state) {},
),
BlocListener<BlocB, BlocBState>(
listener: (context, state) {},
),
BlocListener<BlocC, BlocCState>(
listener: (context, state) {},
),
],
child: ChildA(),
);

BlocConsumer#

BlocListener์™€ BlocBuilder๋ฅผ ํ•œ ๋ฒˆ์— ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ์ณ ๋†“์€ ์œ„์ ฏ์ž…๋‹ˆ๋‹ค.

RepositoryProvider#

RepositoryProvider๋Š” BlocProvider์™€ ์œ ์‚ฌํ•˜์ง€๋งŒ Bloc ๋Œ€์‹  Repository ๊ฐ์ฒด๋ฅผ subtree์— ์ œ๊ณตํ•˜๋ฉฐ ๊ด€๋ฆฌ๋Š” ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

MultiRepositoryProvider๋Š” MultiBlocProvider์™€ ์œ ์‚ฌํ•˜์ง€๋งŒ RepositoryProvider๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. MultiBlocProvider์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ RepositoryProvider์˜ ์ œ๋„ค๋ฆญ์„ ๋ช…์‹œํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

Last updated on