表单颤动上的可拖动滚动条

Question

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(...),
            ),
          ),
        ),
      );
    }

Answer 1

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(); }, ), ), ), ), ), ); }

Answer 2

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. 🤷‍♂️