BoxConstraints has NaN values in minHeight and maxHeight

Question

I am using the responsive framework package. and this problem comes out :

The following assertion was thrown building Container(Alignment.center, constraints: BoxConstraints(w=100.0, NaN<=h<=NaN; NOT NORMALIZED), dirty): BoxConstraints has NaN values in minHeight and maxHeight. The offending constraints were: BoxConstraints(w=100.0, NaN<=h<=NaN; NOT NORMALIZED)

on this piece of code :

ResponsiveScaledBox(
    autoCalculateMediaQueryData: true,
    width: ResponsiveValue(context,
        defaultValue: 300,
        conditionalValues: [
            const Condition.equals(name: MOBILE, value: 100),
            const Condition.equals(name: TABLET, value: 200),
            const Condition.equals(name: DESKTOP, value: 300),
        ]).value.toDouble(),
    child: const SearchField()
),

and the custom search field :

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../../../../config/constants/radius_config.dart';
import '../../../../config/paths/assets_path.dart';
import '../../../../config/ui/font/text_style.dart';
import '../../../../config/ui/theme/color.dart';
import '../../../../lang/locale_keys.g.dart';

class SearchField extends StatelessWidget {
  const SearchField({super.key});

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: AppColors.grayShade4,
        hintText: LocaleKeys.searchDoctorSchedule.tr(),
        hintStyle: AppTextStyle.textfieldStyle(color: AppColors.whiteColor),
        suffixIcon: Padding(
          padding: const EdgeInsets.all(10),
          child: SvgPicture.asset(IconsPath.search),
        ),
        focusedBorder: OutlineInputBorder(
            borderRadius: textfieldRadius,
            borderSide: BorderSide.none,
            gapPadding: 8),
        enabledBorder: OutlineInputBorder(
            borderRadius: textfieldRadius,
            borderSide: BorderSide.none,
            gapPadding: 8),
      ),
    );
  }
}

I tried to put a SizedBox above the ResponsiveValue and specify the height and the width like this :

SizedBox(
    width: double.infinity,
    height: 70,
    child: ResponsiveScaledBox(
        autoCalculateMediaQueryData: true,
        width: ResponsiveValue(context,
            defaultValue: 300,
            conditionalValues: [
                const Condition.equals(name: MOBILE, value: 100),
                const Condition.equals(name: TABLET, value: 200),
                const Condition.equals(name: DESKTOP, value: 300),
            ]).value.toDouble(),
        child: const SearchField()),
),

but it didn't work.

Answer 1

Try this code

Add a height to the ResponsiveScaledBox or ensure that its parent provides valid height constraints.

ResponsiveScaledBox(
    autoCalculateMediaQueryData: true,
    width: ResponsiveValue(context,
        defaultValue: 300,
        conditionalValues: [
            const Condition.equals(name: MOBILE, value: 100),
            const Condition.equals(name: TABLET, value: 200),
            const Condition.equals(name: DESKTOP, value: 300),
        ]).value.toDouble(),
    height: 60, // Set a fixed height
    child: const SearchField(),
),

Update the SearchField to ensure it has intrinsic height. For instance, wrap the TextField in a ConstrainedBox:

@override
Widget build(BuildContext context) {
  return ConstrainedBox(
    constraints: BoxConstraints(
      minHeight: 60, // Minimum height
      maxHeight: 60, // Maximum height
    ),
    child: TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: AppColors.grayShade4,
        hintText: LocaleKeys.searchDoctorSchedule.tr(),
        hintStyle: AppTextStyle.textfieldStyle(color: AppColors.whiteColor),
        suffixIcon: Padding(
          padding: const EdgeInsets.all(10),
          child: SvgPicture.asset(IconsPath.search),
        ),
        focusedBorder: OutlineInputBorder(
            borderRadius: textfieldRadius,
            borderSide: BorderSide.none,
            gapPadding: 8),
        enabledBorder: OutlineInputBorder(
            borderRadius: textfieldRadius,
            borderSide: BorderSide.none,
            gapPadding: 8),
      ),
    ),
  );
}