SingleChildScrollView not working properly when wrapping a Column

Question

Im trying to show a Dialog with some information about a certain card, onTap the dialog will show

im trying to build something that only a part of the body can move, but not the whole dialog

below is what i meant in visuals... (due to privacy i need to blur some data)

below is a snippet of my code,

....
Column(children : [ Divider (...
                                 ),
                    SingleChildScrollView(
                      child: Container(
                        child: Column(
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(5.0),
                            ),
                            Center(
                              child: Padding(
                                padding: const EdgeInsets.only(
                                    left: 16.0, right: 16.0, top: 5.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Colors.white,
                                          style: BorderStyle.solid)),
                                  child: Column(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.all(5.0),
                                        child: Text(
                                          bibletitle
                                              .split(
                                                  new RegExp(r'(?:\r?\n|\r)'))
                                              .where(
                                                  (s) => s.trim().length != 0)
                                              .join(' '),
                                          style: TextStyle(
                                              color: Colors.yellow[600],
                                              fontSize: 25,
                                              fontFamily: 'Bebas Neue'),
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Text(
                                          mainbibleverse,
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 15,
                                              fontStyle: FontStyle.italic),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(12.0),
                              child: Text(
                                notes,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  fontFamily: 'Spartan'
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                   ])

How can i add the scroll? i only want the scroll to happen at the red box

Answer 1

If you want your scrolling section to take the rest of the space in parent, then you should wrap it in a Expanded widget and that will fix your current issue.

Expanded(
  child: SingleChildScrollView(),
)