Flutter：无法使用显示的滚动条创建水平滚动主体

Question

I need help to create scrollable body: my screen

This is how my structure of body looks: build()

              body: Padding(
                  padding: const EdgeInsets.all(30.0),
                  child: DragAndDropLists(
                    children: _contents,
                    onItemReorder: _onItemReorder,
                    onListReorder: _onListReorder,
                    axis: Axis.horizontal,
                    listWidth: 300,
                    listDraggingWidth: 300,
                    listPadding: EdgeInsets.all(20.0),
                    itemDivider: const Divider(
                      thickness: 4,
                      height: 10,
                      color: lightBlue,
                    ),
                    itemDecorationWhileDragging: BoxDecoration(
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                          color: const Color(0xff004269).withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 3,
                          offset: const Offset(0, 0), // changes position of shadow
                        ),
                      ],
                    ),
                    listInnerDecoration: BoxDecoration(
                      color: Theme.of(context).canvasColor,
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    lastItemTargetHeight: 2,
                    addLastItemTargetHeightToTop: true,
                    lastListTargetSize: 40,
                    
                  ),
                ),

I tried already ListView, SingleChildScrollView, Column I don't know why but it's doesn't work

Maybe somebody has an idea what I can change to see scrollbar and can scroll it horizontally Thank you

Answer 1

You seem to be using a bit of complex layout, but a simplified version would look something like this:

You can set scrollDirection property of ListView to Axis.horizontal and for scrollbar you can wrap ListView inside Scrollbar .

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          height: 120,
          child: Scrollbar(
            isAlwaysShown: true,
            controller: _scrollController,
            child: ListView.builder(
                controller: _scrollController,
                scrollDirection: Axis.horizontal,
                itemCount: 100,
                itemBuilder: buildItem),
          ),
        ),
      ),
    );
  }

  Widget buildItem(context, index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.green[200],
      ),
      margin: const EdgeInsets.all(8.0),
      height: 100,
      width: 100,
    );
  }
}

Answer 2

Try wrap Padding in your Scaffold with SingleChildScrollView

 SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Padding(),
 )

Other option that you can use is GridView , and ListView .