0

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'),
          ),
        ),
      ],
    );
  }
}
3
  • Is this a web development project? Commented Dec 6, 2023 at 18:02
  • yes web plus desktop Commented Dec 6, 2023 at 18:39
  • every thing works fine except horizontal scroll. Commented Dec 6, 2023 at 18:41

1 Answer 1

2

You need to add dragDevices to MaterialApp like this:

  MaterialApp(
    scrollBehavior: ScrollConfiguration.of(context).copyWith(
          dragDevices: {
              PointerDeviceKind.mouse,
              PointerDeviceKind.touch,
              PointerDeviceKind.trackpad,
           },
        ),
     );
    ....
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.