'SingleChildScrollView doesn't work on web, only in mobile

i'm trying to create a horizontaly scrollable list in Flutter with SingleChildScrollView but, only works in mobile, i tried another solutions but nothing worked for me. I'm brazilian, and some parts of the code are in portuguese.

The widget is rendered in another scroll view, i'ts work like the Netflix movies list in web...

Here is the code:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:t2_market/src/Controllers/ConfiguracaoController.dart';
import 'package:t2_market/src/Controllers/GrupoMarcaController.dart';
import 'package:t2_market/src/Model/Configuracao/Configuracao.dart';
import 'package:t2_market/src/Templates/Components/LoaderShimmers.dart';
import 'package:t2_market/src/Templates/Mobile/Categories/BrandGroupList.dart';
import 'package:t2_market/src/Templates/Mobile/Categories/CategoriesListWeb.dart';
import 'package:t2_market/src/core/AppTextStyles.dart';
import 'dart:async';

StreamController<String> streamController =
    StreamController<String>.broadcast();

class Categories extends StatefulWidget {
  Categories(this.stream);
  final Stream<String> stream;
  @override
  _CategoriesState createState() => _CategoriesState();
}

class _CategoriesState extends State<Categories> {
  Configuracao? conf;
  List<dynamic> data = [];
  List<dynamic> marcas = [];
  List<dynamic> grupos = [];
  var icon = Icons.ac_unit;
  late String? type;
  String? memo;
  bool loading = true;

  void _getData() async {
    setState(() {
      loading = true;
    });
    await ConfiguracaoController.fetchConfiguracao().then((value) {
      setState(() {
        conf = value;
      });
    });

    type = conf!.tipoMenuHome;
    grupos = await GrupoMarcaController.fetchGrupo();
    marcas = await GrupoMarcaController.fetchMarca();

    if (type == 'M') {
      setState(() {
        data = marcas;
        loading = false;
      });
    } else {
      setState(() {
        data = grupos;
        loading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    loading = true;
    _getData();
    widget.stream.listen((index) {
      memo = index;
      if (index == 'M') {
        setState(() {
          data = marcas;
        });
      } else {
        setState(() {
          data = grupos;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return data.isEmpty && !loading
        ? Center(
            child: Icon(Icons.warning),
          )
        : SingleChildScrollView(
          
            scrollDirection: Axis.horizontal,
            child: Container(
                margin: EdgeInsets.only(top: 20.0),
                height: 100.0,
                child: Row(
                  children: [
                    Align(
                        alignment: Alignment.topCenter,
                        child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            physics: BouncingScrollPhysics(),
                            itemCount: loading == true ? 20 : data.length,
                            itemBuilder: (context, index) {
                              return loading == true
                                  ? Container(
                                      height: 100,
                                      width: 100,
                                      margin:
                                          EdgeInsets.only(left: 5, right: 5),
                                      child: LoaderShimmers())
                                  : clickable(context, index, data[index]);
                            })),
                    Container(width: 10),
                  ],
                )));
  }

  Container clickable(BuildContext context, int index, dynamic data) {
    return Container(
        margin: EdgeInsets.only(left: 5, right: 5),
        width: 100.0,
        child: Material(
            child: Ink(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: AppStyles.darkBlue,
                ),
                child: InkWell(
                    onTap: () {
                      kIsWeb
                          ? Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoriesListWeb(data)))
                          : Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => BrandGroupList(data)));
                    },
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                              padding: EdgeInsets.only(left: 10, right: 10),
                              child: Text(data.nome,
                                  maxLines: 3,
                                  textAlign: TextAlign.center,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold)))
                        ])))));
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source