Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 392
sathish kumar Avatar asked Sep 05 '25 17:09

sathish kumar


2 Answers

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

}

}
like image 74
Akhlaq Shah Avatar answered Sep 07 '25 16:09

Akhlaq Shah


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),
                    )
                  ),
                );
              }
            )
          )
        ]
      )
    );
  }
}
like image 44
Malek Tubaisaht Avatar answered Sep 07 '25 16:09

Malek Tubaisaht