Flutter - ListView.builder 的渲染问题

Question

I am encountering a "RenderBox was not laid out" error with a custom Flutter widget that includes a 'ListView.builder' element, and I can't see what the problem is or how to fix it.

See the bottom section of the sample code shown below. If I comment out the 'ListView.builder' code block and replace it with the 'Text('Has members') then I don't get the error, hence it must be something to do with the ListView.builder.

Any suggestions?

class GroupMembershipSelector extends FormField<List<GroupMember>> {
  final BuildContext? parentContext;

  GroupMembershipSelector(
      {this.parentContext,
      FormFieldSetter<List<GroupMember>>? onSaved,
      FormFieldValidator<List<GroupMember>>? validator,
      List<GroupMember>? initialValue,
      AutovalidateMode autoValidate = AutovalidateMode.disabled})
      : super(
            onSaved: onSaved,
            validator: validator,
            initialValue: initialValue,
            autovalidateMode: autoValidate,
            builder: (FormFieldState<List<GroupMember>> state) {
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    TextButton.icon(
                      label: Text('Add to group'),
                      icon: Icon(Icons.add),
                      onPressed: () {
                        showModalGroupMemberForm(parentContext!, null)
                            .then((aNewMember) {
                          if (aNewMember != null) {
                            if (state.value == null) {
                              List<GroupMember> aList = [];
                              aList.add(aNewMember);
                              state.didChange(aList);
                            } else {
                              List<GroupMember> anExisting = state.value!;
                              anExisting.add(aNewMember);
                              state.didChange(anExisting);
                            }
                          }
                        });
                      },
                    ),
                    Flexible(
                        child: ( (state.value == null) || (state.value!.length == 0))
                            ? Text('No members')
                            // : Text('Has members'),
                      : ListView.builder(
                          itemCount: state.value!.length,
                          itemBuilder: (context, index) {
                            return Flexible(
                                child: ListTile(
                                    title: Text(state.value![index].email)));
                          }),
                    ),
                  ],
                ),
              );
            }) {}
}

Answer 1

Remove Flexible widget from ListTile . It will be

Flexible(
  child: ListView.builder(
    itemBuilder: (context, index) {
      return ListTile();
    },
  ),
)