I have a question, in my mini app I wanted to add a SingleChildScrollView widget. I checked tutorials, guides, stackoverflow, I added Expanded, Column, Container before and nothing - still this function doesn't work as it should - not scrolling

Below is a code snippet - please help because I don't want to pull my hair out of my head anymore ;)

import 'package:flutter/material.dart';
import 'package:icon_forest/icon_forest.dart';
import './buttons.dart';
import './containers.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          toolbarHeight: 60,
          leading: IconButton(
            onPressed: () {},
            icon: Icon(Icons.menu),
            color: Colors.white,
          ),
          title: Image.asset(
            'images/logo.png',
            fit: BoxFit.cover,
          ),
          centerTitle: true,
          backgroundColor: Color(0xFF1B1919),
          actions: <Widget>[
            IconButton(
                onPressed: () {},
                icon: const Icon(Icons.search),
                color: Colors.white),
            IconButton(
                onPressed: () {},
                icon: const Icon(Icons.email_outlined),
                color: Colors.white),
            IconButton(
                onPressed: () {},
                icon: const Icon(Icons.person),
                color: Colors.white),
          ],
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10)),
          ),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ContainerHomePage('Name1', '20H'),
                ContainerHomePage('Name1', '20H'),
                ContainerHomePage('Name1', '20H'),
              ],
            ),
            Container(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                    ButtonChoise('name'),
                  ],
                ),
              ),
            ),
          ],
        ),
        backgroundColor: Colors.black,
      ),
    );
  }
}

and buttons.dart

import 'package:flutter/material.dart';

class ButtonChoise extends StatelessWidget {
  String name;
   ButtonChoise(this.name,{super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(5),
      child: ElevatedButton(
        
        child: Text(name),
        style: ElevatedButton.styleFrom(
          primary: Colors.black,
          side: const BorderSide(color: Colors.white, width: 1),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0)
          ),
          minimumSize: Size(120, 30)

        
        ),
        onPressed: () {}, 
        ),
    );
  }
}

CodePudding user response：

SingleChildScrollView is scrolling on horizontal hope this is what wanted. if not remove or change it to scrollDirection: Axis.vertical,. But If you are testing on chrome and cant able to drag with mouse, you need to config the scrollBehavior. You can wrap the widget with ScrollConfiguration, or just call

return MaterialApp(
  debugShowCheckedModeBanner: false,
  scrollBehavior: ScrollConfiguration.of(context).copyWith(
    dragDevices: {
      PointerDeviceKind.touch,
      PointerDeviceKind.mouse,
    },
  ),