Wrapping widget in a row removes widget from screen-CodePudding

I'm trying to create a container that's half of it is a textfield and the other half is a text.

Something like this:

TEXTFIELD _________ TEXT

This is what I have, but nothing is showing on screen. Tried using Widget inspection but it won't work on VSCode for some reason (nothing is showing in the inspector pane).

What is wrong here?

Container(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                height: 44,
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                    color: const Color(0xFF3A4455),
                    borderRadius: BorderRadius.circular(8)),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: const [
                    TextField(
                      decoration: InputDecoration(
                        hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                        border: InputBorder.none,
                        hintText: 'Display Name',
                      ),
                    ),
                    Text(
                      "USERNAME",
                      style: TextStyle(
                        color: Color(0xFFf0f4ef),
                      ),
                    )
                  ],
                ),
              ),

CodePudding user response：

Try to wrap your Textfield inside

CodePudding user response：

This is happening because of TextField , just wrap the TextField with Expanded.

           Container(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              height: 44,
              margin: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: const Color(0xFF3A4455),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                        border: InputBorder.none,
                        hintText: 'Display Name',
                      ),
                    ),
                  ),
                  Text(
                    "USERNAME",
                    style: TextStyle(
                      color: Color(0xFFf0f4ef),
                    ),
                  ),
                ],
              ),
            ),

CodePudding user response：

This error is caused by InputDecorator, witch cannot have unbound width. Therefor its parent widget needs to set up the "space" that is provided to the Decorator. In this case the Text Widget. Just wrap your TextField widget in SizedBox and set it some width. (or in Expanded as provided above)

example:

Container(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          height: 44,
          width: 300,
          margin: const EdgeInsets.all(4),
          decoration: BoxDecoration(
              color: const Color(0xFF3A4455),
              borderRadius: BorderRadius.circular(8)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              SizedBox(
                width: 100,
                child: TextField(
                  decoration: InputDecoration(
                    hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                    border: InputBorder.none,
                    hintText: 'Display Name',
                  ),
                ),
              ),
              Text(
                "USERNAME",
                style: TextStyle(
                  color: Color(0xFFf0f4ef),
                ),
              )
            ],
          ),
        ),