Scrollable Widget and Attributes

Scrollable content is a fundamental aspect of many Flutter applications. Flutter provides the Scrollbar widget to enhance the user experience by adding a scrollbar to scrollable widgets. In this blog post, we'll explore the Scrollbar widget, its key attributes, and provide a comprehensive example to illustrate its usage.

The Scrollbar widget in Flutter is used to add a scrollbar to a scrollable widget, making it easier for users to navigate through the content, especially when dealing with lengthy or large datasets.

Attributes of Scrollbar:

1. child (required):

   • The scrollable widget to which the scrollbar will be applied.

2. isAlwaysShown:

   • A boolean value indicating whether the scrollbar should always be visible or only appear during scrolling.

3. thickness:

   • The thickness of the scrollbar.

4. hoverThickness:

   • The thickness of the scrollbar when it is being hovered over.

5. radius:

   • The radius of the scrollbar thumb's rounded corners.

6. showTrackOnHover:

   • A boolean value indicating whether the scrollbar track should be visible when hovered over.

Example: Let's create a simple Flutter app that includes a Scrollbar for a ListView widget to demonstrate how the Scrollbar works.

// main.dart

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollbar Example'),
      ),
      body: Scrollbar(
        // Attributes for Scrollbar customization
        thumbVisibility: true,
        thickness: 10.0,
        radius: Radius.circular(8.0),
        trackVisibility: true,
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) => Column(
            children: [
              ListTile(
                title: Text(
                  '   Item $index',
                style: TextStyle(color:Color.fromARGB(255, 230, 181, 5),))
                ,
                tileColor: index % 2 == 0 ? Colors.white : Colors.grey[200],
                // Add a divider between items
                contentPadding: EdgeInsets.symmetric(vertical: 8.0),
              ),
              // Add a divider after each item, except the last one
              if (index < 99) Divider(height: 0.5, color: Colors.grey),
            ],
          ),
        ),
      ),
    );
  }
}