Flutter:Dynamically add / remove an item in listview on button click

Question

I am new to Flutter. My query is How can I dynamically add / remove an item in listview on button click. I tried but i got

error:RenderFlex children have non-zero flex but incoming height constraints are unbounded

My code

     Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
                child: SizedBox(
                  width: double.infinity,
                  height: 52,
                  child: RaisedButton(
                      //onPressed: () 
                     =>_onAlertWithCustomContentPressed(context),
                    onPressed:() =>call(),
                    child: Text(
                      "Add Article",
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                    color: Colors.green,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(6))),
                  ),
                ),
              ),

           new Expanded(
    child: new ListView.builder
      (
        itemCount: lItems.length,
        itemBuilder: (BuildContext ctxt, int Index) {
          return new Text(lItems[Index]);
        }
    )
)

can anybody help in this.Or can anyone please suggest which is best way for this task

Thanks in advance

Sathish

Answer 1

I know it's too late but maybe someone else is looking for the same answer, following code can help them.

use StatefullWidget so you can change the state later, and use setState((){} //your code here

)

import 'package:flutter/material.dart';

class MyListView extends StatefulWidget {
@override
_MyListViewState createState() => _MyListViewState();
 }

class _MyListViewState extends State<MyListView> {
final countries = [
'Pakistan',
'France',
'Spain',
'KSA',
'Brasil',
'Australia',
'UAE',
'USA',
'UK',
'India',
'Afghanistan',
'Bangladsh',
'Egypt',
'Pakistan',
'France',
'Spain',
'KSA',
'Brasil',
'Australia',
'UAE',
'USA',
'UK',
'India',
'Afghanistan',
'Bangladsh',
'Egypt'
];

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: ListView.separated(
        itemCount: countries.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(countries[index]),
          );
        },

        separatorBuilder: (context, index){

          return Divider();
  },
        ),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: addItem,
  ),
  );
   }


void addItem(){

setState(() {
  countries.add(countries[0]);
});

}

}

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  final List<String> names = <String>['Aby', 'Aish', 'Ayan', 'Ben', 'Bob', 'Charlie', 'Cook', 'Carline'];
  final List<int> msgCount = <int>[2, 0, 10, 6, 52, 4, 0, 2];

  TextEditingController nameController = TextEditingController();

  void addItemToList(){
    setState(() {
      names.insert(0,nameController.text);
      msgCount.insert(0, 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(20),
            child: TextField(
              controller: nameController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Contact Name',
              ),
            ),
          ),
          RaisedButton(
            child: Text('Add'),
            onPressed: () {
              addItemToList();
            },
          ),
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(8),
              itemCount: names.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 50,
                  margin: EdgeInsets.all(2),
                  color: msgCount[index]>=10? Colors.blue[400]:
                    msgCount[index]>3? Colors.blue[100]: Colors.grey,
                  child: Center(
                    child: Text('${names[index]} (${msgCount[index]})',
                      style: TextStyle(fontSize: 18),
                    )
                  ),
                );
              }
            )
          )
        ]
      )
    );
  }
}