List View disappears after adding list tile inside a row FLUTTER

652 views Asked by At

Im working on an Edit User profile screen, and I need to create a Row which should take two RadioListTile widget for gender. but immediately after adding the row inside a list view everything disappears and I get this error

2: 'child.hasSize': is not true.
I/flutter (31410): Another exception was thrown: NoSuchMethodError: The
getter 'scrollOffsetCorrection' was called on null.
I/flutter (31410): Another exception was thrown: NoSuchMethodError: The
method 'debugAssertIsValid' was called on null.
I/flutter (31410): Another exception was thrown: NoSuchMethodError: The
getter 'visible' was called on null.

which I really don't understand, its works fine if I put them as direct children of my column widget, but I need the gender to be inside a row, tried searching for a solution but couldn't find any, Please help guys here is my code below

class EditUserProfile extends StatefulWidget {
  static String id = 'edit-profile';
  @override
  _EditUserProfileState createState() => _EditUserProfileState();
}

enum Gender { male, female }

class _EditUserProfileState extends State<EditUserProfile> {
  Gender _gender = Gender.male;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black),
        title: Text(
          "Edit Profile",
          style: TextStyle(color: Colors.black),
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RaisedButton(
              onPressed: null,
              child: Text('Done'),
            ),
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [
            InputField(
              icon: Icon(
                Icons.person,
                color: Colors.white,
              ),
              showText: true,
              labelText: 'Nickname',
              hintText: 'What do they call you?',
            ),
            SizedBox(
              height: 10,
            ),
            InputField(
              icon: Icon(
                Icons.phone_in_talk,
                color: Colors.white,
              ),
              showText: true,
              labelText: 'Mobile Number',
              hintText: 'How can people reach your cell?',
            ),
            SizedBox(
              height: 10,
            ),
            InputField(
              icon: Icon(
                FontAwesomeIcons.child,
                color: Colors.white,
              ),
              showText: true,
              labelText: 'Age',
              hintText: 'How old are you?',
            ),
            SizedBox(
              height: 10,
            ),
            InputField(
              icon: Icon(
                Icons.person,
                color: Colors.white,
              ),
              showText: true,
              labelText: 'Gender',
              hintText: 'Are you single or married?',
            ),
            SizedBox(
              height: 10,
            ),
            Expanded(
              child: Row(
                children: [
                  RadioListTile<Gender>(
                    title: Text('Male'),
                    value: Gender.male,
                    groupValue: _gender,
                    onChanged: (Gender value) {
                      setState(() {
                        _gender = value;
                      });
                    },
                  ),
                  RadioListTile<Gender>(
                    title: Text('Female'),
                    value: Gender.female,
                    groupValue: _gender,
                    onChanged: (Gender value) {
                      setState(() {
                        _gender = value;
                      });
                    },
                  ),
                ],
              ),
            ),
            InputField(
              icon: Icon(
                FontAwesomeIcons.locationArrow,
                color: Colors.white,
              ),
              showText: true,
              labelText: 'Lives In',
              hintText: 'Where do you reside',
            ),
            SizedBox(
              height: 10,
            ),
            InputField(
              icon: Icon(
                Icons.person,
                color: Colors.white,
              ),
              showText: true,
              labelText: 'Relationship Status',
              hintText: 'Are you single or married?',
            ),
            SizedBox(
              height: 10,
            ),
            Expanded(
              child: Row(
                children: [
                  RadioListTile<Gender>(
                    title: Text('Male'),
                    value: Gender.male,
                    groupValue: _gender,
                    onChanged: (Gender value) {
                      setState(() {
                        _gender = value;
                      });
                    },
                  ),
                  RadioListTile<Gender>(
                    title: Text('Female'),
                    value: Gender.female,
                    groupValue: _gender,
                    onChanged: (Gender value) {
                      setState(() {
                        _gender = value;
                      });
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I have tried giving my Column a Fixed height and width but still no luck.

child: Expanded(
          child: Container(
            width: double.infinity,
            height: 200,
            child: ListView(
              children: [
                InputField(
                  icon: Icon(
                    Icons.person,
                    color: Colors.white,
                  ),
2

There are 2 answers

0
Dave Davoucii On BEST ANSWER

Just in case any other person get stuck with this, I was able to make this work by wrapping my Row widget with IntrinsicHeight and also wraping each RadioListTile widget with Flexible. I was able to find help here. BoxConstraints forces an infinite width

class EditUserProfile extends StatefulWidget {
  static String id = 'edit-profile';
  @override
  _EditUserProfileState createState() => _EditUserProfileState();
}

enum Gender { male, female }

class _EditUserProfileState extends State<EditUserProfile> {
  Gender _gender = Gender.male;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black),
        title: Text(
          "Edit Profile",
          style: TextStyle(color: Colors.black),
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RaisedButton(
              onPressed: null,
              child: Text('Done'),
            ),
          )
        ],
      ),
      body: ListView(
        children: [
          InputField(
            icon: Icon(
              Icons.person,
              color: Colors.white,
            ),
            showText: true,
            labelText: 'Nickname',
            hintText: 'What do they call you?',
          ),
          SizedBox(
            height: 10,
          ),
          InputField(
            icon: Icon(
              Icons.phone_in_talk,
              color: Colors.white,
            ),
            showText: true,
            labelText: 'Mobile Number',
            hintText: 'How can people reach your cell?',
          ),
          SizedBox(
            height: 10,
          ),
          InputField(
            icon: Icon(
              FontAwesomeIcons.child,
              color: Colors.white,
            ),
            showText: true,
            labelText: 'Age',
            hintText: 'How old are you?',
          ),
          SizedBox(
            height: 10,
          ),
          InputField(
            icon: Icon(
              Icons.person,
              color: Colors.white,
            ),
            showText: true,
            labelText: 'Gender',
            hintText: 'Are you single or married?',
          ),
          SizedBox(
            height: 10,
          ),
          IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Flexible(
                  child: RadioListTile<Gender>(
                    title: Text('Male'),
                    value: Gender.male,
                    groupValue: _gender,
                    onChanged: (Gender value) {
                      setState(() {
                        _gender = value;
                      });
                    },
                  ),
                ),
                Flexible(
                  child: RadioListTile<Gender>(
                    title: Text('Female'),
                    value: Gender.female,
                    groupValue: _gender,
                    onChanged: (Gender value) {
                      setState(() {
                        _gender = value;
                      });
                    },
                  ),
                ),
              ],
            ),
          ),
          InputField(
            icon: Icon(
              FontAwesomeIcons.locationArrow,
              color: Colors.white,
            ),
            showText: true,
            labelText: 'Lives In',
            hintText: 'Where do you reside',
          ),
          SizedBox(
            height: 10,
          ),
          InputField(
            icon: Icon(
              Icons.person,
              color: Colors.white,
            ),
            showText: true,
            labelText: 'Relationship Status',
            hintText: 'Are you single or married?',
          ),
          SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}

0
Arsalan Umer On

add shrinkwrap = true in listview.