0

I have been using the flutter package Side Sheet, inside the side sheet I have a Listview.builder, which I want to make scroll horizontally (located towards bottom of code snippet), I have given a width and height, yet it does not scroll horizontally, can someone spot the issue here?

return Stack(
  children: [
    // The map widget
    FlutterMap(
      options: MapOptions(
        initialCenter: latitudeLongitude,
        initialZoom: 13.0,
      ),
      children: [
        TileLayer(
          urlTemplate:
              'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
          subdomains: ['a', 'b', 'c'],
          tileProvider: CancellableNetworkTileProvider(),
        ),
      ],
    ),
    // Positioned widget for the buttons in the top right corner
    Positioned(
      top: 16.0,
      right: 16.0,
      child: Row(
        children: [
          ElevatedButton(
            onPressed: () => SideSheet.right(
              body: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  children: [
                    // Drop down multi select
                    DropdownSearch<String>.multiSelection(
                      items: (f, cs) => viewModel.dashboardModels
                          .map((model) =>
                              '${model.name} - Start Date ${model.startDate}')
                          .toList(),
                      decoratorProps: DropDownDecoratorProps(
                        decoration: InputDecoration(
                          labelText: 'Dashboard Models:',
                          border: OutlineInputBorder(),
                          floatingLabelBehavior:
                              FloatingLabelBehavior.always,
                        ),
                      ),
                      dropdownBuilder: (ctx, selectedItems) {
                        if (selectedItems.isEmpty) {
                          return Text("Please choose a model");
                        }

                        final selectedItemsString =
                            selectedItems.join(", ");

                        return Row(
                          children: [
                            Icon(Icons.remove_red_eye, size: 20),
                            SizedBox(width: 8),
                            Expanded(child: Text(selectedItemsString)),
                          ],
                        );
                      },
                      onChanged: (values) {
                        // Handle selection changes
                      },
                    ),

                    const SizedBox(height: 20),

                    // Listview Builder
                    Container(
                      width: 200,
                      height: 150, // Fixed height for ListView
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 20,
                        itemBuilder: (context, index) {
                          return Card(
                            elevation: 4,
                            margin: EdgeInsets.all(8),
                            child: Container(
                              width: 120, // Fixed width for each card
                              child: Center(
                                child: Text(
                                  viewModel.items[index],
                                  style: TextStyle(fontSize: 18),
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
              width: MediaQuery.of(context).size.width * 0.3,
              context: context,
            ),
            child: Icon(Icons.remove_red_eye),
          ),
          SizedBox(height: 20),
        ],
      ),
    ),
  ],
);
3
  • i think this sample of code has no problem, look outer. Commented Oct 31, 2024 at 20:01
  • @A-E I've added the full widget. Commented Oct 31, 2024 at 20:18
  • I've removed the side sheet, and created my own off the screen widget, added the code and still the problem persists. Commented Oct 31, 2024 at 21:41

1 Answer 1

0

There's a lot going on here but since you're using a stack to put a scrollable on top of a map, you might need to use the pointer_interceptor library to intercept pointer events (on Flutter Web).

I tested this code on an Android emulator and it works fine.

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.