Fix - Flutter error type 'MyApp' is not a subtype of type 'StatelessWidget' in typecast

[Fix] Flutter error type ‘MyApp’ is not a subtype of type ‘StatelessWidget’ in typecast:

This error occurs while performing a hot reload in a Flutter app after you made some changes those can’t be update with hot reload. This is the full error message:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following _CastError was thrown building MyApp(dirty):
type 'MyApp' is not a subtype of type 'StatelessWidget' in type cast

When the exception was thrown, this was the stack:
#0      StatelessElement.widget (package:flutter/src/widgets/framework.dart:4824:46)
#1      StatelessElement.build (package:flutter/src/widgets/framework.dart:4827:21)
#2      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4754:15)
#3      Element.rebuild (package:flutter/src/widgets/framework.dart:4477:5)
#4      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2659:19)
#5      WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:882:21)
#6      RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5)
#7      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15)
#8      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1081:9)
#9      SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:862:7)
(elided 4 frames from class _RawReceivePortImpl, class _Timer, and dart:async-patch)

════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: type 'MyApp' is not a subtype of type 'StatelessWidget' in type cast

This is the error shown on console. You will see something like below in the emulator/simulator:

Cause of this error:

Before I move to the cause of this error, let me quickly explain the types of reloads Flutter provides:

1. Hot reload. It doesn’t rerun main or initState methods. The app state is preserved and loads the code changes and rebuilds the VM.
2. Hot restart. It loads the code changes and restarts the VM. It doesn’t preserve the state.
3. Full restart. It recompiles the code and restarts the application.

How to trigger reload:

After you run a app using flutter run, you can press the r key on the terminal to trigger a hot reload. It preserves the state and reloads the changes almost immediately. The console will show you a success message:

Performing hot reload...
Reloaded 2 of 122 libraries in 877ms.

You can also use the key combinations _⌘_ in Android Studio or IntelliJ-Idea and ⌃F5 in VSCode to trigger hot reload.

For hot restart, you can add shift key with the above combination i.e. _⇧⌘_ for Android Studio or IntelliJ-Idea and ⇧⌘F5 in VSCode.

For full restart, there is no shortcut. You need to stop the server and start it again.

Note that hot reload doesn’t work with web build currently.

Special cases with hot reload:

1. If the app is killed, hot reload will fail. For example, if the app was in background for a long time and the system killed it, hot reload will fail.
2. If it finds any compilation error, hot reload will work only after the error is fixed.
3. CupertinoTabView’s builder changes doesn’t work with hot reload. You need a hot restart.
4. If you switch between a regular class to enumerated type, hot reload will not work.
5. Hot reload doesn’t work with font change.
6. Hot reload doesn’t work if you change the generic type declaration.
7. Native code changes requires full restart to reflect.
8. Changing in initializers of global variables or static fields requires hot restart.
9. If you make changes in the main() or initState() method, hot reload will fail. These methods are not re-executed with hot reload. Hence, it will fail. You need a hot restart.

Overall, if you think that you are making changes that effects the current state or structure of the project, do a hot restart.

Solving the error ‘MyApp’ is not a subtype of type ‘StatelessWidget’ in typecast:

This cause of this error is point 9. If you change the MyApp class from stateless to stateful, it will throw this error.

To solve this issue, you can do a hot restart or full restart of the app.