preload asset image flutter

Question

How can I precache my asset images which is used inside a ImageDecoration inside a AnimatedContainer? really stuck with this. Been trying to resolve this since hours but I could not get a solution to this. I need to precache image coz image does not load when swiped it is taking 2-3 seconds to load which I feel user might not like.

final PageController ctrl = PageController(viewportFraction: 0.8);

class PageViewContent extends StatefulWidget {
  @override
  _PageViewContentState createState() => _PageViewContentState();
}


class _PageViewContentState extends State<PageViewContent> {

  @override
  Widget build(BuildContext context) {
    return PageView(
      physics: const BouncingScrollPhysics(),
      controller: ctrl,
      children: <Widget>[
        GestureDetector(
          onTap: () {
            Navigator.push(
                context, new MaterialPageRoute(builder: (context) => Home3()));
          },
          child: Stack(
            children: <Widget>[
//              image1,
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeOutQuint,
                margin: EdgeInsets.only(top: 50, bottom: 80, right: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/med.jpg'),
                    )),

              ),
              Padding(
                padding:
                const EdgeInsets.only(top: 20.0, right: 35, bottom: 20),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Medicine Requests',
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontSize: 30,
                          fontFamily: 'Barlow'),
                    )),
              )
            ],
          ),
        ),
        GestureDetector(
          onTap: () {
//            print('pressed 1');
            Navigator.push(
                context, new MaterialPageRoute(builder: (context) => Home1()));
          },
          child: Stack(
            children: <Widget>[
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeOutQuint,
                margin: EdgeInsets.only(top: 50, bottom: 80, right: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/heart.jpg'),
                    )),
              ),
              Padding(
                padding:
                const EdgeInsets.only(top: 20.0, right: 35, bottom: 20),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Plasma Requests',
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontSize: 36,
                          fontFamily: 'Barlow'),
                    )),
              )
            ],
          ),
        ),
        GestureDetector(
          onTap: () {
            Navigator.push(
                context, new MaterialPageRoute(builder: (context) => Home2()));
          },
          child: Stack(
            children: <Widget>[
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeOutQuint,
                margin: EdgeInsets.only(top: 50, bottom: 80, right: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/hands.jpg'),
                    )),
              ),
              Padding(
                padding:
                const EdgeInsets.only(top: 20.0, right: 35, bottom: 20),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Plasma Donors',
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontSize: 36,
                          fontFamily: 'Barlow'),
                    )),
              )
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

try this :

precacheImage(AssetImage("path"), context);

Use it in initState method in _MyAppState class

You will notice more difference when you run the app in release mode