Inserting image into a container Flutter app

flutter image package
flutter image size
flutter container background image
flutter image widget
decoration image flutter
flutter rootbundle
flutter get asset path
image provider flutter

I am looking at this template i found on startflutter.com and the full code can be seen below

i try to insert my own image into the circle and it seems there isn't a way to fit the image to fully go into the box (it's always cropped)

@override
      Widget build(BuildContext context) {
        final alucard = Hero(
          tag: 'hero',
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: CircleAvatar(
              radius: 72.0,
              backgroundColor: Colors.transparent,
              backgroundImage: AssetImage('assets/alucard.jpg'),
            ),
          ),
        );

I would like to insert an image in a container, like so

     @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );

But this doesn't work and wont show up, what is wrong with this?

Here is the whole page of code...

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';

  @override
  Widget build(BuildContext context) {
    final alucard = Hero(
      tag: 'hero',
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: CircleAvatar(
          radius: 72.0,
          backgroundColor: Colors.transparent,
          backgroundImage: AssetImage('assets/alucard.jpg'),
        ),
      ),
    );

    final welcome = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome Alucard',
        style: TextStyle(fontSize: 28.0, color: Colors.white),
      ),
    );

    final lorem = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit condimentum mauris id ',
        style: TextStyle(fontSize: 16.0, color: Colors.white),
      ),
    );

    final body = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(28.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Colors.blue,
          Colors.lightBlueAccent,
        ]),
      ),
      child: Column(
        children: <Widget>[alucard, welcome, lorem],
      ),
    );

    return Scaffold(
      body: body,
    );
  }
}

Change your container with this will work fine

new Container(
      height: 120.0,
      width: 120.0,
      decoration: new BoxDecoration(
        image: DecorationImage(
          image: new AssetImage(
              'assets/assets/alucard.jpg'),
          fit: BoxFit.fill,
        ),
        shape: BoxShape.circle,
      ),
    )

Adding Images, In this article, I will tell you more detail about the flutter widget Image. We create to make a function to show it and put a Container to contain it. I originally wrote this answer when I was learning how to add images to my Flutter project. Check out the documentation , but in case you need a little more step-by-step help, keep reading. 1.

Try this

new Container(
  width: 100.00,
  height: 100.00,
  decoration: new BoxDecoration(
  image: new DecorationImage(
      image: ExactAssetImage('assets/example.png'),
      fit: BoxFit.fitHeight,
      ),
  ));

Make sure you tell flutter where your assets folder is by editing the pubspec.yaml file https://docs.flutter.io/flutter/painting/ExactAssetImage-class.html

Adding assets and images, to my Flutter project. Check out the documentation, but in case you need a little more step-by-step help, keep reading. How to include images in your Flutter app. Suragch Flutter AnimatedContainer Widget · Suragch in  Loading iOS images in Flutter. When implementing Flutter by adding it to an existing iOS app, you might have images hosted in iOS that you want to use in Flutter. To accomplish that, use the ios_platform_images plugin available on pub.dev. Platform assets

Can add image into a container as- [your_image_folder_path/image_name]

Container(
    child:  Image(image: AssetImage("images/logo.png")))

Flutter widgets 03, How to display image from assets in Flutter and adjust the image size, color, etc. A mobile app usually needs some static images. What you need to do is adding a list of image paths or a list of directories that contain images in child: Container(child: Image.asset('assets/images/file-name.jpg')). ),. ),. );. Image Flutter Basics. There are 5 different ways of putting an image into the Flutter App. Each method solves a different problem. There are ways to get an image over the network, or from a local folder etc. These constructors are particularly useful in solving their individual use cases only. The 5 different ways of including the Image in

Passing BoxFit.fill to your Image.asset should do.

Try this;

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';

  @override
  Widget build(BuildContext context) {
    final alucard = Hero(
      tag: 'hero',
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: new Container(
          height: 80.0,
          width: 80.0,
          decoration: new BoxDecoration(
            image: DecorationImage(
              image: new AssetImage(
                  'assets/alucard.jpg'),
              fit: BoxFit.fill,
            ),
            borderRadius:
            BorderRadius.circular(80.0),
          ),
        ),
      ),
    );

    final welcome = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome Alucard',
        style: TextStyle(fontSize: 28.0, color: Colors.white),
      ),
    );

    final lorem = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit condimentum mauris id ',
        style: TextStyle(fontSize: 16.0, color: Colors.white),
      ),
    );

    final body = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(28.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Colors.blue,
          Colors.lightBlueAccent,
        ]),
      ),
      child: Column(
        children: <Widget>[alucard, welcome, lorem],
      ),
    );

    return Scaffold(
      body: body,
    );
  }
}

How to include images in your Flutter app - Suragch, Box Decoration property with Decoration Image to put background image.Flutter Add Import material.dart package in your app's main.dart file. This video covers: - Create an assets directory 1x, 2x - Add an image to the assets - Create an Image Widget Using: Flutter, Dart, IntelliJ IDEA, Android Emulator https://flutter.io/

Add images to flutter app- Row, Flex, Expanded, Container, Image , If you use a Container as the body of the Scaffold, its size will be accordingly the size of its child, and usually that is not what you want when you try to add a background image to your app.

Image (Flutter Widget of the Week), fit. The param control how does the picture show in Image.When we look at the definition, it extends the BoxFit.. final BoxFit fit; The BoxFit is an enum in the flutter. So we use it just as type.

Flutter Tutorial, App themes are probably best long term. (Make sure you've properly added the logo image to your assets folder and updated 'pubspec.yaml' file too).

Comments
  • Would increasing the radius of the CircleAvatar help your cause?
  • I tried that it keeps the same cropping of the image.
  • Can you describe a bit more of what you want and what you are actually seeing? Perhaps also share the image you are working with
  • All i'm trying to do is insert a full image above the text in "final welcome" and "final lorem".......the image will show up in the "CircleAvatar" class but when i try using the container it will not show anything at all, and doesn't have a placeholder space where it would be. Ive tried using a bunch of different images for it to show but it won't... i dont think it has to do with the image
  • I get an error saying .... argument type "Image" cannot be assigned to parameter type "ImageProvider", i cannot use Image.asset in backgroundImage
  • My bad. Edited now. Check.
  • Did this work for you? because i had what you written in my question minus the padding and the borderradius. When i run that chunk of code you wrote, i still run into the same problem. It doesn't show the image and doesn't leave a place holder where it should be
  • The Container with the image needs a height and width.
  • Set the Container height and width as suggested by @AlbertLardizabal. I've also edited my answer setting the container height and width.