draggable scrollbar on form flutter

user_5373439 0
Viewed 5256

I'm trying to place a draggable scrollbar on my flutter Form, so the web users can click and drag to the screen bottom. The flutter Scrollbar class is fine for touchscreen devices, for mouses is not!

I've tried using draggable_scrollbar, however it only accepts ListView as child.

Here is my current code structure:

    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('My form'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Scrollbar(
            child: SingleChildScrollView(
              child: Form(...),
            ),
          ),
        ),
      );
    }
dart flutter
2 Answers

In Draggable Scrollbar you can try using ListView.builder with only 1 item which is your form, as shown below.

Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('My form'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Scrollbar(
            child: SingleChildScrollView(
              child: DraggableScrollbar.rrect(
                controller: myScrollController,
                child: ListView.builder(
                  controller: myScrollController,
                  itemCount: 1,
                  itemBuilder: (context, index) {
                    return Form();
                  },
                ),
              ),
            ),
          ),
        ),
      );
    }

user_92959590

This is achievable with draggable_scrollbar which you tried already. The idea is not to wrap the Form widget with it, but wrap its child widget which can be a list since Form expects a single child. Here is working example available in this live dart-pad.

The core idea is as follows.

  1. Create you Form widget as usual.
  2. Instead of creating a Column of form contents like TextFormField wrap them in ListView widget with its children as form fields.
  3. Create a ScrollController as required by the DraggableScrollBar.xyz of you choice and pass it this _myFormScrollController.
  4. Pass the same _myFormScrollController to the ListView's controller parameter.

This should enable a scrollable form with scrollbar.

        Form(
          key: _formKey,
          child: DraggableScrollbar.rrect(  
            controller: _scrollController,
            alwaysVisibleScrollThumb: true,
            child: ListView(
              controller: _scrollController,
              children: [
                ...List<Widget>.generate(15, (i) => TextFormField(
                  controller: TextEditingController()..text='Field $i',
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter some text';
                    }
                    return null;
                  },
                )),

              ],
            ),
          ),
        )

Some notes about the live dart-pad:

  • contains entire source of the draggable_scrollbar widget. All credit goes to it developer.
  • The code creates a new TextEditingContorller for each TextFormField which is not advisable. It serves only a cosmetic purpose in this example.
  • The core logic is only in the MainScreen widget

Note: I completely copied the draggable scroll bar code into the dartpad as its not possible to import packages in dartpad yet. ‍♂️

user_30439440
Related