Fixed sized button and expanded textfield inside Row Flutter-CodePudding

I want to develop a UI just like Postman Desktop App. But When I add a text field and fix the sized button in a row it gives an error RenderFlex children have non-zero flex but incoming width constraints are unbounded. But I don’t want to give a fixed size to the text field through MediaQuery. As you can see in this video (Demo UI) Postman text field size is fixed when the screen size decrease it shows a horizontal scrollbar. I want the same behavior. Here is the code.

      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              SingleChildScrollView(
                child: Container(
                  height: MediaQuery.of(context).size.height,
                  width: 300,
                  decoration:
                      BoxDecoration(border: Border.all(color: Colors.yellow)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.red)),
                        child: Image.network(
                          ImageURL,
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(
                child: Column(
                  children: [
                    Row(
                      children: <Widget>[
                        const Expanded(child: TextField()),
                        DarkButton("Save", () {}),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

CodePudding user response：

Add isDens = true in Textfield. Just like this:

Expanded(child: TextField(decoration: InputDecoration(isDense: true),)),

CodePudding user response：

this is because you use Expanded inside the SingleChildScrollView. You can not use Expanded inside the SingleChildScrollView because it covers the maximum width or height.

Just remove SingleChildScrollView error was gone.

you may use listview for this or use CustomScrollView for that