Question Detail

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.


Thread Reply

Anonymous

- 6 months 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,
        ),
      ],
    ),
  ),
);

Hemant Sharma

- 6 months 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

Hemant Sharma

- 6 months 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