how to refresh ListView.builder flutter

Question

How can I refresh my ListView.builder when adding item to the list?

ListView.builder(
      itemCount: propList.length,
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      itemBuilder: (context,index)=> Text(propList[index]),
    )

my button is

FlatButton(onPressed: (){propList.add('text');}, child: Text('add'))

score 14 · Accepted Answer · answered Jan 27 '20 at 08:58

Assuming you've extended the StatefulWidget, you must call setState everytime you change the state. Ex:

setState(() { propList.add('text'); });

Here's a quick example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) => MaterialApp(home: MyList());
}

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  List<String> propList = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My List'),
      ),
      body: ListView.builder(
        itemCount: propList.length,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemBuilder: (context,index)=> Text(propList[index]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => propList.add('text')),
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

thank you a lots, that worked, and thank you to make it with an example. — Husamuldeen, Jan 27 '20 at 09:11
what about deleting? setState(() { propList.remove(widget.propName); }); that didn't work — Husamuldeen, Jan 27 '20 at 10:44
`remove` method takes the exact object that you want to remove. Or you can call `removeLast()` @Husamuldeen — Manish, Jan 27 '20 at 11:49
@VrajendraSinghMandloi You can use provider package and use future builder. Wrap ListView builder in `Cosumer` — Nikhil Badyal, Dec 12 '20 at 06:35

score 0 · Answer 2 · edited Mar 23 '22 at 04:22

0

You can try: onPressed: setState(() { propList.length; });

edited Mar 23 '22 at 04:22

MendelG

14,885
4
25
52

answered Jan 18 '22 at 12:55

TinhMercedes

1

Hyo · Answer 3 · 2022-11-12T15:12:31.827

0

Here I've created flat_list widget which has similar specifications as in React Native's FlatList. Below will simply work.

FlatList(
  onRefresh: () async {
    await Future.delayed(const Duration(seconds: 2));
  },
  data: items.value,
  buildItem: (item, index) {
    var person = items.value[index];

    return ListItemView(person: person);
  },
),

edited Nov 12 '22 at 15:12

answered Nov 12 '22 at 15:04

Hyo

1
2
13

how to refresh ListView.builder flutter

3 Answers3