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