Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 893
Nicholas Jela Avatar asked May 30 '18 14:05

Nicholas Jela


People also ask

How to display text in list tile in flutter?

Listtile is a material widget in flutter used to display some text and an icon or other widget. We can have the widget at the start or end of the title. The widget can be shown using leading or trailing property. List tile has two properties title and subtitle to display some text. The title is mandatory where the subtitle is optional.

What is listtile widget in flutter?

Flutter – ListTile Widget. ListTile widget is used to populate a ListView in Flutter. It contains title as well as leading or trailing icons. Let’s understand this with the help of an example.

What is a list row in flutter?

A single fixed-height row that typically contains some text as well as a leading or trailing icon. ListTile (Flutter Widget of the Week) A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters.

How to enable/disable the tap on the listtile in flutter?

body: ListTile ( title: Text ("Codesinsider"), subtitle: Text ("A blog for learning flutter"), leading: Icon (Icons.hourglass_empty), selected: true, onTap: () { setState ( () { }); }, ) We will use enabled property to enable/disable the tap on the ListTile. If we set false to enabled property it will disable the tap/click.


2 Answers

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.

like image 98
Nicholas Jela Avatar answered Sep 19 '22 13:09

Nicholas Jela


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: () {},
          )
        ),
like image 40
Apoleo Avatar answered Sep 17 '22 13:09

Apoleo