Question 79382 in Flutter Question posted in
The official Flutter documentation can be found here.

showModalBottomSheet bottom overflow – Flutter

i got overflow when textformfield opens in showModalBottomSheet, i tried to wrap my first column widget with SingleChildScrollView but it gives me a hidden modalBottomSheet same as ListView i tried to wrap it but all the data disappeared (empty white sheet)

showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    context: context,
    builder: (context) {
      return Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Expanded(
              child: Column(
                children: [
                  Row(
                    children: [
                      CircleAvatar(
                        radius: 22,
                        backgroundImage: NetworkImage(
                            '${SocialCubit.get(context).userModel!.image}'),
                      ),
                      SizedBox(
                        width: 15,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(10),
                          color: Colors.grey[350],
                        ),
                        child: Padding(
                          padding:
                              const EdgeInsets.all(8.0),
                          child: Column(
                            crossAxisAlignment:
                                CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: [
                                  Text(
                                    '${SocialCubit.get(context).userModel!.name}',
                                    style: TextStyle(
                                        fontSize: 15,
                                        fontWeight:
                                            FontWeight
                                                .bold),
                                  ),
                                  SizedBox(
                                    width: 7,
                                  ),
                                  Text(
                                    '2 minutes ago',
                                    style: TextStyle(
                                        fontSize: 11),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                  'whats up broo i need to ask you something'),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                  if (model.postImage != '')
                    Padding(
                      padding: const EdgeInsetsDirectional.only(top: 15,start: 67),
                      child: Container(
                          height: 140,
                          width: double.infinity,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            image: DecorationImage(
                              image: NetworkImage('${model.postImage}'),
                              fit: BoxFit.cover,
                            ),
                          )),
                    ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context)
                      .viewInsets
                      .bottom),
              child: Row(
                children: [
                  CircleAvatar(
                    radius: 18,
                    backgroundImage: NetworkImage(
                        '${SocialCubit.get(context).userModel!.image}'),
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius:
                            BorderRadius.circular(30),
                        color: Colors.grey[300],
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: TextFormField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Write your comment ...'
                          ),
                        ),

                      ),
                    ),
                  ),
                  IconButton(
                      onPressed: () {},
                      icon: Icon(IconBroken.Send)),
                ],
              ),
            ),
          ],
        ),
      );
    });

my problem (overflow)

i tried to wrap the column with ListView but i got no data as shown

this one with SingleChildScrollView,

Tags:

2

Answers


  1. 0

    you can directly install pub library to use modal
    https://pub.dev/packages/modal_bottom_sheet/install

    Login or Signup to reply.
  2. 0

    If you like to use SingleChildScrollView, remove Expanded from Column widget, You can think like, SingleChildScrollVew provides infinite height and Exapanded widget is trying to get infinite and this cause issue.

    You can follow this way

    showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    context: context,
    builder: (context) {
      return SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              Column(
                children: [
                  Row(
                    children: [
                      // CircleAvatar(
                      //   radius: 22,
                      //   backgroundImage: NetworkImage(
                      //       '${SocialCubit.get(context).userModel!.image}'),
                      // ),
                      SizedBox(
                        width: 15,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.grey[350],
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            crossAxisAlignment:
                                CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: [
                                  // Text(
                                  //   '${SocialCubit.get(context).userModel!.name}',
                                  //   style: TextStyle(
                                  //       fontSize: 15,
                                  //       fontWeight:
                                  //           FontWeight
                                  //               .bold),
                                  // ),
                                  SizedBox(
                                    width: 7,
                                  ),
                                  Text(
                                    '2 minutes ago',
                                    style: TextStyle(fontSize: 11),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                  'whats up broo i need to ask you something'),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: Row(
                  children: [
                    SizedBox(
                      width: 15,
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(30),
                          color: Colors.grey[300],
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 20),
                          child: TextFormField(
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: 'Write your comment ...'),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    });

    Also there is DraggableScrollableSheet you may like it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search