Images not loading correctly on Carousel Slider in Flutter

Question

I do not know what is wrong with this image loading inside the slider , also I thought this has something to do with the debug but the release version has the same problem, overall all the pictures load slowly and have some delay but this problem is worse.

Container(
                margin: EdgeInsets.only(top: Platform.isAndroid ? 85.0 : 115.0),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CarouselSlider(
                          aspectRatio: 1.1,
                          viewportFraction: 0.6,
                          initialPage: 0,
                          enlargeCenterPage: true,
                          reverse: false,
                          autoPlay: false,
                          enableInfiniteScroll: false,
                          scrollDirection: Axis.horizontal,
                          onPageChanged: (index) {
                            if (!mounted) return;
                            setState(() {
                              _current = index;
                              SystemChrome.setEnabledSystemUIOverlays(
                                  [SystemUiOverlay.bottom]);
                            });
                          },
                          items: [
                            slides("words", "assets/images/Academic_Words.jpg", "Academic\n   Words", MyAppWords()),
                            slides("writing", "assets/images/writing.jpg", "Academic\n   Writing", MyAppWriting()),
                            slides("conference", "assets/images/conference.jpg", "Academic\nConference", EnterPhone()),
                            slides("conversation", "assets/images/conversations.jpg", "Academic\nConversations", null),
                            slides("correspondence", "assets/images/correspondence.jpg", "Academic\nCorrespondence", MyAppCorrespondence()),
                          ].map((imgUrl) {
                            return Builder(
                              builder: (BuildContext context) {
                                return Container(
                                    width: MediaQuery.of(context).size.width,
                                    alignment: Alignment.center,
                                    margin: EdgeInsets.symmetric(
                                        vertical: 20.0, horizontal: 9.0),
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(48.0),
                                        boxShadow: [
                                          BoxShadow(
                                            color:
                                                Color.fromRGBO(50, 50, 50, 1),
                                            blurRadius: 5.0,
                                            // has the effect of softening the shadow
                                            spreadRadius: 5.0,
                                            // has the effect of extending the shadow
                                            offset: Offset(
                                              -1.0,
                                              // horizontal, move right 10
                                              8.0, //
                                              // vertical, move down 10
                                            ),
                                          )
                                        ]),
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(48.0),
                                      child: imgUrl,
                                    ));
                              },
                            );
                          }).toList()),
                    ]),
                decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.vertical(top: Radius.circular(48.0)),
                  color: Color.fromRGBO(237, 237, 237, 1),
                ),
              ),
            ]);
          },
        ));

  }

   slides(String _tag,String _asset, String _title, Widget myF ){
    return GestureDetector(
      child: Stack(
        fit: StackFit.expand,
        alignment: Alignment.center,
        children: <Widget>[
          Hero(
            tag: _tag,
            child: Image.asset(
              _asset,
              fit: BoxFit.cover,
            ),
          ),
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.black45,
                  Colors.black54
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight
              ),
            ),
          ),

          Container(
              alignment: Alignment.center,
              child: Text(
                  _title,
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.w400,
                      fontFamily: "Raleway"),
                ),
              )
        ],
      ),
      onTap: () => Navigator.push(context,
          MaterialPageRoute(
              builder: (BuildContext context) {
                return myF;
              })),
    );
  }

here is a demonstration of my problem=> http://uupload.ir/view/k2ub_video_2019-10-22_10-14-47.mp4/

Answer 1

The behavior seems to be caused by the scaling of the large image. Since carousel_slider: 2.0.0, it's recommended to pass CarouselOptions to options - wherein you can define either the height or aspect ratio for the carousel items.