how to make listview to appear after animation in flutter

Viewed 41
class _YourAppState extends State<YourApp> with SingleTickerProviderStateMixin {
      late AnimationController _controller;
      bool isLoaded = false;
    
      @override
      void initState() {
        _controller = AnimationController(
          duration: const Duration(milliseconds: 100),
          vsync: this,
        );
        super.initState();
    
        _controller.addStatusListener((status) {
          if (status == AnimationStatus.completed) {
            setState(() {
              isLoaded = true;
            });
          }
        });
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    
      List<Datas> dataList = [];
      Future<List<Datas>> getinfo() async {
        try {
         
          //code 

            return dataList;
          }
        } catch (e) {
          print(e);
        }
        return dataList;
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: [
              Container(
                margin: EdgeInsets.all(18.0),
                width: double.infinity,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'My Queries',
                    style: TextStyle(
                        fontSize: 25.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black87),
                  ),
                ),
              ),
              Center(
                child: isLoaded
                    ? const Text('')
                    : Lottie.asset('assets/loading.json', controller: _controller,
                        onLoaded: (comp) {
                        _controller.duration = comp.duration;
                        _controller.forward();
                      }),
              ),
              Expanded(
                child: FutureBuilder(
                    future: getinfo(),
                    builder: (context, AsyncSnapshot<List<Datas>> snapshot) {
                      return ListView.builder(
                          shrinkWrap: true,
                          itemCount: dataList.length,
                          itemBuilder: (context, index) {
                            return Container()
                    }),
             
          ),

how to make expanded widget should come after completing the animation in center? Check center widget there I used condition but I don't know how to make expanded widget to come after animation how to make widget to come under if condition ? .....................................................Thank you...................

1 Answers

I am not sure did I get your question well, but from what I understood you are asking how to use if condition to show Expanded widget when that condition is true. That goes like this:

if(isLoaded) Expanded(
                child: FutureBuilder(
                    future: getinfo(),
                    builder: (context, AsyncSnapshot<List<Datas>> snapshot) {
                      return ListView.builder(
                          shrinkWrap: true,
                          itemCount: dataList.length,
                          itemBuilder: (context, index) {
                            return Container();
                          });
                    }),
              ),
Related