thumbnail not displaying when i open view in flutter

Question

I am trying to display thumbnail of videos and i am fetching the thumbnail url from firebase and using Image.network to display them but the thumbnail are not displaying on the first they only came when i hot reload I am calling the fetch ThumbnailUrls like this

class _XtreamTubeState extends State<XtreamTube> {
  @override
  void initState() {
    super.initState();
    _fetchThumbnailUrls();
  }

I am displaying the thumbnails like this

  
class HomeScreen extends StatelessWidget {
  final List<String> thumbnailUrl;

  const HomeScreen({super.key, required this.thumbnailUrl});
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const CustomSliverTubeAppBar(),
          SliverList(
              delegate: SliverChildBuilderDelegate(
            (context, index) {
              final video = thumbnailUrl[index];
              print('video$video');

              return VideoContainer(videoUrl: video);
            },
            childCount: thumbnailUrl.length,
          ))
        ],
      ),
    );
  }
}

I have tried a lot of thing

Answer 1

i think in the build the thumbnailUrl list should not be empty and that is causing the improper rendering
so try this

Widget build(BuildContext context) {
  if (thumbnailUrl.isEmpty) {
    return ProgressIndicator(); // <--pass something to keep in rendering 
                                //untill thumbnailUrl.isEmpty is false
  } else {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const CustomSliverTubeAppBar(),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                final video = thumbnailUrl[index];
                print('video$video');
                return VideoContainer(videoUrl: video);
              },
              childCount: thumbnailUrl.length,
            ),
          ),
        ],
      ),
    );
  }
}

other approach :

Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder<List<String>>(
      future: _fetchThumbnailUrls(),
      builder: (context, snapshot) {
        if (thumbnailUrl.isEmpty) {
    return ProgressIndicator(); 
           } else {
          final thumbnailUrls = snapshot.data;
          return CustomScrollView(
            slivers: [
              const CustomSliverTubeAppBar(),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    final video = thumbnailUrls[index];
                    print('video$video');
                    return VideoContainer(videoUrl: video);
                  },
                  childCount: thumbnailUrls.length,
                ),
              ),
            ],
          );
        }
      },
    ),
  );
}