Search code examples
flutterflutter-layoutflutter-listview

how to delay data view 3 second in flutter


this my code

Container(
      child: Column(
        children: jobProvider.jobs
            .map(
              (job) => JobTile(job),
            )
            .toList(),
      ),
    )

how to load this data delay for 3 seconds ? here I display the listview data, before displaying it I want to display, the

return Container(
           child: ProfileShimmer(),
        );

Solution

  • Should be as easy as this:

    import 'package:flutter/material.dart';
    
    class PageWithDelayedView extends StatefulWidget {
      const PageWithDelayedView({Key? key}) : super(key: key);
    
      @override
      _PageWithDelayedViewState createState() => _PageWithDelayedViewState();
    }
    
    class _PageWithDelayedViewState extends State<PageWithDelayedView> {
      bool _initialized = false;
    
      @override
      void initState() {
        super.initState();
    
        // Schedule function call after the widget is ready to display
        WidgetsBinding.instance?.addPostFrameCallback((_) {
          _initialize();
        });
      }
    
      void _initialize() {
        Future<void>.delayed(const Duration(seconds: 3), () {
          if (mounted) { // Check that the widget is still mounted
            setState(() {
              _initialized = true;
            });
          }
        });
      }
    
      @override
      Widget build(BuildContext context) {
        if (!_initialized) {
          return Text('Hold on a bit');
        }
        return Text('Yay, I\'m ready!');
      }
    }