Flutter FlexibleSpaceBarSettings

Question

I get this problem when I navigate to MangaScreen() page. This page need an image.

final FlexibleSpaceBarSettings settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>()!;
        assert(
          settings != null,
          'A FlexibleSpaceBar must be wrapped in the widget returned by FlexibleSpaceBar.createSettings().',

This is the code :

import 'package:flutter/material.dart';
import 'package:manga_series/modules/manga/chapters.dart';
import 'package:manga_series/modules/manga/descreption.dart';

class MangaScreen extends StatelessWidget {
 final String mangaBanner;
 final String tag;

 MangaScreen({Key? key, required this.mangaBanner, required this.tag})
     : super(key: key);

 String descreption =
     "Lorem ipsum dolor sit amet, ea sed quis utinam invidunt, nec no tantas aeterno, at quot insolens mea. Dicta menandri per te, vim ad summo antiopam imperdiet, eu nostro repudiare cum. Ex aliquando eloquentiam quo, at mea quem phaedrum convenire. Eu vel legendos assentior repudiandae, vix te case accumsan suscipit.Tale etiam indoctum vel ei. Cu nam velit altera delectus. Graeci detraxit vix ad, an pri solum summo vivendo. Eu liber dolore intellegebat vis. Vis facilis suavitate instructior ut, et ullum periculis hendrerit vim. Te sonet albucius legendos mel, simul labores an vel.Lorem ipsum dolor sit amet, ea sed quis utinam invidunt, nec no tantas aeterno, at quot insolens mea. Dicta menandri per te, vim ad summo antiopam imperdiet, eu nostro repudiare cum. Ex aliquando eloquentiam quo, at mea quem phaedrum convenire. Eu vel legendos assentior repudiandae, vix te case accumsan suscipit.Tale etiam indoctum vel ei. Cu nam velit altera delectus. Graeci detraxit vix ad, an pri solum summo vivendo. Eu liber dolore intellegebat vis. Vis facilis suavitate instructior ut, et ullum periculis hendrerit vim. Te sonet albucius legendos mel, simul labores an vel.Lorem ipsum dolor sit amet, ea sed quis utinam invidunt, nec no tantas aeterno, at quot insolens mea. Dicta menandri per te, vim ad summo antiopam imperdiet, eu nostro repudiare cum. Ex aliquando eloquentiam quo, at mea quem phaedrum convenire. Eu vel legendos assentior repudiandae, vix te case accumsan suscipit.Tale etiam indoctum vel ei. Cu nam velit altera delectus. Graeci detraxit vix ad, an pri solum summo vivendo. Eu liber dolore intellegebat vis. Vis facilis suavitate instructior ut, et ullum periculis hendrerit vim. Te sonet albucius legendos mel, simul labores an vel.Lorem ipsum dolor sit amet, ea sed quis utinam invidunt, nec no tantas aeterno, at quot insolens mea. Dicta menandri per te, vim ad summo antiopam imperdiet, eu nostro repudiare cum. Ex aliquando eloquentiam quo, at mea quem phaedrum convenire. Eu vel legendos assentior repudiandae, vix te case accumsan suscipit.Tale etiam indoctum vel ei. Cu nam velit altera delectus. Graeci detraxit vix ad, an pri solum summo vivendo. Eu liber dolore intellegebat vis. Vis facilis suavitate instructior ut, et ullum periculis hendrerit vim. Te sonet albucius legendos mel, simul labores an vel.";

 @override
 Widget build(BuildContext context) {
   return DefaultTabController(
     length: 2,
     child: Scaffold(
       body: NestedScrollView(
         physics: NeverScrollableScrollPhysics(),
         headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
           return [
             SliverAppBar(
               backgroundColor: Colors.white,
               elevation: 1,
               bottom: PreferredSize(
                 preferredSize: Size.fromHeight(10),
                 child: Container(
                   decoration: BoxDecoration(
                       color: Colors.white,
                       borderRadius: BorderRadius.only(
                           topLeft: Radius.circular(20),
                           topRight: Radius.circular(20))),
                   child: Padding(
                     padding: EdgeInsets.only(top: 8, bottom: 10),
                     child: TabBar(
                         indicatorSize: TabBarIndicatorSize.label,
                         indicatorColor: Color.fromARGB(255, 6, 193, 71),
                         labelStyle: TextStyle(
                           fontSize: 17,
                           fontWeight: FontWeight.bold,
                         ),
                         labelColor: Color.fromARGB(255, 6, 193, 71),
                         unselectedLabelStyle: TextStyle(
                           fontSize: 15,
                         ),
                         unselectedLabelColor: Colors.grey,
                         tabs: [
                           Tab(text: "Descreption"),
                           Tab(text: "Chapters"),
                         ]),
                   ),
                 ),
               ),
               pinned: true,
               expandedHeight: 245,
               flexibleSpace: Hero(
                 tag: tag,
                 child: FlexibleSpaceBar(
                   background: mangaBanner != null
                       ? Image.asset(
                           mangaBanner,
                           height: 200,
                           fit: BoxFit.cover,
                         )
                       : Text("No Data"),
                 ),
               ),
             ),
           ];
         },
         body: TabBarView(
           physics: BouncingScrollPhysics(),
           children: [
             Descreption(),
             Chapters(),
           ],
         ),
       ),
     ),
   );
 }
}

Widget createButton({icon, color, text}) {
 return ButtonTheme(
   minWidth: 140,
   height: 45,
   child: FlatButton.icon(
     onPressed: () {},
     icon: icon,
     label: Text(
       text,
       style: TextStyle(color: Colors.white),
     ),
     color: color,
     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
   ),
 );
}

Answer 1

You shouldn't wrap the FlexibleSpaceBar in a Hero

Set it directly like so:

flexibleSpace: FlexibleSpaceBar(
                   background: mangaBanner != null
                       ? Image.asset(
                           mangaBanner,
                           height: 200,
                           fit: BoxFit.cover,
                         )
                       : Text("No Data"),
                 ),