How To Add Asset And Image In flutter Using Android

admin_img Posted By Bajarangi soft , Posted On 22-09-2020

Asset images are present in the asset bundle of the app. They are deployed with app and are readily available during run-time. Asset images can be displayed using the Image class in flutter.

Add Image Assets in Flutter app

Following is an Android UI screenshot when you run this application on an Android device.

Step 1
 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown      in the image. Now add the image inside the newly created assets directory.

 Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
flutter: 
  assets: 
   - assets/images/image.png 

Step 3
we can do the coding to display our asset image.
 
Container(
  child: Image.asset(
      'assets/images/image.jpg',
      width: 350,
      height: 300,
      fit:BoxFit.fill
  ),
),


Complete Code  image assets in flutter
Main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Image From Assets'),
        backgroundColor: Colors.black,
      ),
      body: Container(
        child: Image.asset(
            'assets/images/image.jpg',
            width: 350,
            height: 300,
            fit:BoxFit.fill
        ),
      ),
    );
  }
}

Related Post