Scrollbar (Widget of the Week)

By default, scrollable widgets in Flutter don’t show a scrollbar. However, with Flutter’s scrollbar widget, that all can change! By wrapping scrollbar around any scrollable widget, like ListView, GridView or CustomScrollView, you can navigate with precision!

DartPad → https://goo.gle/39UFnA4
Scrollbar API docs → https://goo.gle/2ZI2Krb

#flutter

What is GEEK

Buddha Community

Bumble Like Scrollbar for Flutter, Minimal Scrollbar Widget

Bumble Like Scrollbar

  BumbleScrollbar(
    child: Container(
            color: Colors.grey,
            child: Column(
                    children: List.generate(
                    30,
                    (index) => Container(
                            color: Colors.grey,
                            //color: getRandomColor(),
                            height: 500,
                          ),
                          ),
                        ),
                    ),
                );
      



   BumbleScrollbar({
    required this.child,
    this.strokeWidth = 6,
    this.strokeHeight = 100,
    this.backgroundColor = Colors.black12,
    this.thumbColor = Colors.white,
    this.alignment = Alignment.topRight,
    this.padding = EdgeInsets.zero,
    this.strokeConnerType = StrokeConnerType.rounded,
    this.showScrollbar = true,
    this.scrollbarMargin = const EdgeInsets.all(8.0),
  });

Here is an example of logging a debug message and an error:

import 'dart:math';

import 'package:bumble_scrollbar/bumble_scrollbar.dart';
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> {
  @override
  void initState() {
    super.initState();
  }

  Color getRandomColor() {
    return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),
        Random().nextInt(255));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bumble Like Scrollbar'),
        ),
        body: BumbleScrollbar(
          child: Container(
              color: Colors.grey,
              child: Column(
                  children: List.generate(
                      30,
                      (index) => Container(
                            color: getRandomColor(),
                            height: 500,
                          )))),
        ),
      ),
    );
  }
}

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add bumble_scrollbar

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  bumble_scrollbar: ^0.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:bumble_scrollbar/bumble_scrollbar.dart'; 

example/lib/main.dart

import 'dart:math';

import 'package:bumble_scrollbar/bumble_scrollbar.dart';
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> {
  @override
  void initState() {
    super.initState();
  }

  Color getRandomColor() {
    return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),
        Random().nextInt(255));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bumble Like Scrollbar'),
        ),
        body: BumbleScrollbar(
          child: Container(
              color: Colors.grey,
              child: Column(
                  children: List.generate(
                      30,
                      (index) => Container(
                            color: getRandomColor(),
                            height: 500,
                          )))),
        ),
      ),
    );
  }
} 

Download Details:

Author: Lavkushwaha

Source Code: https://github.com/Lavkushwaha/bumble_scrollbar_flutter

#flutter #widget #scrollbar 

Feature-packed Calendar widget for Flutter

TableCalendar

Highly customizable, feature-packed calendar widget for Flutter.

TableCalendar with custom styles	TableCalendar with custom builders

Features

• Extensive, yet easy to use API
• Preconfigured UI with customizable styling
• Custom selective builders for unlimited UI design
• Locale support
• Range selection support
• Multiple selection support
• Dynamic events and holidays
• Vertical autosizing - fit the content, or fill the viewport
• Multiple calendar formats (month, two weeks, week)
• Horizontal swipe boundaries (first day, last day)

Usage

Make sure to check out examples and API docs for more details.

Installation

Add the following line to pubspec.yaml:

dependencies:
  table_calendar: ^3.0.9

Basic setup

The complete example is available here.

TableCalendar requires you to provide firstDay, lastDay and focusedDay:

• firstDay is the first available day for the calendar. Users will not be able to access days before it.
• lastDay is the last available day for the calendar. Users will not be able to access days after it.
• focusedDay is the currently targeted day. Use this property to determine which month should be currently visible.

TableCalendar(
  firstDay: DateTime.utc(2010, 10, 16),
  lastDay: DateTime.utc(2030, 3, 14),
  focusedDay: DateTime.now(),
);

Adding interactivity

You will surely notice that previously set up calendar widget isn't quite interactive - you can only swipe it horizontally, to change the currently visible month. While it may be sufficient in certain situations, you can easily bring it to life by specifying a couple of callbacks.

Adding the following code to the calendar widget will allow it to respond to user's taps, marking the tapped day as selected:

selectedDayPredicate: (day) {
  return isSameDay(_selectedDay, day);
},
onDaySelected: (selectedDay, focusedDay) {
  setState(() {
    _selectedDay = selectedDay;
    _focusedDay = focusedDay; // update `_focusedDay` here as well
  });
},

In order to dynamically update visible calendar format, add those lines to the widget:

calendarFormat: _calendarFormat,
onFormatChanged: (format) {
  setState(() {
    _calendarFormat = format;
  });
},

Those two changes will make the calendar interactive and responsive to user's input.

Updating focusedDay

Setting focusedDay to a static value means that whenever TableCalendar widget rebuilds, it will use that specific focusedDay. You can quickly test it by using hot reload: set focusedDay to DateTime.now(), swipe to next month and trigger a hot reload - the calendar will "reset" to its initial state. To prevent this from happening, you should store and update focusedDay whenever any callback exposes it.

Add this one callback to complete the basic setup:

onPageChanged: (focusedDay) {
  _focusedDay = focusedDay;
},

It is worth noting that you don't need to call setState() inside onPageChanged() callback. You should just update the stored value, so that if the widget gets rebuilt later on, it will use the proper focusedDay.

The complete example is available here. You can find other examples here.

Events

The complete example is available here.

You can supply custom events to TableCalendar widget. To do so, use eventLoader property - you will be given a DateTime object, to which you need to assign a list of events.

eventLoader: (day) {
  return _getEventsForDay(day);
},

_getEventsForDay() can be of any implementation. For example, a Map<DateTime, List<T>> can be used:

List<Event> _getEventsForDay(DateTime day) {
  return events[day] ?? [];
}

One thing worth remembering is that DateTime objects consist of both date and time parts. In many cases this time part is redundant for calendar related aspects.

If you decide to use a Map, I suggest making it a LinkedHashMap - this will allow you to override equality comparison for two DateTime objects, comparing them just by their date parts:

final events = LinkedHashMap(
  equals: isSameDay,
  hashCode: getHashCode,
)..addAll(eventSource);

Cyclic events

eventLoader allows you to easily add events that repeat in a pattern. For example, this will add an event to every Monday:

eventLoader: (day) {
  if (day.weekday == DateTime.monday) {
    return [Event('Cyclic event')];
  }

  return [];
},

Events selected on tap

Often times having a sublist of events that are selected by tapping on a day is desired. You can achieve that by using the same method you provided to eventLoader inside of onDaySelected callback:

void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
  if (!isSameDay(_selectedDay, selectedDay)) {
    setState(() {
      _focusedDay = focusedDay;
      _selectedDay = selectedDay;
      _selectedEvents = _getEventsForDay(selectedDay);
    });
  }
}

The complete example is available here.

Custom UI with CalendarBuilders

To customize the UI with your own widgets, use CalendarBuilders. Each builder can be used to selectively override the UI, allowing you to implement highly specific designs with minimal hassle.

You can return null from any builder to use the default style. For example, the following snippet will override only the Sunday's day of the week label (Sun), leaving other dow labels unchanged:

calendarBuilders: CalendarBuilders(
  dowBuilder: (context, day) {
    if (day.weekday == DateTime.sunday) {
      final text = DateFormat.E().format(day);

      return Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.red),
        ),
      );
    }
  },
),

Locale

To display the calendar in desired language, use locale property. If you don't specify it, a default locale will be used.

Initialization

Before you can use a locale, you might need to initialize date formatting.

A simple way of doing it is as follows:

• First of all, add intl package to your pubspec.yaml file
• Then make modifications to your main():

import 'package:intl/date_symbol_data_local.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

After those two steps your app should be ready to use TableCalendar with different languages.

Specifying a language

To specify a language, simply pass it as a String code to locale property.

For example, this will make TableCalendar use Polish language:

TableCalendar(
  locale: 'pl_PL',
),

'en_US'	'pl_PL'	'fr_FR'	'zh_CN'

Note, that if you want to change the language of FormatButton's text, you have to do this yourself. Use availableCalendarFormats property and pass the translated Strings there. Use i18n method of your choice.

You can also hide the button altogether by setting formatButtonVisible to false.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add table_calendar

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  table_calendar: ^3.0.9

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:table_calendar/table_calendar.dart';

example/lib/main.dart

// Copyright 2019 Aleksander Woźniak
// SPDX-License-Identifier: Apache-2.0

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';

import 'pages/basics_example.dart';
import 'pages/complex_example.dart';
import 'pages/events_example.dart';
import 'pages/multi_example.dart';
import 'pages/range_example.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TableCalendar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StartPage(),
    );
  }
}

class StartPage extends StatefulWidget {
  @override
  _StartPageState createState() => _StartPageState();
}

class _StartPageState extends State<StartPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TableCalendar Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 20.0),
            ElevatedButton(
              child: Text('Basics'),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => TableBasicsExample()),
              ),
            ),
            const SizedBox(height: 12.0),
            ElevatedButton(
              child: Text('Range Selection'),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => TableRangeExample()),
              ),
            ),
            const SizedBox(height: 12.0),
            ElevatedButton(
              child: Text('Events'),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => TableEventsExample()),
              ),
            ),
            const SizedBox(height: 12.0),
            ElevatedButton(
              child: Text('Multiple Selection'),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => TableMultiExample()),
              ),
            ),
            const SizedBox(height: 12.0),
            ElevatedButton(
              child: Text('Complex'),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => TableComplexExample()),
              ),
            ),
            const SizedBox(height: 20.0),
          ],
        ),
      ),
    );
  }
}

Download Details:

Author: aleksanderwozniak

Source Code: https://github.com/aleksanderwozniak/table_calendar

#flutter #calendar #widget #widgets 

Perfect Scrollbar directive for Vue.js

What is perfect-scrollbar?

Perfect Scrollbar is a JavaScript Plugin that allows you customizing high perfermance scrollbars cross browsers. With the flexible plugin system, we can easily redesign the scrollbar as we want. perfect-scrollbar is minimalistic but perfect (for us, and maybe for most developers) scrollbar plugin.

No change on design layout
No manipulation on DOM tree
Use plain scrollTop and scrollLeft
Scrollbar style is fully customizable
Efficient update on layout change

We hope you will love it!

Before using perfect-scrollbar

The following requirements should meet.
the container must have a position style.
the container must be a normal container element.
The following requirements are included in the basic CSS, but please keep in mind when you’d like to change the CSS files.

the container must have an overflow: hidden css style.
the scrollbar’s position must be absolute.
the scrollbar-x must have bottom or top, and the scrollbar-y must have right or left.
Finally, scroll hooking is generally considered as a bad practice, and perfect-scrollbar should be used carefully. Unless custom scroll is really needed, using browser-native scroll is always recommended.

Caveats
perfect-scrollbar emulates some scrolls, but not all of the kinds. It also does not work in some situations. You can find these cases in Caveats. Basically, items listed in the caveats are hacky to implement and may not be implemented in the future. If the features are really needed, please consider using browser-native scroll.

How to use vue perfect scrollbar

npm i @morioh/v-perfect-scrollbar

or

yarn add @morioh/v-perfect-scrollbar

Register

import Vue from 'vue'
import ScrollBar from '@morioh/v-perfect-scrollbar'

// global register
Vue.use(ScrollBar);

or use via CDN

<script src="https://cdn.jsdelivr.net/npm/@morioh/v-perfect-scrollbar@latest/dist/scrollbar.min.js" type="text/javascript"></script>

unpkg CDN

<script src="https://unpkg.com/@morioh/v-perfect-scrollbar@latest/dist/scrollbar.min.js" type="text/javascript"></script>

<div v-scrollbar style="height: 500px">
  <img src="https://i.imgur.com/vIhs3zq.jpg" style="width:100%">
</div>

Common mistakes

Initialize a scrollbar without a limited width or height
Likes the native scrollbars, a scrollable area means the content insides it is larger than the container itself, for example, a 500x500 area with a content which size is 1000x1000:

              container
                 /
       +--------+
  #####################
  #    |        |     #
  #    |        |     #
  #    +--------+     # -- content
  #                   #
  #                   #
  #####################

Therefore, it’s necessary to set the width or height for the container element:

<div v-scrollbar style="max-height: 500px; max-height:500px"></div>

<div v-scrollbar style="height: 500px; height:500px"></div>

Horizontal Scrollbar

<div v-scrollbar style="width: 300px;">
  <div>
    <img style="width:500px" src="https://i.imgur.com/vIhs3zq.jpg">
  </div>

</div>

If the container element is natively scrollable before initializing the Scrollbar, it means you are on the correct way.

Perfect Scrollbar directive options

<div v-scrollbar="{
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
}" style="height: 500px;"></div>

Options

handlers {String[]}

It is a list of handlers to scroll the element.

Default: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']

wheelSpeed {Number}

The scroll speed applied to mousewheel event.

Default: 1

wheelPropagation {Boolean}

If this option is true, when the scroll reaches the end of the side, mousewheel
event will be propagated to parent element.

Default: true

swipeEasing {Boolean}

If this option is true, swipe scrolling will be eased.

Default: true

minScrollbarLength {Number?}

When set to an integer value, the thumb part of the scrollbar will not shrink
below that number of pixels.

Default: null

maxScrollbarLength {Number?}

When set to an integer value, the thumb part of the scrollbar will not expand
over that number of pixels.

Default: null

scrollingThreshold {Number}

This sets threshold for ps--scrolling-x and ps--scrolling-y classes to
remain. In the default CSS, they make scrollbars shown regardless of hover
state. The unit is millisecond.

Default: 1000

useBothWheelAxes {Boolean}

When set to true, and only one (vertical or horizontal) scrollbar is visible
then both vertical and horizontal scrolling will affect the scrollbar.

Default: false

suppressScrollX {Boolean}

When set to true, the scrollbar in X-axis will not be available, regardless of
the content width.

Default: false

suppressScrollY {Boolean}

When set to true, the scroll bar in Y-axis will not be available, regardless of
the content height.

Default: false

scrollXMarginOffset {Number}

The number of pixels the content width can surpass the container width without
enabling the X-axis scroll bar. Allows some “wiggle room” or “offset break”, so
that X-axis scroll bar is not enabled just because of a few pixels.

Default: 0

scrollYMarginOffset {Number}

The number of pixels the content height can surpass the container height without
enabling the Y-axis scroll bar. Allows some “wiggle room” or “offset break”, so
that Y-axis scroll bar is not enabled just because of a few pixels.

Default: 0

---

Live Preview: https://lab.morioh.com/v-perfect-scrollbar

Source Code: https://github.com/Morioh-Lab/v-perfect-scrollbar

Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar

---

Recommended

☞ Smooth Scrollbar directive for Vue.js

☞ Quill Rich Text Editor component for Vue.js

☞ Markdown Editor component for Vue.js

☞ Simple notify handler component for Vue.js

☞ Lightbox Photo Grid and Slideshow component for Vue.JS

☞ Video Embed Component for Vue.JS

#vue.js #scrollbar #perfect-scrollbar #javascript

Smooth Scrollbar directive for Vue.js

What is smooth-scrollbar?

Smooth Scrollbar is a JavaScript Plugin that allows you customizing high perfermance scrollbars cross browsers. It is using translate3d to perform a momentum based scrolling (aka inertial scrolling) on modern browsers. With the flexible plugin system, we can easily redesign the scrollbar as we want. This is the scrollbar plugin that you’ve ever dreamed of!

Browser Compatibility

Browser	Version
IE	10+
Chrome	22+
Firefox	16+
Safari	8+
Android Browser	4+
Chrome for Android	32+
iOS Safari	7+

How to use vue smooth scrollbar

npm i @morioh/v-smooth-scrollbar

or

yarn add @morioh/v-smooth-scrollbar

Register

import Vue from 'vue'
import ScrollBar from '@morioh/v-smooth-scrollbar'

// global register
Vue.use(ScrollBar);

or use via CDN

<script src="https://cdn.jsdelivr.net/npm/@morioh/v-smooth-scrollbar/dist/scrollbar.min.js" type="text/javascript"></script>

unpkg CDN

<script src="https://unpkg.com/@morioh/v-smooth-scrollbar/dist/scrollbar.min.js" type="text/javascript"></script>

<div v-scrollbar style="height: 500px">
  <img src="https://i.imgur.com/vIhs3zq.jpg" style="width:100%">
</div>

Common mistakes

Initialize a scrollbar without a limited width or height
Likes the native scrollbars, a scrollable area means the content insides it is larger than the container itself, for example, a 500x500 area with a content which size is 1000x1000:

              container
                 /
       +--------+
  #####################
  #    |        |     #
  #    |        |     #
  #    +--------+     # -- content
  #                   #
  #                   #
  #####################

Therefore, it’s necessary to set the width or height for the container element:

<div v-scrollbar style="max-height: 500px; max-height:500px"></div>

<div v-scrollbar style="height: 500px; height:500px"></div>

Horizontal Scrollbar

<div v-scrollbar style="width: 300px;">
  <div>
    <img style="width:500px" src="https://i.imgur.com/vIhs3zq.jpg">
  </div>

</div>

If the container element is natively scrollable before initializing the Scrollbar, it means you are on the correct way.

Smooth Scrollbar directive options

<div v-scrollbar="{}" style="height: 500px;"></div>

parameter	type	default	description
damping	number	0.1	Momentum reduction damping factor, a float value between (0, 1), the lower the value is, the more smooth the scrolling will be (also the more paint frames).
thumbMinSize	number	20	Minimal size for scrollbar thumbs.
renderByPixels	boolean	true	Render every frame in integer pixel values, set to true to improve scrolling performance.
alwaysShowTracks	boolean	false	Keep scrollbar tracks always visible.
continuousScrolling	boolean	true	Set to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge.
wheelEventTarget	EventTarget	null	Element to be used as a listener for mouse wheel scroll events. By default, the container element is used. This option will be useful for dealing with fixed elements.

---

Demo: https://lab.morioh.com/v-smooth-scrollbar/

Source Code: https://github.com/Morioh-Lab/v-smooth-scrollbar

Smooth Scrollbar: https://github.com/idiotWu/smooth-scrollbar

---

Recommended

☞ Quill Rich Text Editor component for Vue.js

☞ Markdown Editor component for Vue.js

☞ Simple notify handler component for Vue.js

☞ Lightbox Photo Grid and Slideshow component for Vue.JS

☞ Video Embed Component for Vue.JS

#vue #scrollbar #smooth-scrollbar #vue.js

Scrollbar Widget In Flutter

Today mobile users expect their apps should have a beautiful UI design, smooth animations, and great performance. To achieve this developer needs to create a new feature without compromising on quality and performance. That’s why Google build Flutter.

Flutter allows you to make lovely, natively compiled applications. The explanation Flutter can do this is that Flutter loves Material. Material is a plan framework that helps assemble high-quality, digital encounters. As UI configuration keeps developing, Material keeps on refreshing its components, motion, and plan framework.

In

this article, I’ll explain how to show Scrollbar in a scrollable widget in Flutter. We’ll need enough information on a single screen. So, here we need something to scroll up and scroll down.

Table of Contents :

Flutter — Introduction

Widgets — Introduction

Scrollbar

Code Implementation

Code File

Conclusion

#flutter #dart #scrollbar