To create a widget to fit on the screen in Flutter

I would like to expand the TextField to the maximum space except for other widgets, such as a text editor.

So I wrote the following code, but adjusting maxlines changes the height of the TextField, but the height of each device changes, and the height of the display area changes when I display the keyboard, so I want to fit the TextField according to the device and the status.

What kind of code should I write to fit the display?

@override
  Widget build (BuildContext context) {
    US>return Scaffold(
      appBar —AppBar(
        title:Text("TEST"),
      ),
      body: Center(
        child —Column(
          children:<Widget>[
            Text(
              'TEXT',
            ),
            Scrollbar(
              child —New SingleChildScrollView(
                scrollDirection: Axis.vertical,
                reverse —true,
                child —SizedBox(
                  child —TextField(
                    maxLines —10,
                    decoration —new InputDecoration(
                      contentPadding —EdgeInsets.all (20.0),
                      border —InputBorder.none,
                      hintText: 'Add your text here',
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Column(
        mainAxisAlignment —MainAxisAlignment.end,
        mainAxisSize—MainAxisSize.min,
        children: [
          SizedBox(
            width —double.infinity, // match_parent
            child —RaisedButton(
              onPressed:() {},
              child —Text(
                "BUTTON",
                style:TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

android flutter dart

2022-09-30 14:36

1 Answers

I wonder if this is the image like this.I hope this will work out as you wish.

return Scaffold(
      appBar —AppBar(
        title:Text("TEST"),
      ),
      body: Center(
        child —Column(
          children:<Widget>[
            Text(
              'TEXT',
            ),
            // Maximize Container
            Expanded( 
              // Place Scrollbar or lower in Container
              child —Container( 
                alignment —Alignment.topCenter,
                child —Scrollbar(
                  child —New SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    reverse —true,
                    child —TextField(
                      autofocus —true,
                      // Make maxLines unlimited null
                      maxLines: null,
                      decoration —new InputDecoration(
                        contentPadding —EdgeInsets.all (20.0),
                      border —InputBorder.none,
                        hintText: 'Add your text here',
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Column(
        mainAxisAlignment —MainAxisAlignment.end,
        mainAxisSize—MainAxisSize.min,
        children: [
          SizedBox(
            width —double.infinity, // match_parent
            child —RaisedButton(
              onPressed:() {},
              child —Text(
                "BUTTON",
                style:TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );

2022-09-30 14:36

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656