skip to Main Content

I tried to make both equal height but its only applicable to one device, but for diff devices its changing

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "Age",
            ),
            SizedBox(
                height: DeviceSize.isTablet ? 12 : 6),
            TextFormField(
              controller: ageController,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: "Age",
                isDense: true,
                errorText: ageErrorMessage,
              ),
            ),
          ],
        ),
      ),
      const SizedBox(width: 12),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Gender",
              style: textStyle,
            ),
            SizedBox(
                height: DeviceSize.isTablet ? 12 : 6),
            DropdownButtonHideUnderline(
              child: DropdownButtonFormField<String>(
                isExpanded: true,
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    contentPadding: EdgeInsets.symmetric(
                        horizontal: 8.0, vertical: 14.5)),
                hint: Text(
                  'Gender',
                  style: textStyle,
                ),
                value: selectedGender,
                validator: validate,
                borderRadius: BorderRadius.circular(20),
                items: genders.map((String gender) {
                  return DropdownMenuItem<String>(
                    value: gender,
                    child: Text(
                      gender,
                      style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w400),
                    ),
                  );
                }).toList(),
                onChanged: (String? value) {},
              ),
            ),
          ],
        ),
      )
    ],
  ),
),

I tried sizedbox, Container also, even dropdown button etc etc, but no effect. Can you help to make height of both widgets same.

I need proper and good way to align their heights for all devices.

2

Answers


  1. you can try using a fixed height for both TextField and Dropdown

    Login or Signup to reply.
  2. You can use the MediaQuery to adapt your height to all devices, example:

    MediaQuery.of(context).size.height * 0.3
    

    But i had used your code to replicate the error and didnt it happening, you can pass all your code to me and i will try replicate the error again, or watch the IntrinsicHeight parent if it have, or some other widget can affect your height and crash your programm, below is the code with a print that worked.

    class HomePage extends StatefulWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      State<HomePage> createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
    
      TextEditingController ageController = TextEditingController();
      String ageErrorMessage = 'Invalid age';
      var selectedGender = 'Male';
      List<String> genders = ['Male', 'Female'];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body:IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        "Age",
                      ),
                      SizedBox(
                          height: 12 ),
                      TextFormField(
                        controller: ageController,
                        decoration: InputDecoration(
                          border: const OutlineInputBorder(),
                          hintText: "Age",
                          isDense: true,
                          errorText: ageErrorMessage,
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Gender",
                        //style: textStyle,
                      ),
                      SizedBox(
                          height: 12 ),
                      DropdownButtonHideUnderline(
                        child: DropdownButtonFormField<String>(
                          isExpanded: true,
                          decoration: const InputDecoration(
                              border: OutlineInputBorder(),
                              contentPadding: EdgeInsets.symmetric(
                                  horizontal: 8.0, vertical: 14.5)),
                          hint: Text(
                            'Gender',
                            // style: textStyle,
                          ),
                          value: selectedGender,
                          //validator: validate,
                          borderRadius: BorderRadius.circular(20),
                          items: genders.map((String gender) {
                            return DropdownMenuItem<String>(
                              value: gender,
                              child: Text(
                                gender,
                                style: TextStyle(
                                    fontSize: 14.0,
                                    fontWeight: FontWeight.w400),
                              ),
                            );
                          }).toList(),
                          onChanged: (String? value) {},
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      }
    }
    

    app running

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search