flutterlistviewscrollhorizontal-scrollingvertical-scrolling

Flutter Horizontal listview scroll issue inside Column


below is my code, Actually i have Row where i have fixed Ui on the left and right side on the Design and i the center i have expended widget. Now i facing an issue that on the expanded widget i have a column and in the Column i have 3 Widget one is TextFormField that is fixed then on the below of textformField i have Horizontal ListView and then Vertical Listview

Issue i facing is that Horizontal ListView is not Scrolling...but Vertical ListView is Scrolling Fine...

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Layout Example'),
        ),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // Fixed UI widget on the left
        Container(
          width: 200,
          height: double.infinity,
          color: Colors.blue,
          child: Center(
            child: Text('Fixed UI'),
          ),
        ),
        // Expanded widget with a column
        Expanded(
          child: Column(
            children: [
              // Row with a TextField and a Button
              Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: 'Enter something',
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      // Add functionality for the button here
                    },
                    child: Text('Button'),
                  ),
                ],
              ),
              // ListView with horizontal scroll
              Container(
                height: 100,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    return Container(
                      width: 100,
                      margin: EdgeInsets.all(4),
                      color: Colors.green,
                      child: Center(
                        child: Text('Item $index'),
                      ),
                    );
                  },
                ),
              ),
              // ListView with vertical scroll
              Expanded(
                child: ListView.builder(
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('Item $index'),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
        // Fixed UI widget on the right
        Container(
          width: 200,
          height: double.infinity,
          color: Colors.red,
          child: Center(
            child: Text('Fixed UI'),
          ),
        ),
      ],
    );
  }
}

Solution

  • You need to add dragDevices to MaterialApp like this:

      MaterialApp(
        scrollBehavior: ScrollConfiguration.of(context).copyWith(
              dragDevices: {
                  PointerDeviceKind.mouse,
                  PointerDeviceKind.touch,
                  PointerDeviceKind.trackpad,
               },
            ),
         );
        ....