How to add assets and Images in Flutter ?

5 years ago Views 3004 Visit Post Reply

I am a newbie for Flutter Framework. I want to use Image in Flutter App I do search on google how to add or Implement Image in Flutter Mobile App. Thay said Create -> Assets folder/Directory -> paste PNG

Add pubspec.yaml

# To add assets to your application, add an assets section, like this:
 assets:
  - images/a_dot_burr.png
  - images/a_dot_ham.png

but I am not able to use these images.

Posted byNick Johnson

Thread Reply

Anonymous

- 5 years ago

To access your Images from your root folder you have to add Images in your pubspec.yaml and put your images in root folder Name images

and use below code to set your Image

return new MaterialApp(
  title: 'Flutter Image Assest Demo',
  home: new Scaffold(
    appBar: new AppBar(
      title: new Text('Images Screen'),
    ),
    body: new ListView(
      children: [
        new Image.asset(
          'images/logo_google_images.png',
          width: 600.0,
          height: 240.0,
          fit: BoxFit.cover,
        ),
      ],
    ),
  ),
);

Mark As Correct

Hemant Sharma

- 5 years ago

Flutter Example to show Background and show Images on the Screen.

main.dart

import 'package:flutter/material.dart';


void main() => runApp(SplashPage());
class SplashPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Image Show',
      home: new Scaffold(
        body: new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("images/splash_bg_white.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          child: new ListView(
            children: [
              new Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new Image.asset(
                    'images/logo_icon_shadow.png',
                    fit: BoxFit.cover,
                  ), //your elements here
                ],
              ),
              new Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new Image.asset(
                    'images/logo_shdw_big.png',
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In your pubspec.yaml file add images in your Images root folder and implemant in pubspec.yaml file to allow in whole project

assets:
 - images/logo_icon_shadow.png
 - images/logo_shdw_big.png
 - images/splash_bg_white.jpg

Mark As Correct

Hemant Sharma

- 5 years ago

Flutter Example to show Background and show Images on the Screen.

main.dart

import 'package:flutter/material.dart';


void main() => runApp(SplashPage());
class SplashPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Image Show',
      home: new Scaffold(
        body: new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("images/splash_bg_white.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          child: new ListView(
            children: [
              new Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new Image.asset(
                    'images/logo_icon_shadow.png',
                    fit: BoxFit.cover,
                  ), //your elements here
                ],
              ),
              new Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new Image.asset(
                    'images/logo_shdw_big.png',
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In your pubspec.yaml file add images in your Images root folder and implemant in pubspec.yaml file to allow in whole project

assets:
 - images/logo_icon_shadow.png
 - images/logo_shdw_big.png
 - images/splash_bg_white.jpg

Mark As Correct

Question Detail