render slivergrid using bloc in flutter

Question

Here is the case :- i have a Bloc named XYZBloc which loads data from network. i need to render these lists into sliverGrid. the same list goes pretty well with sliverList.

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),
);
}

code to load sliverGrid data :-

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(),
          ],
        )),
      ],
    ),
  ),
);
}

i have tried all possible way to debug but my noob sense couldn't help me to understand how this sliverGrid works with network data. any suggestion, reference will be highly appreciated.

Answer 1

Here is my code snippet where I used SliverGrid with bloc builders.

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,
                      ),
                    );
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }