Блог

Я пытаюсь создать прокручиваемый ModalBottomSheet объект, который исчезает, когда я касаюсь вне модального.

Это код ModalBottomSheet :

 void _modalBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.5,
        builder: (BuildContext context, ScrollController controller) {
          return Container(
            padding: EdgeInsets.only(top: 30),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft:Radius.circular(40),
                topRight: Radius.circular(40)
              )
            ),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(10),
                  child: TextField(
                    focusNode: _focusNode,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(10),
                      hintText: 'Search people...'
                    ),
                    onChanged: (String change) => print(1)
                  )
                ),
                Expanded(
                  child: ListView.builder(
                    controller: controller,
                    padding: EdgeInsets.all(10),
                    itemCount:  filteredUsers.length,
                    itemBuilder: (BuildContext context, int index) {
                      return FlatButton(
                        onPressed: () {
                          collabsList.add(filteredUsers[index].name);
                          widget.changeCallback(collabsList);
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Padding(
                            padding: EdgeInsets.all(10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  filteredUsers[index].name,
                                  textAlign: TextAlign.left,
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.black
                                  )
                                ),
                                SizedBox(height: 5),
                                Text(
                                  filteredUsers[index].email,
                                  textAlign: TextAlign.left,
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Colors.grey
                                  )
                                )
                              ]
                            )
                          )
                        )
                      );
                    }
                  )
                )
              ]
            )
          );
        }
      );
    }
  );
}
  

Вы можете заставить модальный лист отклоняться, добавив свойство isDismissible: true showModalBottomSheet .

Также имейте в виду, чтобы установить expand: false в DraggableScrollableSheet .

Сделайте isDismissible:true и его можно отклонить

   showModalBottomSheet<void>(
  isDismissible:true ,