7

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'))

3 Answers 3

14

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.
    );
  }
}
5
  • 1
    thank you a lots, that worked, and thank you to make it with an example. Jan 27, 2020 at 9:11
  • what about deleting? setState(() { propList.remove(widget.propName); }); that didn't work Jan 27, 2020 at 10:44
  • remove method takes the exact object that you want to remove. Or you can call removeLast() @Husamuldeen
    – Manish
    Jan 27, 2020 at 11:49
  • how can Force Refresh be done on STATELESS widget.. Dec 5, 2020 at 17:45
  • @VrajendraSinghMandloi You can use provider package and use future builder. Wrap ListView builder in Cosumer Dec 12, 2020 at 6:35
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.