RenderFlex children have non-zero flex error with textfield flutter

user_9187265 0
Viewed 43

I'm trying to create this design: https://www.uplabs.com/posts/public-transport-app-design?utm_source=extension&utm_medium=click&utm_campaign=muzli (the top of the first one)

But i'm having this issue: renderflex children have non-zero flex but incoming height constraints are unbounded

This is my code:

Scaffold(
  body: Container(
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      children: [
        Positioned(
            left: 0,
            right: 0,
            child: Container(
              width: double.maxFinite,
              height: MediaQuery.of(context).size.height / 1.5,
              decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("assets/images/abstract2.jpg"),
                      fit: BoxFit.cover)),
            )),
        Positioned(
            left: 0,
            top: 5,
            child: SizedBox(
              height: 20.0,
              child: Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: const [
                    Expanded(child: TextField()),
                    Icon(Icons.person)
                  ],
                ),
              ),
            )),

The thing is when I remove replace the TextField() with Text(), the error disapear. I don't know what i'm doing wrong. Can you help me please ? Thanks

dart flutter
2 Answers

try this.

Stack(
        children: [
          /// this is usefull cause it says that the stack will cover all of the screen
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
          ),
          ///place your image here
          Container(
            height: MediaQuery.of(context).size.height*0.5,
            decoration: const BoxDecoration(color: Colors.red),
            // decoration: const BoxDecoration(
            //     image: DecorationImage(
            //         image: AssetImage("assets/images/abstract2.jpg"),
            //         fit: BoxFit.cover)),
          ),

          ///text field ned a width or to be flexible to work.
          Positioned(
            width: MediaQuery.of(context).size.width,
            top: MediaQuery.of(context).size.height *0.3,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: TextFormField(
                    maxLines: 1,
                    keyboardType: TextInputType.multiline,
                    textInputAction: TextInputAction.next,
                    decoration: InputDecoration(
                      fillColor: StyleConstants.whiteColor,
                      filled: true,
                      border: StyleConstants.defaultBorder,
                      focusedBorder: StyleConstants.focusedBorder,
                      enabledBorder: StyleConstants.defaultBorder,
                      contentPadding: const EdgeInsets.symmetric(
                          vertical: 20.0, horizontal: 20.0),
                    ),
                  ),
                ), Icon(Icons.person)],
            ),
          )
        ],
      )
user_137498110

Try this buddy, I think the problem is caused by using expanded in sizedbox. I usually get this error when I use a TextField in a Row. In such cases, you need to wrap the TextField in a SizedBox or Container and define its width and height, or wrap it in a Flexible Widget. Then it is resolved.

        child: SizedBox(
          height: 20.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Expanded(child: TextField()),
                Icon(Icons.person)
            ],
          ),
user_108151530
Related