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

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

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.
};
}