flutter GridView\ListView + ScrollView. Create scrollable content with GridView\ListView or scroll inside

mobile version

mobile(bool isDesktop, NewsListState state) {
    return Container(
      child: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildListDelegate([
              Row(
                children: [
                  Text(NewsLocalizations.of(context).titleNews,
                          style: Theme.of(context).textTheme.headline3)
                      .paddingOnly(
                          left: PADDING_LR_MEDIUM, right: PADDING_LR_MEDIUM),
                  Flexible(child: Icon(Icons.image)),
                ],
              ),
              
            ]),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: 3, crossAxisCount: isDesktop ? 2 : 1),
            delegate: SliverChildListDelegate(
              state.news.map((el) {
                final key = GlobalKey(debugLabel: el.title);
                bool imageNonEmpty =
                    el.images.length > 0 && el.images.first != null;
                return Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(isDesktop ? 300 : 40),
                      boxShadow: [
                        BoxShadow(
                          offset: Offset(0, isDesktop ? 40 : 14),
                          color: Color.fromARGB(70, 0, 0, 0),
                          blurRadius: isDesktop ? 50 : 10,
                          spreadRadius: -10,
                        ),
                      ]),
                  child: Card(
                    color: Theme.of(context).cardColor,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(14.0),
                    ),
                    key: key,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Flexible(
                            flex: 2,
                            child: Hero(
                                tag: "image_" + el.channelKey + el.key,
                                child: ClipRRect(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(14)),
                                  child: Container(
                                    width: 100,
                                    height: double.infinity,
                                    child: Image.network(
                                      imageNonEmpty ? el.images.first.url : "",
                                      fit: BoxFit.fitHeight,
                                      filterQuality: FilterQuality.medium,
                                    ),
                                  ),
                                ).paddingOnly(right: 6))),
                        Flexible(
                          flex: 2,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Hero(
                                tag: "name_" + el.key.trimSpaceAndLCase(),
                                child: Material(
                                  type: MaterialType.transparency,
                                  child: Text(
                                    el.title,
                                    style:
                                        Theme.of(context).textTheme.headline6,
                                    maxLines: 2,
                                  ),
                                ),
                              ),
                              Flexible(
                                child: likeWidget(el),
                              ),
                              Flexible(
                                child: cardHintWidget(el),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ).addOnTap(onTap: () {
                    _tapOnCard(isDesktop: isDesktop, key: key, newsElement: el);
                  }).paddingAll(isDesktop ? 40 : 10),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

https://dump.video/i/JGQvAd.mp4