CODEWITHSUNDEEP
dartflutter
Prashant Dhameja
Prashant Dhameja

Reputation: 85

State management in flutter

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.

Upvotes: 2

Views: 1839

Answers (1)

Felix
Felix

Reputation: 1007

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.

Upvotes: 4

Related Questions