Flutter BLoC 꿀팁 - 1탄 : BlocProvider 백배 사용하기

BLoC 패턴을 사용하시는 분이라면 BlocProvider 를 사용하실겁니다. 오늘은 BlocProvider 를 좀 더 잘사용할 수 있는 방법에 대해서 알려드리겠습니다. 이번 글은 저의 개발 경험을 기반으로 작성됐습니다.

 

이 글에서 알아볼 내용

• 다른 스크린에서 동일한 BlocProvider 를 사용하는 방법
• BlocProvider 의 auto dispose 문제 해결 방법

 

다른 스크린에서 동일한 BlocProvider를 사용하는 방법

BlocProvider 의 스코프는 감싸고 있는 Widget 까지가 범위입니다. 만약 Navigator 를 통해 다른 스크린으로 전환한다면 전환한 화면은 BlocProvider 의 스코프 밖입니다. 이를 해결하는 멍청한 방법은 다음과 같았습니다. 

 

runApp(
	BlocProvider(
    	create : () => TestBloc(),
        child : MyApp()
    ),
);

 

하지만 이 방법의 문제점은 다음과 같습니다.

 

1. BlocProvider 의 스코프가 앱 전체가 되어버림
   
   
2. BlocProvider 의 스코프가 앱 전체이기 때문에 어쩔 수 없이 싱글톤과 같은 형태를 띄게 됨. 따라서 Item 별로 각각 다른 BlocProvider 를 선언하지 못함.

 

그렇다면 이런 문제들을 어떻게 해결해야 할까요? 바로 Navigator 를 이용한 push 를 할때 BuildContext 를 arguments 로 같이 넘겨주는 것 입니다. 다음의 코드를 주목하세요.

 

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Home_Screen"),
      ),
    );
  }
}

class HomeScreenArguments { // 중요
  BuildContext context;

  HomeScreenArguments({required this.context});
}

class TestScreen extends StatelessWidget {
  const TestScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.of(context).pushNamed(
              "home_screen",
              arguments: HomeScreenArguments(context: context), // 중요
            );
          },
          child: Text("click me"),
        ),
      ),
    );
  }
}

class MyRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case "home_screen":
        {
          final args = settings.arguments as HomeScreenArguments;

          return MaterialPageRoute(
            builder: (context) => BlocProvider( // 중요
              create: (context) => BlocProvider.of<HomeBloc>(args.context),
              child: HomeScreen(),
            ),
          );
        }
    }
  }
}

 

여러분의 코드의 형태는 저와 다를 수 있습니다. 하지만 제가 Navigator 에 argument 항목을 통해 BuildContext 를 받아오고 MaterialPageRoute 에서 BlocProvider.of(args.context) 를 통해 BlocProvider 스코프를 확장한 부분에 집중하십시오. 이런 방법을 사용하면 BlocProvider 의 스코프를 유연하게 확장시킬 수 있습니다.

 

BlocProvider 의 자동 dispose 문제 해결 방법

BlocProvider 는 해당 스크린의 dispose 에 맞추어 자동으로 Bloc 의 Stream 을 자동으로 dispose 합니다. 굉장히 편리한 기능이지만 여러개의 화면에서 Bloc 을 사용할때는 에러를 발생하는 요인이 됩니다. 잠시 다른 화면으로 넘어가서 작업을 하고 다시 돌아와서 Bloc 에서 emit() 을 하면 다음과 같은 에러가 발생합니다. 

 

unhandled exception: bad state: cannot emit new states after calling close

 

이는 Bloc 의 Stream 이 dispose 되었기 때문에 생기는 오류입니다. 이미 dispose 됐기 때문에 더 이상 emit() 할 수 없다는 것이죠. 이것을 해결하는 방법은 간단합니다. BlocProvider 의 autoDispose 기능을 꺼주면 되는데요. 꺼주는 방법은 다음과 같습니다. 

 

BlocProvider.value(
	value: BlocProvider.of<TestCubit>(context),
  	child: TestScreen(),
)

 

BlocProvider.vlaue() 를 사용하면 되는데요. BlocProvider.value() 를 사용하면 autoDispose 기능이 꺼집니다. 이런 방법을 사용하면 여러 화면에서 동일한 Bloc 을 사용하며 작업할 수 있습니다. 

 

마치면서

이렇게 초보자는 잘모르는 BlocProvider 꿀팁을 알아봤습니다. 다음번에도 BLoC 을 잘 사용할 수 있는 꿀팁으로 돌아오겠습니다. 긴글 읽어주셔서 감사합니다.