How to display image from Strapi into Flutter Application - flutter

Question

I have created strapi account and I want to load image from strapi Headless CMS to Flutter application. I am able to load data like bank name and descriptions, but I can't load image from strapi using http and getAll(). I'm not getting any error but I can't load image from strapi. Can you help me?
MY CODE IS HERE: (If you want, I can add imported libraries.)
`import 'package:flutter/material.dart';
import 'package:horizon/models/journey.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
class JourneyPage extends StatefulWidget {
#override
_JourneyPageState createState() => _JourneyPageState();
}
class _JourneyPageState extends State<JourneyPage> {
//Journeys journeys = Journeys(0, '', '', '');
List<Journey> journeys = [];
Future getAll() async {
var data = await http.get('http://localhost:1337/apis/');
var jsonData = json.decode(data.body);
for (var u in jsonData) {
journeys.add(
Journey(u['id'], u['imageUrl'], u['journeyName'], u['description']));
}
return journeys;
}
#override
Widget build(BuildContext context) {
return Container(
height: 400.0,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Journeys.',
style: TextStyle(
fontFamily: 'AvenirNextLTPro',
fontSize: 24.0,
letterSpacing: 1.5,
fontWeight: FontWeight.bold,
color: Colors.black),
),
ElevatedButton(
onPressed: () {
print('View all');
},
style: ElevatedButton.styleFrom(
side: BorderSide(color: Colors.black, width: 1.0),
primary: Colors.black),
child: Text(
'VIEW ALL',
style: TextStyle(
fontFamily: 'AvenirNextLTPro',
fontSize: 12.0,
letterSpacing: 1.5,
color: Colors.white),
),
),
],
),
),
SizedBox(height: 30.0),
Container(
margin: EdgeInsets.only(left: 12, right: 4),
height: 260.0,
color: Colors.white,
child: FutureBuilder(
future: getAll(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
child: Center(
child: Text('Loading...'),
));
} else {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 260.0,
margin: EdgeInsets.only(left: 12.0, right: 8.0),
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: Colors.grey),
),
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
bottom: 15.0,
child: Container(
width: 240.0,
height: 49.0,
color: Colors.white,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(snapshot.data[index].journeyName,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.normal,
letterSpacing: 1.1,
color: Colors.black)),
Text(
snapshot.data[index].description,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16.0,
color: Colors.black),
),
],
),
Icon(
Icons.bookmark_border,
size: 38,
color: Colors.black,
),
],
),
),
),
Container(
child: Stack(children: [
Image(
height: 260.0,
width: 260.0,
image:
AssetImage(snapshot.data[index].imageUrl),
),
]),
),
],
),
);
},
);
}
},
),
)
],
),
);
}
}
`
Here my class model
class Journey {
int id;
String imageUrl;
String journeyName;
String description;
Journey(
this.id,
this.imageUrl,
this.journeyName,
this.description,
);
}

Answer 1

Maybe works if you use Image.network() instead of AssetImage(), like this:
Image.network(url)