Flutter Draggable Scrollbar

Flutter Draggable Scrollbar:

In Flutter app scrollbar used that can be dragged for quickly navigation through a vertical list. Additionaly it can show label next to scrollthumb with information about current item, for example date of picture created.

 

Using Draggable Scrollbar In Flutter:

To use this Draggable Scrollbar Functionality we have to add its dependency package into the pubspec.yaml file:

Use below code to add dependency package in pubspec.yaml file.

 

dependencies:

draggable_scrollbar: ^0.0.4

 

Install Draggable Scrollbar dependency package from terminal Editor:

You can install packages from the command line with Flutter by using below command:

$ flutter packages get

Bydefault, your Flutter terminal editor might support flutter packages get.

Importing Draggable Scrollbar in flutter:

To use Draggable Scrollbar in Flutter Dart code we have to import into the dart code for coding. without importing Draggable Scrollbar if we use it in coding then it shows error or exception that is package not found error.

To import dependency package into dart code use below code.

import 'package:draggable_scrollbar/draggable_scrollbar.dart';

 

Usage

Flutter has three  built-in scroll thumbs, that will be used and also you can create a custom thumb for your own app! depends upon your requirement.

 

Semicircle Thumb:

Use the below code to create Semicircle scroll thumbs in your Flutter App.

DraggableScrollbar.semicircle(
controller: myScrollController,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),
controller: myScrollController,
padding: EdgeInsets.zero,
itemCount: 1000,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.all(2.0),
color: Colors.grey[300],
);
},
),
);

 

Arrows thumb + label:

Use the below code to create Arrows thumb + label scroll thumbs in your Flutter App.

DraggableScrollbar.arrows(
labelTextBuilder: (double offset) => Text("${offset ~/ 100}"),
controller: myScrollController,
child: ListView.builder(
controller: myScrollController,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.purple[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
);

 

Rounded Rectangle Thumb:

Use the below code to create Rounded Rectangle scroll thumbs in your Flutter App.

 

DraggableScrollbar.rrect(
controller: myScrollController,
child: ListView.builder(
controller: myScrollController,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.green[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
);

 

Custom:

Use the below code to create custom scroll thumbs in your Flutter App.

 

DraggableScrollbar(
controller: myScrollController,
child: ListView.builder(
controller: myScrollController,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.cyan[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
heightScrollThumb: 48.0,
backgroundColor: Colors.blue,
scrollThumbBuilder: (
Color backgroundColor,
Animation<double> thumbAnimation,
Animation<double> labelAnimation,
double height, {
Text labelText,
}) {
return FadeTransition(
opacity: thumbAnimation,
child: Container(
height: height,
width: 20.0,
color: backgroundColor,
),
);
},
);

 

Below is the Example of  Flutter Draggable Scrollbar :

Create a new Flutter project and then copy and paste below code into example/lib/main.dart file:

 

import 'package:draggable_scrollbar/draggable_scrollbar.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
runApp(DraggableScrollBarDemo(
title: 'Draggable Scroll Bar Demo',
));
}

class DraggableScrollBarDemo extends StatelessWidget {
final String title;

const DraggableScrollBarDemo({
Key key,
@required this.title,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: MyHomePage(title: title),
);
}
}

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

final String title;

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

class _MyHomePageState extends State<MyHomePage> {
ScrollController _semicircleController = ScrollController();
ScrollController _arrowsController = ScrollController();
ScrollController _rrectController = ScrollController();
ScrollController _customController = ScrollController();

@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
bottom: TabBar(tabs: [
Tab(text: 'Semicircle'),
Tab(text: 'Arrows'),
Tab(text: 'RRect'),
Tab(text: 'Custom'),
]),
),

body: TabBarView(children: [
SemicircleDemo(controller: _semicircleController),
ArrowsDemo(controller: _arrowsController),
RRectDemo(controller: _rrectController),
CustomDemo(controller: _customController),
]),
),
);
}
}

class SemicircleDemo extends StatelessWidget {
static int numItems = 1000;

final ScrollController controller;

const SemicircleDemo({
Key key,
@required this.controller,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return DraggableScrollbar.semicircle(
labelTextBuilder: (offset) {
final int currentItem = controller.hasClients
? (controller.offset /
controller.position.maxScrollExtent *
numItems)
.floor()
: 0;

return Text("$currentItem");
},

labelConstraints: BoxConstraints.tightFor(width: 80.0, height: 30.0),
controller: controller,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),

controller: controller,
padding: EdgeInsets.zero,
itemCount: numItems,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.all(2.0),
color: Colors.grey[300],
);
},
),
);
}
}

class ArrowsDemo extends StatelessWidget {
final ScrollController controller;

const ArrowsDemo({Key key, @required this.controller}) : super(key: key);

final _itemExtent = 100.0;

@override
Widget build(BuildContext context) {
return DraggableScrollbar.arrows(
alwaysVisibleScrollThumb: true,
backgroundColor: Colors.grey[850],
padding: EdgeInsets.only(right: 4.0),
labelTextBuilder: (double offset) => Text("${offset ~/ _itemExtent}",
style: TextStyle(color: Colors.white)),
controller: controller,
child: ListView.builder(
controller: controller,
itemCount: 1000,
itemExtent: _itemExtent,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.purple[index % 9 * 100],
child: Center(
child: Text(
index.toString(),
),
),
),
);
},
),
);
}
}

class RRectDemo extends StatelessWidget {
final ScrollController controller;

const RRectDemo({Key key, @required this.controller}) : super(key: key);

@override
Widget build(BuildContext context) {
return DraggableScrollbar.rrect(
controller: controller,
labelTextBuilder: (offset) => Text("${offset.floor()}"),
child: ListView.builder(
controller: controller,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.green[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),
);
}
}

class CustomDemo extends StatelessWidget {
final ScrollController controller;

const CustomDemo({Key key, @required this.controller}) : super(key: key);

@override
Widget build(BuildContext context) {
return DraggableScrollbar(
controller: controller,
child: ListView.builder(
controller: controller,
itemCount: 1000,
itemExtent: 100.0,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(8.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(4.0),
color: Colors.cyan[index % 9 * 100],
child: Center(
child: Text(index.toString()),
),
),
);
},
),

heightScrollThumb: 48.0,
backgroundColor: Colors.blue,
scrollThumbBuilder: (
Color backgroundColor,
Animation<double> thumbAnimation,
Animation<double> labelAnimation,
double height, {
Text labelText,
BoxConstraints labelConstraints,
}) {
return FadeTransition(
opacity: thumbAnimation,
child: Container(
height: height,
width: 20.0,
color: backgroundColor,
),
);
},
);
}
}

 

Leave a Reply

Categories

Myles [CPS] IN
Shein WW