Flutter Radio button text "kg" align problem?

Viewed 161

IMAGE LINK

As you can see in above picture "kg" text has huge gap. but the height text field widget is perfect. And it shows the following error.

Exception caught by widgets library

Incorrect use of ParentDataWidget.

Kindly let me know what is the problem

(I'm new to flutter)

      Material(
      elevation: 30.0,
      shadowColor: Colors.grey,
      child: Container(
        height: 100,
        width: 375,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.blue,
          ),           
        ),
        alignment: Alignment.topCenter,
        child: SizedBox(
          height: 300,
          width: 500,
          child: Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 300,
                  child: SingleChildScrollView(
                    child: TextField(                         
                      controller: weightcon,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 30,
                      ),
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Weight',
                        focusedBorder: OutlineInputBorder(
                          borderRadius: 
                           BorderRadius.circular(0.0),
                          borderSide: BorderSide(
                            color: Colors.black,
                            width: 2.0,
                          ),
                        ),             
                        enabledBorder: OutlineInputBorder(
                          borderRadius: 
                           BorderRadius.circular(0.0),
                          borderSide: BorderSide(
                            // color: Colors.redAccent[100],
                            color: Colors.black54,
                            width: 2.0,
                          ),
                        ),
                      ),
                      onChanged: (weightval) {
                        print('First text field: $weightval');
                        globals.weightvalue = 
                       double.parse(weightval);
                      },
                    ),
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                Container(
                  height: 130,
                  width: 30,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(
                          width: 30,
                          height: 50,
                          child: Flexible(
                            child: SizedBox(
                                child: Radio(
                              value: 0,
                              groupValue: 1,
                              onChanged: (value) {},
                            )),
                          )),
                      SizedBox(
                        width: 30,
                      ),
                      SizedBox(
                          child: Flexible(
                        child: Text("KG"),
                      ),),
                      Flexible(
                        child: SizedBox(
                            width: 30,
                            height: 25,
                            child: Radio(
                              value: 1,
                              groupValue: 1,
                              onChanged: (value) {},
                            )),
                      ),
                      SizedBox(
                        width: 30,
                      ),
                      SizedBox(
                          child: Flexible(
                        child: Text("LB"),
                      ),),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
2 Answers

Remove the height for sizedbox of radioButton, height takes the extra space

Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(
                              width: 30,
                              child: Flexible(
                                child: SizedBox(
                                    child: Radio(
                                  value: 0,
                                  groupValue: 1,
                                  onChanged: (value) {},
                                )),
                              )),
                          SizedBox(
                            width: 30,
                          ),
                          SizedBox(
                              child: Flexible(
                            child: Text("KG"),
                          ),),
                          Flexible(
                            child: SizedBox(
                                width: 30,
                                child: Radio(
                                  value: 1,
                                  groupValue: 1,
                                  onChanged: (value) {},
                                )),
                          ),
                          SizedBox(
                            width: 30,
                          ),
                          SizedBox(
                              child: Flexible(
                            child: Text("LB"),
                          ),),
                        ],
                      ),
                    ),
                  ],
                ),

Output

enter image description here

You used the Expanded Widget the wrong way! It must be the children of a Flex Widget (Row, Column, ListView, GridView, Wrap,...). As you can see, you wrote:

Expanded(
child: Row( // this is where the error pointing at
),
),

So to fix it, remove that Expanded Widget and use it as parent of the widgets in side the Row Widget. This is an example:

Row(
children: [
  Expanded( // Expanded Widget inside children parameter of Row Widget
child: Widget1(),
),
Expanded(
child: Widget2(),
),
],
),
Related