skip to Main Content

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:UsersAlbertDocumentsflutter
    • 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:UsersAlbertAppDataLocalAndroidsdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:Program FilesAndroidAndroid Studiojrebinjava
    • 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 FilesGoogleChromeApplicationchrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.24)
    • Visual Studio at C:Program Files (x86)Microsoft Visual Studio2019Community
    • 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 FilesAndroidAndroid 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 FilesJetBrainsIntelliJ 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:UsersAlbertAppDataLocalProgramsMicrosoft 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

2

Answers


  1. Can you try wrapping ListView widget with a SizedBox or ConstrainedBox?

    Login or Signup to reply.
  2. Use shrinkWrap. It will solve your problem.

    ListView(
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      scrollDirection: Axis.vertical,
      children: [],
    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search