#2 Android Studio - Working with Assets

Tutorial on how to add an image from PC into our App

Step 1 : In order to add images from our laptop, we have to create a separate directory in Android Studio to add the image.For this select New - Directory - Type Images and copy the image to the directory 'Images' under your ****_app file.

You can download the image using this link : Diamond.png

Step 2 : Now open pubspec.yaml file from 'test' and you can see Flutter : assets engraved in green color(commented).Inorder to uncomment select from assets: to .jpeg and press Ctrl + /.Now erase all other comments which are not required(green colored text).

Note : In .yaml file we comment using #

Make sure your code looks like this and then press pub get dispalyed on the top. 

Note : You name,version,environment nad cuprttino_icons values might change prior to the version used

Step 3 : Now go back to main.dart and type the code.The only difference from the #1 Android Studio - Scaffold code is that we have changed the code NetworkImage to AssetImage so that the file is read from the directory 'Images'.

Run the code to see the app run on the emulator. (The code is put in a class so that you dont have to run the code everytime you make a change, just save to execute the changes)

Code :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black26,
        body: Center(
          child: Image(
            image: AssetImage('images/diamond.png'),
          ),
        ),
        appBar: AppBar(
          backgroundColor: Colors.white10,
          title: Text('Abins App'),
        ),
      ),
    );
  }
}

 

Refer the course from Udemy :  Android Studio