Horizontal SingleChildScrollView not working inside a Column on Windows

Question

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 ')
            ]),
          )
        ],
      ),
    );

Answer 1

You can utilize the provided Custom Class to enable scrolling via click-and-drag or mouse wheel, allowing you to easily navigate through the content (in Flutter web also).

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: theme(),
      home: ChannelInfoScreen(),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.stylus,
        PointerDeviceKind.unknown,
      };
}

Answer 2

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.

Answer 3

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->