skip to Main Content

i have a question

here i am fetching data from api and i made a second page that i can post from my app in api .

when i post something and i come back to the main page that there is a lit of all of the post from my api , i need a refresh … when i refresh it the new post will be added but the refreshing circle won’t stop refreshing ..

i have no idea what to do ..

one place i read it’s because of set state that creates an infinitive loop .. but i my case i need the set state to update the ui .. please tell me what to do . please help me thank u .

this is my code :

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyPage(),
    );
  }
}

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final RefreshController _myrefreshcontroller = RefreshController();
  late List<Post>? listpost;
  @override
  void initState() {
    fetchAllPosts().then((value) => listpost = value);
    super.initState();
  }

  void _onRefresh() async {
    await fetchAllPosts().then((value) {
      setState(() {
        listpost = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('welcome welcome'),
      ),
      body: Center(
        child: FutureBuilder(
          future: fetchAllPosts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return SmartRefresher(
                controller: _myrefreshcontroller,
                onRefresh: _onRefresh,
                child: ListView.builder(
                  itemCount: listpost!.length,
                  itemBuilder: (context, index) {
                    return Card(
                      child: ListTile(
                        contentPadding: const EdgeInsets.all(20),
                        title: Padding(
                            padding: const EdgeInsets.all(20),
                            child: Text(listpost![index].id.toString())),
                        subtitle: Padding(
                            padding: const EdgeInsets.all(20),
                            child: Text(listpost![index].content.toString())),
                      ),
                    );
                  },
                ),
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return const CircularProgressIndicator();
          },
        ),
      ),

2

Answers


  1. It might be because of SmartRefresher, I don’t know why you didn’t use the normal RefreshIndicator widget. This works fine for me, even with the setState()

    Future<void> delay() async {
       await Future.delayed(Duration(seconds: 4)).then((value) {
         setState(() {});
       });
    }
    
    ...
    child: RefreshIndicator(
      onRefresh: delay,
      child: child,
    ),
    ...
    
    Login or Signup to reply.
  2. The problem is that you are executing fetchAllPosts(), You should pass this function as parameter to the future method of FutureBuilder like this:

    future: fetchAllPosts,

    but what is really passed and it’s wrong is this :

    future: fetchAllPosts()

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search