Flutter in Urdu | How to add image from assets Folder | Lecture 21
To add an image from the assets folder in a Flutter app, you first need to ensure that the image file is located in the assets directory within your Flutter project. Then, you can use the Image.asset widget to display the image. Here's a step-by-step guide:
Place the image in the assets folder:
Put the image file you want to use in the assets directory of your Flutter project. You can create an assets directory at the root of your Flutter project if it doesn't already exist.
Update the pubspec.yaml file:
Open the pubspec.yaml file in your Flutter project, and add an entry for the image file under the flutter section. Here's an example:
flutter:
assets:
assets/image_name.jpg
Replace assets/image_name.jpg with the path to your image file relative to the assets directory.
Run flutter pub get:
After updating the pubspec.yaml file, save the changes, and run flutter pub get either from the terminal or by clicking the "Pub get" button in your IDE. This command updates your project's dependencies based on the changes made in the pubspec.yaml file.
Use the Image.asset widget:
Add the Image.asset widget to your widget tree, providing the path to the image file within the assets directory as the assetName parameter:
Image.asset('assets/image_name.jpg')
Replace 'assets/image_name.jpg' with the path to your image file relative to the assets directory.
(Optional) Adjust image size and fit:
You can adjust the size and fit of the image by providing the width, height, and fit parameters to the Image.asset widget.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Image from Assets'),
),
body: Center(
child: Image.asset('assets/image_name.jpg'),
),
),
);
}
}
Here's a complete example:
Replace 'assets/image_name.jpg' with the actual path to your image file relative to the assets directory. This example displays the image centered within the Scaffold's body.