CODEWITHSUNDEEP
flutterflutter-layout
Arslan Kaleem
Arslan Kaleem

Reputation: 1608

I want to create two text fields on screen first textfield should be defined size and second's height should be equals to remaining screen space

I want to achieve an layout in flutter in which first textfield is of defined height let suppose 16, and second textfield should cover all remaining space just like shown in the picture

Question

Now I have achieved this layout by wrapping textfield in expanded and giving it height of the screen and because of expanded widget it won't overflow. I know this is the bad approach but problem is when I start writing in textfield it starts writing on the bottom of textfield. Now if it is textfield or other widget in the picture which hint text is What's it for?. All in all how can I achieve this type of layout

Upvotes: 0

Views: 297

Answers (1)

Sam Chan
Sam Chan

Reputation: 1762

Would you mind try

       Scaffold(
        appBar: AppBar(
          title: Text("Test"),
        ),
        body: Column(
          children: [
            Container(height: 16, child: TextField()),
            Expanded(
                child: TextField(
              expands: true,
              minLines: null,
              maxLines: null,
              decoration: new InputDecoration(hintText: "What's it for?"),
            ))
          ],
        )

Upvotes: 1

Related Questions