When launched using Web (Chrome and Edge) scroll seems to work fine, with a nice scroll bar on the right. But when trying on Android scroll just doesn't work.
The app gets categories from an API and shows a list of different cards. I am using FlutterFlow for the whole project but this part was not generated.
Code:
class _CategoriesWidgetState extends State<CategoriesWidget> {
late CategoriesModel _model;
final GenreProvider genreProvider = new GenreProvider();
final scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
_model = createModel(context, () => CategoriesModel());
_model.textController ??= TextEditingController();
}
@override
void dispose() {
_model.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return FutureBuilder<List<Genre>>(
future: genreProvider.getAllGenres(),
builder: (context, snapshot) {
if (snapshot.hasData) {
final genres = snapshot.data;
return Scaffold(
key: scaffoldKey,
backgroundColor: Color(0xFFF1F4F8),
appBar: AppBar(
backgroundColor: Color(0xFFB4FFA8),
automaticallyImplyLeading: false,
actions: [
FlutterFlowIconButton(
borderColor: Colors.transparent,
borderRadius: 30.0,
borderWidth: 1.0,
buttonSize: 60.0,
icon: Icon(
Icons.person,
color: Colors.black,
size: 30.0,
),
onPressed: () async {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserConfigWidget(),
),
);
},
),
],
centerTitle: true,
toolbarHeight: 100.0,
elevation: 4.0,
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: ListView(
padding: EdgeInsets.zero,
scrollDirection: Axis.vertical,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10.0, 10.0, 10.0, 10.0),
child: Text(
'Title',
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Poppins',
color: FlutterFlowTheme.of(context).black600,
fontSize: 25.0,
),
),
),
genres == null
? Center(
child: Text('No genres found'),
)
: ListView.builder(
shrinkWrap: true,
itemCount: genres.length,
itemBuilder: (BuildContext context, int index) {
return GenreCard(genre: genres[index]);
},
),
],
),
),
],
),
);
}
return Center(
child: SizedBox(
width: 48.0,
height: 48.0,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
),
),
);
},
);
}
}
Flutter doctor:
Flutter (Channel dev, 3.4.0-17.2.pre, on Microsoft Windows [Versi¢n 10.0.19045.2846], locale es-ES)
• Flutter version 3.4.0-17.2.pre on channel dev at C:\Users\Albert\Documents\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision d6260f127f (7 months ago), 2022-09-21 13:33:49 -0500
• Engine revision 3950c6140a
• Dart version 2.19.0 (build 2.19.0-146.2.beta)
• DevTools version 2.16.0
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at C:\Users\Albert\AppData\Local\Android\sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.24)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.11.33328.57
• Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 2021.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
[√] IntelliJ IDEA Community Edition (version 2022.3)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2022.3.1
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
[√] VS Code (version 1.77.3)
• VS Code at C:\Users\Albert\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.62.0
[√] Connected device (4 available)
• Redmi Note 8 Pro (mobile) • c6sk5dqcpjjbae79 • android-arm64 • Android 10 (API 29)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Versi¢n 10.0.19045.2846]
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.86
• Edge (web) • edge • web-javascript • Microsoft Edge 112.0.1722.39
[√] HTTP Host Availability
• All required HTTP hosts are available
I tried different options of building the ListView and crashes. I tried wrapping everything in a SingleChildScrollView, wrapping the ListView.builder in a SingleChildScrollView. I also tried to give it a scroll behaviour...
Everything resulted in nothing or crashes, the crashes tend to be like:
RenderBox was not laid out: RenderRepaintBoundary#720bd relayoutBoundary=up12 NEEDS-PAINT
Use shrinkWrap. It will solve your problem.
ListView(
shrinkWrap: true,
padding: EdgeInsets.zero,
scrollDirection: Axis.vertical,
children: [],
),