ScrollDirection：listview.builder 上的 Axis.horizo​​ntal 错误

Question

adding horizontal scroll direction makes my my code error and box.dart page pop up. i already try wrap in expanded, declare fix height, and couple more solution but still pop up the same error. i dont know why it happened. Below here is my fraction of code that triggered the error

                   Padding(
                      padding: const EdgeInsets.fromLTRB(20, 30, 20, 0),
                      child: Container(
                        width: double.infinity,
                        height: 90,
                        alignment: Alignment.center,
                        child: StreamBuilder<QuerySnapshot>(
                            stream: moduleListRef.snapshots(),
                            builder: (context, snapshot) {
                              if (!snapshot.hasData) {
                                return Center(
                                  child: CircularProgressIndicator(),
                                );
                              } else {
                                return ListView.builder(
                                    scrollDirection: Axis.horizontal, //this line triggered the error
                                    itemCount: snapshot.data?.docs.length,
                                    itemBuilder: (context, index) {
                                      int Total = snapshot.data?.docs[index]
                                          ['moduleTotal'];
                                      int Target = snapshot.data
                                          ?.docs[index]['moduleTarget'];
                                      return Padding(
                                        padding: const EdgeInsets.fromLTRB(
                                            20, 10, 20, 10),
                                        child: Card(
                                            child: ListTile(
                                          onTap: () {},
                                          title: Text(
                                            snapshot.data?.docs[index]
                                                ['moduleName'],
                                            style: TextStyle(
                                                fontSize: 20,
                                                fontWeight:
                                                    FontWeight.w600),
                                          ),
                                          subtitle: Text(
                                            'RM ' +
                                                Total.toString() +
                                                ' / ' +
                                                'RM ' +
                                                Target.toString(),
                                            style: TextStyle(
                                                fontSize: 18,
                                                fontWeight:
                                                    FontWeight.w400),
                                          ),
                                          trailing: IconButton(
                                            icon:
                                                Icon(Icons.add_box_rounded),
                                            iconSize: 35,
                                            onPressed: () {},
                                            color: Color(0xFF01B67E),
                                          ),
                                        )),
                                      );
                                    });
                              }
                            }),
                      ),
                    ),

This is the error that i got. its on box.dart page

assert(() {
      void throwError(DiagnosticsNode message) {
        throw FlutterError.fromParts(<DiagnosticsNode>[ //the error highligted on this line
          message,
          if (informationCollector != null) 
...informationCollector(),
          DiagnosticsProperty<BoxConstraints>('The offending 
constraints were', this, style: 
DiagnosticsTreeStyle.errorProperty),
        ]);
      }
      if (minWidth.isNaN || maxWidth.isNaN || minHeight.isNaN || 
maxHeight.isNaN) {
        final List<String> affectedFieldsList = <String>[
          if (minWidth.isNaN) 'minWidth',
          if (maxWidth.isNaN) 'maxWidth',
          if (minHeight.isNaN) 'minHeight',
          if (maxHeight.isNaN) 'maxHeight',
        ];
        assert(affectedFieldsList.isNotEmpty);
        if (affectedFieldsList.length > 1)
          affectedFieldsList.add('and 
${affectedFieldsList.removeLast()}');
        String whichFields = '';
        if (affectedFieldsList.length > 2) {
          whichFields = affectedFieldsList.join(', ');
        } else if (affectedFieldsList.length == 2) {
          whichFields = affectedFieldsList.join(' ');
        } else {
          whichFields = affectedFieldsList.single;
        }
        throwError(ErrorSummary('BoxConstraints has 
${affectedFieldsList.length == 1 ? 'a NaN value' : 'NaN values' } 
in $whichFields.'));
      }
      if (minWidth < 0.0 && minHeight < 0.0)
        throwError(ErrorSummary('BoxConstraints has both a 
negative minimum width and a negative minimum height.'));
      if (minWidth < 0.0)
        throwError(ErrorSummary('BoxConstraints has a negative 
minimum width.'));
      if (minHeight < 0.0)
        throwError(ErrorSummary('BoxConstraints has a negative 
minimum height.'));
      if (maxWidth < minWidth && maxHeight < minHeight)
        throwError(ErrorSummary('BoxConstraints has both width 
and height constraints non-normalized.'));
      if (maxWidth < minWidth)
        throwError(ErrorSummary('BoxConstraints has non- 
normalized width constraints.'));
      if (maxHeight < minHeight)
        throwError(ErrorSummary('BoxConstraints has non- 
normalized height constraints.'));
      if (isAppliedConstraint) {
        if (minWidth.isInfinite && minHeight.isInfinite)
          throwError(ErrorSummary('BoxConstraints forces an 
infinite width and infinite height.'));
        if (minWidth.isInfinite)
          throwError(ErrorSummary('BoxConstraints forces an 
infinite width.'));
        if (minHeight.isInfinite)
          throwError(ErrorSummary('BoxConstraints forces an 
infinite height.'));
      }
      assert(isNormalized);
      return true;
    }());

Answer 1

as per the documentation because your ListView has unbounded constraints so you must set ShirkWrap property true and there is no need to set container width to double.infinity ,

For more details about ShirkWrap