I have a problem adding an image to a flutter project - web

Question

I am experimenting with a flutter web project (might not make a difference but worth mentioning), i want to add an image but i get an error every time i try,
I have added the right assets to the pubspec.yaml file and the files are in the folder.
i have tried restarting my ide, and flutter clean.
There was no change at all.
class _homePageState extends State<homePage> {
#override
Widget build(BuildContext context) {
var textStyle = TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.w100,
);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: "MontSerrat"
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey[400],
title: Text("Example",
style: TextStyle(
color: Colors.black,
fontSize: 40,
fontWeight: FontWeight.w100,
),
)
),
body:
Container(
color: Colors.grey[400],
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/first_image.jpg')
],
),
)
),
);
}
}
the pubspec.yaml looks like:
name: epq_webapp
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0-dev.0.1 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.4.0
build_web_compilers: ^2.0.0
pedantic: ^1.0.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
flutter:
fonts:
- family: MontSerrat
fonts:
- asset: assets\fonts\montserrat\Montserrat-Regular.ttf
assets:
- assets/
- assets/images/first_image.jpg
i expect my code to display an image, however i get an error message,
Unable to load asset: assets/images/first_image.jpg

Answer 1

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.
flutter:
assets:
- assets/my_icon.png
- assets/background.png
make sure you have your image in the assets directory
then
Widget build(BuildContext context) {
// ...
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
// ...
),
// ...
),
);
//
}
You should get your image rendered

Answer 2

update your pubspec.yaml with this
`
fonts:
- family: MontSerrat
fonts:
- asset: assets\fonts\montserrat\Montserrat-Regular.ttf
uses-material-design: true <--- line added ---
assets:
- assets/
- assets/images/first_image.jpg
you could also check this it might help you out

Answer 3

I solved my problem by putting the assets under the web folder instead of the root of the project. then used
Image.asset(filename)
to display them.

Answer 4

Pubspec.yaml should be like:
flutter:
uses-material-design: true
assets:
- assets/images/
Code Snippet:
Center(
child: Image.asset(
'assets/images/account.png',
width: heartbeatAnimation.value,
height: heartbeatAnimation.value,
),
)
Output: