2

I've created a flutter app where I'm managing array for todolist in app. I've can add the text by add button.

I've created a widget to show in list. My question is how am i supposed manage the UI of individual.

Code:

import 'package:flutter/material.dart';

class TodoList extends StatefulWidget {
  _TodoListState createState() => new _TodoListState();
}

class _TodoListState extends State<TodoList> {
  List _list = new List();

  Widget listTile({String data: '[Empty data]'}) {
    bool _writable = false;
    TextEditingController _textController = new TextEditingController(text: data);
    String _text = _textController.text;
    if(!_writable){
      return new Row(
        children: <Widget>[
          new Expanded(
              child: new Text(data)
          ),
          new IconButton(icon: new Icon(Icons.edit),
              onPressed: () {
//                  setState(() {
                    _writable = ! _writable;
                    print(_writable.toString());
//                    });
                  }),
          new IconButton(icon: new Icon(Icons.remove_circle), onPressed: null),
        ],
      );
    } else {
      return new Row(
        children: <Widget>[
          new Expanded(
              child: new TextField( controller: _textController )
          ),
          new IconButton(icon: new Icon(Icons.done), onPressed: null),
        ],
      );
    }


  }

  void addInList(String string) {
    print(string);
    setState(() {
      _list.add(string);
    });
    print(_list);
  }
  void removeFromList(int index){

  }
  static final TextEditingController _textController = new TextEditingController();
  String get _text => _textController.text;


  @override
  Widget build(BuildContext context) {
    Widget adderTile = new Row(
      children: <Widget>[
        new Expanded(
          child:
          new TextField(
            textAlign: TextAlign.center,
            controller: _textController ,
            decoration: new InputDecoration( hintText: 'New item.!' ),
          ),
        ),
        new IconButton(icon: new Icon(Icons.add), onPressed: (){addInList(_text);}),
      ],
    );

    return new MaterialApp(
      title: 'TodoList',
      home: new Scaffold(
        appBar: new AppBar(title: new Text('TodoList'),),
        body: new Column(
          children: <Widget>[
            adderTile,
            new ListView.builder(
                shrinkWrap: true,
                itemCount: _list.length,
                itemBuilder: (context, int index){
                  return listTile(data: _list[index]);
                }
            ),
          ],
        ),
      ),
    );
  }
}

if i change _writable inside setState then it rerenders widget and _writable becomes false again. if i do it without setState, then _writable becomes true but widget doesn't rerender.

P.S.: i don't want to add another array in to manage which is writable and which is not. Thanks in advance.

2
  • You need to keep the state of which it writable/not somewhere! You don't want to keep that in an array, but you need to keep it somewhere. May 8, 2018 at 16:22
  • @RichardHeap i know. but i dont wonna keep it in array and creating only one bool in global will cause change to others. I'll try to create var in another widget class, which i hopefully would help. May 10, 2018 at 16:09

1 Answer 1

4

The variable

bool _writable = false;

is declared as local variable in the method listTile(), but should be moved next to List _list = new List(); to become a member variable. Then use setState() to set it and rebuild the view.

Edit: You should create a dedicated StatefulWidget (TodoListEntry), having _writable as member as suggested above. Move almost the whole method body of listTile(...) to the build()-method of the TodoListEntryState, make the parameter String data also a member and pass the value via the constructor.

3
  • Your answer is true in a way. but it will change for all listItems so, all Texts will be changed into editText. i want only for one which is clicked. May 10, 2018 at 15:55
  • so you mean that im supposed pass it in the statefulwidget object and pass those params in state class where build method is there? dont you think its pretty long way and i doubt that will it even work? May 14, 2018 at 13:54
  • I think that's a clear separation in the hierarchy and responsibility. You split the TodoList and the TodoListTile/Entry into separate widgets, then nesting the entries in the list. The _writable flag is then a member of the entry and not the list.
    – Felix
    May 14, 2018 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.