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

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),
                    )
                  ),
                );
              }
            )
          )
        ]
      )
    );
  }
}

Answer 2

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 3

You can use this code to get add a new element in listview

  List<String> listObj = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: <Widget>[
            new FlatButton(
              onPressed: _insertNewObj,
              child: new Icon(Icons.add),
            )
          ],
        ),
        body: Column(
          children: <Widget>[
            new InkWell(
              onTap: _insertNewObj,
              child: new Container(
                width: double.infinity,
                alignment: Alignment.center,
                color: Colors.blue,
                padding: const EdgeInsets.all(20.0),
                child: new Text('Add new'),
              ),
            ),
            new Expanded(
              child: new ListView.builder(
                  itemCount: listObj.length,
                  itemBuilder: (BuildContext context, int index) => new Text(
                      'index ${index.toString()} with value ${listObj[index].toLowerCase()}')),
            ),
          ],
        ));
  }

  void _insertNewObj() {
    var rng = new Random();
    setState(() {
      listObj.add(rng.nextInt(100).toString());
    });
  }

import math for random no used to add in list array.

import 'dart:math';//for random no generation.