使用不包含 Bloc 類型的上下文調用 Flutter BlocProvider.of()

Question

我正在從第一個屏幕導航到第二個屏幕。 我在第二個屏幕中使用 Bloc Pattern。 我收到以下錯誤：

 BlocProvider.of() called with a context that does not contain a Bloc of type 
   No ancestor could be found starting from the context that was passed to BlocProvider.of<MyBloc>().

    This can happen if:
    1. The context you used comes from a widget above the BlocProvider.
    2. You used MultiBlocProvider and didn't explicity provide the BlocProvider types.

下面是我的導航代碼

 BlocProvider<MyBloc>(
            create: (context) => MyBloc());
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          
          return SecondScreen(context);
        }));

下面是我的 SecondScreen 課程

  class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
   }

class _SecondScreenState extends State<SecondScreen> {
  MyBloc myBloc;

  @override
  void initState() {
    super.initState();
    myBloc = BlocProvider.of<MyBloc>(context);
    myBloc.add(FetchEvents());
 }

  @override
  Widget build(BuildContext context) {
  return MaterialApp(
  home: Builder(
    builder: (context) {
      return Material(
        child: Scaffold(
          appBar: AppBar(
            title: Text("New Screen"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.refresh),
                onPressed: () {
                  myBloc.add(FetchEvents());
                },
              ),
              IconButton(
                icon: Icon(Icons.info),
                onPressed: () {
                },
              )
            ],
          ),
          body: Container(
            child: BlocListener<MyBloc, MyState>(
              listener: (context, state) {
                if (state is MyErrorState) {
                  Scaffold.of(context).showSnackBar(
                    SnackBar(
                      content: Text(state.message),
                    ),
                  );
                }
              },
              child: BlocBuilder<MyBloc, MyState>(
                builder: (context, state) {
                  if (state is MyInitialState) {
                    return buildLoading();
                  } else if (state is MyLoadingState) {
                    return buildLoading();
                  } else if (state is MyLoadedState) {
                    return buildArticleList(state.yList);
                  } else if (state is MyErrorState) {
                    return buildErrorUi(state.message);
                  }
                },
              ),
            ),
          ),
        ),
      );
    },
  ),
  );
   }

 Widget buildLoading() {
  return Center(
  child: CircularProgressIndicator(),
   );
 }

  Widget buildErrorUi(String message) {
 return Center(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(
      message,
      style: TextStyle(color: Colors.red),
    ),
  ),
  );
 }

  Widget buildArticleList(List<Data> data) {
  return ListView.builder(
  itemCount: data.length,
  itemBuilder: (ctx, pos) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        child: ListTile(
         
          title: Text(data[pos].title),
          subtitle: Text(data[pos].shortDesc),
        ),
        onTap: () {
          // navigateToArticleDetailPage(context, articles[pos]);
        },
      ),
    );
  },
  );
  }
 }

我剛剛開始學習集團並卡在這里..有人可以幫忙嗎？

我沒有在 main.dart 中添加任何與 bloc 相關的內容。 有必要嗎？

Answer 1

問題出在這部分：

 BlocProvider<MyBloc>(
            create: (context) => MyBloc());
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          
          return SecondScreen(context);
        }));

將其更改為此可能會修復它：

 BlocProvider<MyBloc>(
            create: (context) => MyBloc());
        Navigator.push(context, MaterialPageRoute(
          builder: (routeContext) => SecondScreen(),
        }));

Answer 2

將 Used widget包裝在BlocProvider ，這將提供要使用的正確上下文。

BlocProvider(
      create: (BuildContext context) {
          return _yourBloc;
      },
      child: Widget(

Answer 3

要在您正在導航的頁面中使用相同的塊，請使用 BlocProvider.value()。

改變

    Navigator.push(context, MaterialPageRoute(builder: (context) {  
        return SecondScreen(context);
    }));

到

Navigator.push(context, MaterialPageRoute(builder: (context) {
  return BlocProvider<MyBloc>.value(
    value: BlocProvider.of<MyBloc>(context),
    child: SecondScreen(context),
  );
}));

確保有一個 MyBloc 類型的父 BlocProvider。 簡單示例：

BlocProvider<MyBloc>(
  create: (context) => MyBloc(),
  child: Builder(
    builder: (context) => YourWidget(),//Wrap with Builder to access BlocProvider's context
  ),
);

我還強烈建議您查看此視頻以獲得更好的解釋。

此外，這個問題可能會有所幫助。