SingleChildScrollView doesn't work on web, only in mobile

Question

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

Orthotropic

Refer this answer hope its help to you. – Pyrophyllite

I have a row, i think its the same effect, but not worked... – Orthotropic

Can you provide a simplified widget that will reproduce the same issue you are facing? – Hydrozoan

I got this widget from a another project, i'm gonna try do that – Orthotropic

I have the same problem. Any updates on this? – Jacquelynnjacquenetta

Answer 1

I dont know if this will work in your case, but I had a similar problem and it solved it (Scroll worked in andorid emulator and not in Chrome). At main.dart after

return MaterialApp.router(

add

scrollBehavior: MyCustomScrollBehavior(),

so it looks like this

@override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      scrollBehavior: MyCustomScrollBehavior(),

And at the end of the page add

class MyCustomScrollBehavior extends MaterialScrollBehavior {
 // Override behavior methods and getters like dragDevices
 @override
 Set<PointerDeviceKind> get dragDevices => {
   PointerDeviceKind.touch,
   PointerDeviceKind.mouse,
   // etc.
 };
}

Eisenstein