title: Draggable scroll bar into a DataTable in Flutter
body: <p>I have a DataTable with a SingleChildScrollView and it works fine, I can scroll with the mouse, but I would also like to have a draggable
  scroll bar, does anyone know how to do it?</p>
  <p>This is my DateTable with SingleChildScrollView Code:</p>
  <pre><code>    return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: SingleChildScrollView(
      child: DataTable(
        dataTextStyle:
            TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
        columns: [
          DataColumn(numeric: true, label: Text('Codigo')),
          DataColumn(label: Text('Nombre')),
          DataColumn(label: Text('Direccion')),
          DataColumn(label: Text('Telefono')),
          DataColumn(label: Text('Acciones')),
        ],
        rows: provider.sede.data
            .map((data) =&gt; DataRow(cells: [
                  DataCell(Text(data.codigo.toString())),
                  DataCell(
                    Text(data.nombre),
                  ),
                  DataCell(Text(data.direccion)),
                  DataCell(Text(data.telefono)),
                  DataCell(Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: &lt;Widget&gt;[
                        IconButton(
                          icon: Icon(Icons.edit),
                          iconSize: 20,
                          color: Colors.green,
                          splashRadius: 20,
                          tooltip: 'Editar',
                          onPressed: () {
                            Navigator.pushNamed(context, '/crearSedes',
                                arguments: {
                                  'direccion': data.direccion,
                                  'telefono': data.telefono,
                                  'nombre': data.nombre,
                                });
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.delete),
                          iconSize: 20,
                          color: Colors.red,
                          splashRadius: 20,
                          tooltip: 'Eliminar',
                          onPressed: () {
                            showAlertDialog(BuildContext context) {
                              Widget cancelButton = FlatButton(
                                child: Text(&quot;Cancelar&quot;),
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                              );
                              Widget continueButton = FlatButton(
                                child: Text(&quot;Eliminar&quot;),
                                onPressed: () {
                                  provider.EliminarSedes(
                                      data.codigo.toString());
                                  Navigator.of(context).pop();
                                  Scaffold.of(context).showSnackBar(SnackBar(
                                    elevation: 16.0,
                                    behavior: SnackBarBehavior.floating,
                                    duration: Duration(seconds: 2),
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(15)),
                                    ),
                                    backgroundColor: Colors.red,
                                    content: Text(
                                        &quot;Se ha eliminado la sede ${data.nombre}&quot;,
                                        style: TextStyle(
                                            fontStyle: FontStyle.italic,
                                            fontSize: 20)),
                                  ));
                                },
                              );
                              AlertDialog alert = AlertDialog(
                                title: Text(&quot;Eliminar&quot;),
                                content: Text(
                                    &quot;¿Seguro que quieres eliminar la sede ${data.nombre.toString()}?&quot;),
                                actions: [
                                  cancelButton,
                                  continueButton,
                                ],
                              );
                              showDialog(
                                context: context,
                                builder: (BuildContext context) {
                                  return alert;
                                },
                              );
                            }
  
                            showAlertDialog(context);
                          },
                        ),
                      ],
                    ),
                  )),
                ]))
            .toList(),
      ),
    ),
  );
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Mzo2l.jpg" rel="nofollow noreferrer">My DataTable</a></p>
  <p>I would like something like this on my DataTable</p>
  <p><a href="https://i.stack.imgur.com/aJtZK.jpg" rel="nofollow noreferrer">Draggable Scroll bar</a></p>
  <p>I tried it with draggable_scrollbar but I hadn't success, it's possible into a DataTable?
  May be I'm committing some mistake in the implementation.</p>