CODEWITHSUNDEEP
flutterdart
Aquarius_Girl
Aquarius_Girl

Reputation: 22946

Add TextField in a ButtonBar in Flutter

I used ButtonBar to arrange button in a row inside a Column.

In the ButtonBar I have put a TextField:

              ButtonBar
              (
                mainAxisSize: MainAxisSize.min,
                children: <Widget>
                [
                  Expanded(
                      child: TextField(
                         maxLines: 8,
                         decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
                      ),
                  ),
                ],
              ),

This ButtonBar is in a Column. I am able to display normal buttons and text this way. Only this TextField is creating problems:

════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#3888e NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
TextField
lib/main.dart:138`

Upvotes: 0

Views: 276

Answers (3)

Aizaz ahmad
Aizaz ahmad

Reputation: 61

Please use put Textfield in Container and give them width and height like this :

ButtonBar(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  height: 60,
                  width: 200,
                  child: TextField(
                    maxLines: 8,
                    decoration: InputDecoration.collapsed(
                        hintText: "Enter your text here"),
                  ),
                ),
              ],
            ),

Upvotes: 1

Lang Minh Nguy&#234;n
Lang Minh Nguy&#234;n

Reputation: 5535

You can wrap TextField in ConstrainedBox, like this:

ConstrainedBox(
      constraints: BoxConstraints(
         maxHeight: 40 ,
         maxWidth: MediaQuery.of(context).size.width,
         ),
      width: MediaQuery.of(context).size.width,
      child: TextField(
        decoration: InputDecoration(),
      ),
    );

Upvotes: 1

Hemal Moradiya
Hemal Moradiya

Reputation: 2077

You can use like this

SizedBox(
      height: 40,
      width: MediaQuery.of(context).size.width,
      child: TextField(
        decoration: InputDecoration(),
      ),
    );

Upvotes: 1

Related Questions