Flutter web listview not scrolling

To create a scrolling ListView in Flutter web, you can use the ‘ListView.builder’ widget along with a ‘ScrollController’.

First, you need to import the necessary packages:

<script src="https://cdn.jsdelivr.net/npm/flutter@2.5.3/flutter_web.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>

Next, you can use the following code as an example:

<html>
  <head>
    <style>
      #flutter-app {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div id="flutter-app"></div>

    <script>
      // Create a FlutterWebRender object
      var flutterWebRender = new FlutterWebRender();

      // Define the main function for the Flutter app
      void main() {
        runApp(new MyApp());
      }

      // Implement the main app class
      class MyApp extends StatefulWidget {
        @override
        MyAppState createState() => MyAppState();
      }

      class MyAppState extends State<MyApp> {
        ScrollController _scrollController;
      
        @override
        void initState() {
          super.initState();
          
          // Initialize the scroll controller
          _scrollController = ScrollController();
        }
      
        @override
        void dispose() {
          _scrollController.dispose(); // Dispose the scroll controller
          super.dispose();
        }
      
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            home: Scaffold(
              body: ListView.builder(
                controller: _scrollController, // Set the scroll controller
                itemCount: 50,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
          );
        }
      }

      // Call the main function
      flutterWebRender.runApp(
        runAppCommand: main,
        elementId: 'flutter-app',
      );
    </script>
  </body>
  </html>

Here, we define a ‘ScrollController’ named ‘_scrollController’ which handles scrolling for the ‘ListView.builder’ widget. Inside the ‘build’ method, we wrap our ‘ListView.builder’ with a ‘Scaffold’ and set the ‘controller’ property of the ‘ListView.builder’ to the ‘_scrollController’.

Note that this example assumes you have already set up the necessary HTML file for Flutter web, including the required script tags for “flutter_web.js” and “main.dart.js”.

Leave a comment Cancel reply