CODEWITHSUNDEEP
layoutdarttableviewtextfieldflutter
Nicholas Jela
Nicholas Jela

Reputation: 2601

Flutter How to using text field inside ListTile?

I wanna implement a ListTile which in the tailing is a textfield, this is something like iOS static tableview, so that users can click it and directly edit text. How to do this in Flutter anyway?

Upvotes: 6

Views: 14125

Answers (3)

S.lahiru
S.lahiru

Reputation: 111

Try the following code:

ListTile(
  title: Text("Price"),
  trailing: SizedBox(
    width: MediaQuery.of(context).size.width * 0.2,
    child: TextField(),
  ),
),

Upvotes: 2

Nicholas Jela
Nicholas Jela

Reputation: 2601

For the future people may also have this trouble, here is the solution:

new ListTile(
        title: Text('签名'),
        trailing: new Container(
          width: 150.0,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              new Expanded(
                flex: 3,
                child: new TextField(
                  textAlign: TextAlign.end,
                decoration:
                    new InputDecoration.collapsed(hintText: '$userAddr'),
              ),
              ),
              new Expanded(
                child: new IconButton(
                icon: new Icon(Icons.chevron_right),
                color: Colors.black26,
                onPressed: () {},
              ),
              )
            ],
          ),
        ),
      ),

Always using a Expand for textfiled.

Upvotes: 11

Apoleo
Apoleo

Reputation: 2470

Right now, on V1.12 of flutter, you can put a Row in the title and populate it

ListTile(
        title: Row(
          children: <Widget>[
            Expanded(
              child: Text('签名')
            ),
            Expanded(
              child: TextField(
                // your TextField's Content
              ),
            ),
          ],
        ),
        trailing: IconButton(
            icon: new Icon(Icons.chevron_right),
            color: Colors.black26,
            onPressed: () {},
          )
        ),

Upvotes: 4

Related Questions