2

I have a screen where I need to search for a term from the Appbar, and the area below shows a Card with selections from the displayed list, and the area below that will show all the results returned, within a scrollable list.

pic

The problem is that although the items returned are placed in a ListView.builder and ScrollPhysics is on, the list is not scrollable. If I click on the Card and try to drag, it scrolls for a bit. But one cannot drag by clicking on the list, or items in it.

import '...';

class DiagnosisAdd extends StatefulWidget {
  @override
  _DiagnosisAddState createState() => _DiagnosisAddState();
}

class _DiagnosisAddState extends State<DiagnosisAdd> {
  TextField searchBar;
  TextEditingController searchTextController;
  Network connection;
  List<ICDCode> DiagnosisList;
  List<ICDCode> selectedDiagnoses;

  @override
  void initState() {
    connection = Network();
    DiagnosisList = [];
    selectedDiagnoses = [];
    // searchBar = A widget
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: searchBar,
      ),
      body: ListView(
        physics: AlwaysScrollableScrollPhysics(),
        shrinkWrap: true,
        children: [
          Card(
            child: ListTile(
              title: Text("Selected Diagnoses"),
              subtitle: Wrap(
                children: List.generate(
                  selectedDiagnoses.length,
                  (index) => Text(selectedDiagnoses[index].disease),
                  growable: true,
                ),
              ),
            ),
          ),
          ListView.builder(
            physics: AlwaysScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: DiagnosisList.length,
            itemBuilder: (BuildContext context, int position) {
              ICDCode codeDiagnosis = DiagnosisList[position];
              return RaisedButton(
                  child:
                      Text('${codeDiagnosis.code}, ${codeDiagnosis.disease}'),
                  onPressed: () {});
            },
          )
        ],
      ),
    );
  }

  Future searchDiagnosis(String text) async {
    if (text.length < 3) {
      return false;
    }
    var response = await connection.searchICDbyDisease(
      searchString: text,
    );
    final jsonResponse = await json.decode(response);
    List<ICDCode> diagnosis_list =
        await jsonResponse.map<ICDCode>((i) => ICDCode.fromJson(i)).toList();
    setState(() {
      DiagnosisList = diagnosis_list;
    });
  }
}

2 Answers 2

2

You can't scroll your ListView because you have another ListView.builder() inside that ListView that can be scrolled. You would have to make your ListView.builder() unscrollable:

ListView.builder(
            physics: NeverScrollableScrollPhysics(),
)

You cannot have two nested widgets that can scroll together at the same time. You would have to disable the nested widget from scrolling so that its the ListView that you scroll instead of ListView.builder()

Sign up to request clarification or add additional context in comments.

5 Comments

Also, shrinkWrapping your ListView.builder() is bad. You aren't making the ListView.builder() lazily build its children anymore since you are telling it to build everything first just to calculate its size. If I have a layout similar to yours, I would use Slivers. Check this out: youtube.com/watch?v=ORiTTaVY6mMhttps://www.youtube.com/…
Thank you. But if I dont add the shrinkWrap, I get the exception` ════════ Exception caught by rendering library ═════════════════════════════════════════════════════ RenderBox was not laid out: RenderViewport#242b7 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize'`
I solved it by using Slivers. ListViews and GridViews are Slivers under the hood. Also, did my answer solve your problem?
Can you kindly explain why and when ScrollPhysics need to be set, and why your suggestion of adding NeverScrollableScrollPhysics to ListView.builder works?
If you want to place RenderBox objects in the CustomScrollView, wrap it with SliverToBoxAdapter(). This is for slivers. There are also sliver equivalents for most common widgets like SliverPadding.
0

ListView.builder(

        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: DiagnosisList.length,
        itemBuilder: (BuildContext context, int position) {
          ICDCode codeDiagnosis = DiagnosisList[position];
          return RaisedButton(
              child:
                  Text('${codeDiagnosis.code}, ${codeDiagnosis.disease}'),
              onPressed: () {});
        },
      )
    ],
  ),
);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.