I am trying to wrap my code in a SingleChildScrollView. The code works until I add the SingleChildScrollView. I have searched and tried several suggestions on stackoverflow but can't seem to fully wrap my head around this. Perhaps someone could help me understand why I am getting an error. Here is the code.

body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 25.0,
                      ),
                      child: Row(
                        children: const [
                          Padding(
                            padding: EdgeInsets.fromLTRB(15, 10, 15, 20),
                            child: CircleAvatar(
                              radius: 25.0,
                              backgroundImage:
                                  AssetImage('assets/images/avatar.png'),
                            ),
                          ),
                          Text(
                            'Account Settings',
                            style: TextStyle(
                              fontSize: 20.0,
                              color: kCartellYellow,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                FutureBuilder<User>(
                    future: futureUser,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return Row(
                          children: [
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.stretch,
                                  children: [
                                    const Text(
                                      'Enter Your Phone Number.',
                                      style: TextStyle(
                                        fontSize: 20.0,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    const SizedBox(
                                      height: 25.0,
                                    ),
                                    TextField(
                                      controller: TextEditingController(
                                          text: snapshot.data!.phoneNo),
                                      decoration: kTextFieldDecoration.copyWith(
                                        labelText: 'Phone Number',
                                      ),
                                    ),
                                    const SizedBox(
                                      height: 25.0,
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.fromLTRB(
                                          15.0, 15.0, 15.0, 10.0),
                                      child: RoundedButton(
                                        onPressed: () => Navigator.pop(context),
                                        title: 'Submit',
                                        buttonColor: kCartellYellow,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        );
                      } else if (snapshot.hasError) {
                        return Center(
                            child: Text(
                                'Delivery error: ${snapshot.error.toString()}'));
                      } else {
                        return const Center(child: CircularProgressIndicator());
                      }
                    }),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Padding(
                        padding:
                            const EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 10.0),
                        child: RoundedButton(
                          onPressed: () => Navigator.pop(context),
                          title: 'Return',
                          buttonColor: kCartellBlue,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

I get this error: RenderFlex children have non-zero flex but incoming height constraints are unbounded.

CodePudding user response：

A fixed height is needed for the SingleChildScrollView to work.

Try wrapping it inside container with the height if double.maxFinite or any as per your need.

OR

You can also wrap it inside Expanded widget if column