CODEWITHSUNDEEP
flutterdartstate-managementriverpod
noahfoe
noahfoe

Reputation: 37

Flutter: Type 'MyHomePage' is not a subtype of type 'Container' in type cast

Can anyone explain why I am getting this error and how to fix it?

I was using my _page() function to create my homepage, but now that I have created a new file for MyHomePage, it is giving me that type error. If I remove that "as Container" part of my context.read line, I get a different error.

I am a bit confused on the "as Container" part anyway, but I think it has to do with flutter 2.0, as it wasn't there until after I migrated to 2.0.

When looking into this error, I saw that I should try to restart the application, so I did that and it seemed to work, until I switch to a different page, and then try switching back to the home page, which is when I get the error.

I am not sure if this is important for this error, but I am using Riverpod for my state management.

my_drawer.dart:

class MyDrawer extends StatefulWidget {     
  MyDrawer({Key? key}) : super(key: key);     

  @override     
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {      
  Widget _homePage = MyHomePage();         
  Widget _galleryPage = _page(Colors.white, "Gallery");        
  Widget _bookAppPage = _page(Colors.white, "Book An Appointment");        
  Widget _aboutUsPage = _page(Colors.white, "About Us");        
  Widget _contactUsPage = _page(Colors.white, "Contact Us");      
  Widget _settingsPage = _page(Colors.white, "Settings");

  @override     
  void initState() {     
    super.initState();     
    WidgetsBinding.instance!.addPostFrameCallback((_) {      
      context.read(fragmentProvider).state = _homePage as Container;     
    });    
  } 

...
...
...

// Temp function to create the rest of the pages
_page(Color color, String title) {
  return Container(
    height: double.infinity,
    width: double.infinity,
    color: color,
    child: Center(
      child: Text(
        '$title',
        style: TextStyle(fontSize: 30, color: Colors.black),
      ),
    ),
  );
}

Here is MyHomePage class:

class MyHomePage extends StatefulWidget {       
  MyHomePage({Key? key}) : super(key: key);      

  @override      
  _MyHomePageState createState() => _MyHomePageState();       
}      

class _MyHomePageState extends State<MyHomePage> {            
  @override      
  Widget build(BuildContext context) {       
    return Scaffold(       
      appBar: MyAppBar(),      
      drawer: MyDrawer(),      
      body: Stack(       
        children: [       
          Text("Home"),       
          Consumer(       
            builder: (context, watch, _) {      
              final body = watch(fragmentProvider).state;       
              return body;     
            },    
          ),
        ],
      ),
    );
  }
}

Upvotes: 1

Views: 1391

Answers (3)

noahfoe
noahfoe

Reputation: 37

I have refactored my code in order to get the result that I was looking for. Instead of using Riverpod and trying to use state management to switch between pages, I opted for the built in Navigator and MaterialPageRoute widgets to navigate between pages in my drawer.

I replaced this code for each context.read() line.

Navigator.push(context, 
    MaterialPageRoute(builder: (context) => new MyHomePage()));

I removed the Consumer widget as well as all of the Widget _...Page = ...; lines. I also got rid of my _page() function and just went ahead and created basic pages for each page and then imported them into my_drawer.dart.

As Alex Hartford was saying in the comments, I was just over complicating everything by trying to use Riverpod to switch between each page.

After making these changes, the app behaves exactly as I need it to. Thanks to everyone who replied and helped me out. I really appreciate it!

Upvotes: 0

Gourango Sutradhar
Gourango Sutradhar

Reputation: 1619

From this code:

  context.read(fragmentProvider).state = _homePage as Container;

Replace the Container with Widget:

  context.read(fragmentProvider).state = _homePage as Widget;

Upvotes: 1

Ben Konyi
Ben Konyi

Reputation: 3219

You're trying to cast _homePage as a Container, but _homePage is an instance of MyHomePage which is a StatefulWidget. All your other pages are actually wrapped in Container, so those casts will succeed.

I'm not sure what the type of context.read(fragmentProvider).state is, so it's hard to say what's the actual fix here without more information.

Upvotes: 1

Related Questions