Image is a type of graphical visual representation of an object where we can see all the object details. In flutter we can add image locally using Image.asset() widget. Image widget comes with Flutter material.dart package. So in this tutorial we would Show Image From Local Assets Folder in Flutter Android iOS Example Tutorial.
Contents in this example Show Image From Local Assets Folder in Flutter Android iOS Tutorial:
1. Before getting started we need to first create and define the assets/images folder path in our project’s Pubspec.yaml file. This file contains useful information about our flutter project like project meta data and dependencies name. So open your Flutter project and Create a folder named as assets.
3. Now i am copying my sample image in this images folder. My image name is sample_image.jpg .You could use your own image here.
4. Open your Flutter project main directory and open Pubspec.yaml file in any code editor.
5. Find flutter block and put the assets/images folder path just below it.
|
1 2 3 |
flutter: assets: - assets/images/ |
6. Here is the complete source code of my Pubspec.yaml file after adding assets path.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
name: app description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter flutter: assets: - assets/images/ uses-material-design: true |
7. Now all the main steps done. Its time to start coding, Open your project’s lib/main.dart file.
8. Import material.dart package in your project.
|
1 |
import 'package:flutter/material.dart'; |
9. Call your main designing class using main function. In this case my main class name is MyApp.
|
1 |
void main() => runApp(MyApp()); |
10. Creating your main MyApp class extends with StatelessWidget. In below code i have adding the Application App bar, then starts the body section. In the body section first putting a layout named as Center which is our parent layout. In Center can hold only child so we would give it a Column named child. Column supports multiple children.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('My First App'), ), body: Center( child: Column( children: [ ], ), ))); } } |
11. Creating Image widget with assets() in Column parent. Here we are passing the local image path using assets syntax.
fit: BoxFit.fitWidth is used to set image width full as its parent layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('My First App'), ), body: Center( child: Column( children: [ Image.asset('assets/images/sample_image.jpg', fit: BoxFit.fitWidth), ], ), ))); } } |
12. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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('My First App'), ), body: Center( child: Column( children: [ Image.asset('assets/images/sample_image.jpg', fit: BoxFit.fitWidth), ], ), ))); } } |
Screenshot:
Thanks, especially for the full code views. 🙂
Quick and helpful tutorial