The element type 'String' can't be assigned to the list type 'Widget' - flutter

Question

I'm new to flutter, would like to do a List to display the image and title in Grid View Builder however I met an error. I also have to call out the list however not sure what's the issue for the error which I'm don't know how to fix. Error coming out on the code with "appItem.items[i].appImage". Much appreciate your help!
List<AppProfile> get items {
return [..._items];
}
My array(still have quite a lot however only take these two for example)
List<AppProfile> _items = [
AppProfile(
appID: "",
title: "Whatsapp",
appImage: "assets/images/Materials-03.png",
appLink: "",
),
AppProfile(
appID: "",
title: "Wechat",
appImage: "assets/images/Materials-04.png",
appLink: "",
),
]
in my builder/ display file
Widget build(BuildContext context) {
final appItem = Provider.of<AppLogic>(context, listen: false);
return Scaffold(
appBar: AppBar(
title: const Text("Your Social Media"),
),
body:
Container(
child: GridView.builder(
padding: EdgeInsets.all(30),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 2 / 2,
crossAxisSpacing: 30, //spacing between column
mainAxisSpacing: 20,
),
itemCount: appItem.items.length,
itemBuilder: (ctx, i) {
return GestureDetector(
onTap: () {},
child: Column(
children: <Widget> [
**appItem.items[i].appImage**,
]
),
);
},
),
),
);
Error occurs
Error: Could not find the correct Provider above this SocialProfileScreen Widget
This happens because you used a BuildContext that does not include the provider
of your choice. There are a few common scenarios:
You added a new provider in your main.dart and performed a hot-reload.
To fix, perform a hot-restart.
The provider you are trying to read is in a different route.
Providers are "scoped". So if you insert of provider inside a route, then
other routes will not be able to access that provider.
You used a BuildContext that is an ancestor of the provider you are trying to read.
Make sure that SocialProfileScreen is under your MultiProvider/Provider.
This usually happens when you are creating a provider and trying to read it immediately.
For example, instead of:
Widget build(BuildContext context) {
return Provider<Example>(
create: (_) => Example(),
// Will throw a ProviderNotFoundError, because `context` is associated
// to the widget that is the parent of `Provider<Example>`
child: Text(context.watch<Example>()),
),
}
However in my home page have floating button
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
// "Navigator.push" returns a Future and "onPressed" accepts void
//so cannot directly use "Navigator" but if using () =>
//simply means that executing "Navigator..."
onPressed: () =>
Navigator.of(context).pushNamed(SocialProfileScreen.routeName),
),

Answer 1

The error occurs because your appItem.items[i].appImage returns a String instead of a Widget. In this case, you need to wrap it with a Widget that displays an image.
However, you can't use a String, double, bool or other variables into a list which is the Widgets list.
So you should add an Image.assets() widget or another one (which displays images), and give your image path.
Like:
Image.asset(appItem.items[i].appImage);