Skip to content

Scrollbar margins are handled inconsistently #106918

Closed

Description

@Piinks

crossAxisMargin is applied to the thumb and consumed by the track.
mainAxisMargin is applied to both the track and the thumb.

I think the mainAxisMargin should apply to the thumb and be consumed by the track like in the cross axis.

Fix incoming.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MaterialScrollBehavior().copyWith(scrollbars: false),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: RawScrollbar(
        mainAxisMargin: 5,
        crossAxisMargin: 5,
        trackVisibility: true,
        thumbVisibility: true,
        thickness: 20,
        thumbColor: Colors.red,
        trackColor: Colors.blue,
        trackBorderColor: Colors.orange,
        child: Column(
          children: [
            Center(
              child: SizedBox(
                height: 500,
                child: CustomScrollView(
                  primary: true,
                  slivers: [
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                      (c, i) => Container(height: 50, child: Center(child: Text('Item $i'))),
                      childCount: 50,
                    ),
                    )
                  ]
                ),
              ),
            ),
            Container(height: 20, color: Colors.green)
          ],
        ),
      ), 
    );
  }
}

The track color issue here is separate. (#106917)

Screen Shot 2022-06-30 at 7 11 49 PM

Activity

  1. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    f: scrollingViewports, list views, slivers, etc.
    a: qualityA truly polished experience
    P1High-priority issues at the top of the work list
    on Jul 1, 2022
  2. self-assigned this
    on Jul 1, 2022
  3. github-actions commented on Aug 8, 2022

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  4. locked as resolved and limited conversation to collaborators on Aug 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: qualityA truly polished experiencef: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.waiting for PR to land (fixed)A fix is in flight

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions