• I want my horizontal scrollable widgets to be able to go "off the screen" (disappearing at the screen edge).
• I also want the Scrollbar to not touch the screen edge.

I can currently only accomplish the first of these tasks. The scrollable red squares are a child of the Scrollbar, If padding is added, it will add padding to both the scrollable red squares & scroll bar.

      Scrollbar(
      thumbVisibility: true,
      controller: scrollController,
      child: Container(
        margin: const EdgeInsets.only(bottom: 15),
        child: SingleChildScrollView(
          controller: scrollController,
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              for (int i = 0; i < 25; i  )
                Container(
                  margin: const EdgeInsets.only(right: 20),
                  color: Colors.red,
                  height: 100,
                  width: 100,
                )
            ],
          ),
        ),
      ),
    )

CodePudding user response：

so that the scroll does not touch the edge of the screen, you must wrap the widget in charge of the scroll in a padding and that problem should already be solved, I leave it as an answer since my reputation does not allow me to add comments

CodePudding user response：

Don't sure what you exactly mean but did some change one your code using this question page and answer

this code uses a Elevated button to navigate (with animation) your scrollbar from bottom to top, sorry can't add a Gif right now :_)

import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {

  late AnimationController controller;
  late Animation<Offset> offset;


  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 1.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    var scrollController = ScrollController();
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Center(
              child: ElevatedButton(
                child: Text('Show / Hide'),
                onPressed: () {
                  switch (controller.status) {
                    case AnimationStatus.completed:
                      controller.reverse();
                      break;
                    case AnimationStatus.dismissed:
                      controller.forward();
                      break;
                    default:
                  }
                },
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: SlideTransition(
                position: offset,
                child: Scrollbar(
                  thumbVisibility: true,
                  controller: scrollController = ScrollController(),
                  child: Container(
                    margin: const EdgeInsets.only(bottom: 15),
                    child: SingleChildScrollView(
                      controller: scrollController,
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: [
                          for (int i = 0; i < 25; i  )
                            SingleChildScrollView(
                              child: Container(
                                margin: const EdgeInsets.only(right: 20),
                                color: Colors.red,
                                height: 100,
                                width: 100,
                              ),
                            )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}