Home > OS >  Horizontal SingleChildScrollView not working inside a Column on Windows
Horizontal SingleChildScrollView not working inside a Column on Windows

Time:06-08

Updated: Thanks for all the replies. Check again. It's only not working on windows. android and macos work fine.


I cannot scroll the row. I've set Column.crossAxisAlignment to stretch and SingleChildScrollView.scrollDirection to horizontal. What am I missing?

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(children: [
              Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '),
              ElevatedButton(
                  onPressed: () {},
                  child: Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')),
              Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')
            ]),
          )
        ],
      ),
    );

enter image description here

CodePudding user response:

Try below code and Wrap your Widget inside SizedBox or Container give it width and height

body:SingleChildScrollView(
        child: Column(
          children: [
            Text('Add below or above other widgets'),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                children: [
                  Row(
                    children: [
                      Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '),
                      ElevatedButton(
                        onPressed: () {},
                        child: Text(
                            ' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '),
                      ),
                      Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')
                    ],
                  ),
                ],
              ),
            ),
            Text('Add below or above other widgets'),
          ],
        ),
      ),

Result Screen-> image

CodePudding user response:

ScrollBehaviors now allow or disallow drag scrolling from specified PointerDeviceKinds. ScrollBehavior.dragDevices, by default, allows scrolling widgets to be dragged by all PointerDeviceKinds except for PointerDeviceKind.mouse.

To enable touch scroll extend MaterialScrollBehavior and provide on MaterialApp.

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods like buildOverscrollIndicator and buildScrollbar
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        // etc.
      };
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeWT(),
    );
  }
}

More on ScrollBehaviors.

Code after migration:

// Only manually add a `Scrollbar` when not on desktop platforms.
// Or, see other migrations for changing `ScrollBehavior`.
switch (currentPlatform) {
  case TargetPlatform.linux:
  case TargetPlatform.macOS:
  case TargetPlatform.windows:
    return child;
  case TargetPlatform.android:
  case TargetPlatform.fuchsia:
  case TargetPlatform.iOS:
    return Scrollbar(
      controller: controller,
      child: child;
    );
}

Check more about migration-guide and Custom scrollbehavior.

  • Related