Search code examples
fluttervisual-studio-coderadio-buttonrowtextfield

Flutter How do add Text Field and Radio button in row?


Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Material(
              elevation: 30.0,
              shadowColor: Colors.grey,
              child: SizedBox(  
                width: 300,
                child: TextField(
                  controller: heightcon,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                  ),
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Height',

                    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.black54,
                        width: 2.0,
                      ),
                    ),
                  ),
                  onChanged: (heightval) {
                    print('First text field: $heightval');
                    globals.heightvalue = double.parse(heightval);
                  },
                ),
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
            
              children: <Widget>[
                Flexible(
                  child: SizedBox(
                      child: Radio(
                    value: 1,
                    groupValue: 1,
                    onChanged: (value) {},
                  )),
                ),
               
                SizedBox(
                  width: 10,
                ),
                
                SizedBox(
                    child: Flexible(
                  child: Text("Radio 1"),
                )),
                Flexible(
                  child: SizedBox(
                      child: Radio(
                    value: 1,
                    groupValue: 1,
                    onChanged: (value) {},
                  )),
                ),
                
                SizedBox(
                  width: 10,
                ),
                
                SizedBox(
                    child: Flexible(
                  child: Text("Radio 1"),
                ))

               
              ],
            ),
          ],
        ),

The error show like thid:

════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderFlex#c7c48 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was Scaffold lib\main.dart:25 ════════════════════════════════════════════════════════════════════════════════


Solution

  •   Container(
                        margin: EdgeInsets.symmetric(horizontal: 20),
                        width: MediaQuery.of(context).size.width / 2,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Text("gender"),
                            Radio(
                                value: "male",
                                groupValue: 1,
                                onChanged: (onChanged) {})
                          ],
                        ),