рендеринг сетки с помощью блока во флаттере

Question

Вот случай:- у меня есть блок с именем XYZBloc, который загружает данные из сети. мне нужно отобразить эти списки в sloverGrid. тот же список хорошо сочетается с sloverList.

Store.dart

@override
Widget build(BuildContext context) {
return BlocProvider(
  create: (context) => _xyzBloc,
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,
    child: Container(
      width: MediaQuery.of(context).copyWith().size.width,
      height: MediaQuery.of(context).copyWith().size.height,
      child: BlocBuilder<XyzBloc, XyzState>(
          bloc: _xyzBloc,
          builder: (context, state) {
            if (state is XYZLoadingState) {
              return buildLoading();
            } else if (state is XYZErrorState) {
              return buildErrorUi(state.message);
            } else if (state is XYZLoadedState) {
              return _buildPageView(state.lists, context);
            } else {
              return Container();
            }
          }),
    ),
  ),
);
}

_buildPageView(List<XYZModel> lists, BuildContext context) {
return SliverGrid(
  gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              color: Colors.grey, height: 130.0, width: double.infinity),
          Text(lists[index].name)
        ],
      ),
    );
  }, childCount: lists.length),
);
}

код для загрузки данных sloverGrid:-

Home.dart

@override
Widget build(BuildContext context) {
double cardWidth = MediaQuery.of(context).size.width / 3.3;
double cardHeight = MediaQuery.of(context).size.height / 3.6;
return Container(
  color: AppTheme.nearlyWhite,
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: Column(
      children: <Widget>[
        SizedBox(
          height: MediaQuery.of(context).padding.top,
        ),
        getAppBarUI(),
        Expanded(
            child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
                delegate: SliverChildListDelegate([
              Padding(
                padding: EdgeInsets.all(15),
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: 150,
                  child: BannerItems(),
                ),
              ),
            ])),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Padding(
                    padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
                    child: Container(
                      decoration: BoxDecoration(color: Colors.transparent),
                      height: 100,
                      child: Category(),
                    ),
                  ),
                ],
              ),
            ),
            Stores(),
          ],
        )),
      ],
    ),
  ),
);
}

Я пробовал все возможные способы отладки, но мое чутье новичка не могло помочь мне понять, как эта SlyverGrid работает с сетевыми данными. любое предложение, ссылка будет высоко оценена.

Answer 1

Вот мой фрагмент кода, в котором я использовал SliverGrid со сборщиками блоков.

      Widget build(BuildContext context) {
    
    return BlocProvider(
      create: (context) => BlogViewBloc()..add(const FetchBlog(blogType: BlogType.upcoming)),
      child: Scaffold(
        backgroundColor: kAppBackground,
        appBar: PreferredSize(
          preferredSize: Size(width , 120),
          child: const CustomAppBar(),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          child: CustomScrollView(
            physics: const BouncingScrollPhysics(),
            slivers: [
              SliverList(
                delegate: SliverChildListDelegate(
                  [
                    Row(
                      children: [
                        const Spacer(),
                        _counter('Total Views',
                            'assets/images/totalViews.svg', 0, 999),
                        const Spacer(),
                        _counter(
                            'Total Blogs',
                            'assets/images/totalBlogs.svg', 0, 50),
                        const Spacer(),
                        _counter('Total Followers',
                            'assets/images/totalFollowers.svg', 0, 40),
                        const Spacer(),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(bottom: 40),
                      child: Text('Featured Blogs',
                          style: style40PrimaryDark, textAlign: TextAlign.justify),
                    ),
                  ],
                ),
              ),
              BlocBuilder<BlogViewBloc, BlogViewState>(
                builder: (context, state) {
                  if (state.blogs?.isNotEmpty ?? false) {
                    return SliverGrid(
                      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 800.0,
                        mainAxisSpacing: 60.0,
                        crossAxisSpacing: 100.0,
                      ),
                      delegate: SliverChildBuilderDelegate(
                            (BuildContext context, int index) {
                          return BlogGridView(blogModel: state.blogs![index]);
                        },
                        childCount: state.blogs?.length ?? 0,
                      ),
                    );
                  } else {
                    return const SliverToBoxAdapter(
                      child: SizedBox(
                        height: 0,
                      ),
                    );
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }