Attach ScrollBar to Top of PageView

261 views
Skip to first unread message

Usman Riaz

unread,
May 27, 2021, 4:30:41 PM5/27/21
to Flutter Development (flutter-dev)

I display a PageView (with horizontal scrolling) on one the screens for my app. I have wrapped this PageView widget with a ScrollBar widget to display a scrollbar. The scrollbar shows up and works correctly with scrolling, but by default it shows up at the bottom of the PageView.

Below is a code snipped to display the scrollbar at the bottom of PageView widget.

Scrollbar(showTrackOnHover: true, 
           controller: _pageController, 
            isAlwaysShown: true, 
            child: PageView(physics: ClampingScrollPhysics(), 
                   controller: _pageController, 
                   children: myList, 
                   scrollDirection: Axis.horizontal, ), ),

But I want to display the scrollbar at the top of the PageView. Is there a way, that the scrollbar to be displayed at the top of my PageView widget?

Thanks!

Suzuki Tomohiro

unread,
May 27, 2021, 4:50:52 PM5/27/21
to Usman Riaz, Flutter Development (flutter-dev)
Can you attach screenshots? Actual and desirable ones.

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/fbd1a94d-017f-4b97-a62a-a2bc21aec76fn%40googlegroups.com.

Usman Riaz

unread,
May 27, 2021, 5:43:28 PM5/27/21
to Flutter Development (flutter-dev)
Screenshot attached and also a runnable snippet if you want to run it locally.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
PageController _pageController = PageController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
color: Colors.black12,
child: _getPageView()),
),
);
}

Widget _getPageView() {
return Scrollbar(
showTrackOnHover: true,
controller: _pageController,
isAlwaysShown: true,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
children: [
Container(
color: Colors.greenAccent, child: Center(child: Text("Page#1"))),
Container(
color: Colors.blueAccent, child: Center(child: Text("Page#2")))
],
scrollDirection: Axis.horizontal,
),
);
}
}


Simulator Screen Shot - iPhone 8 Plus - 2021-05-27 at 15.28.37.png

Suzuki Tomohiro

unread,
May 28, 2021, 12:02:32 PM5/28/21
to Usman Riaz, Flutter Development (flutter-dev)
Can you try this?
You need to learn how to use your custom ScrollbarPainter. (I don’t know that)


Usman Riaz

unread,
May 29, 2021, 11:01:05 AM5/29/21
to Suzuki Tomohiro, Flutter Development (flutter-dev)
Thanks for the reply.

I implemented a scrollbar myself instead of the Scrollbar widget. 

The textDirection flag as you suggested might work, but didn't try as I wasn't not sure if this flag impacts anything else besides changing the scrollbar position.

Reply all
Reply to author
Forward
0 new messages