34

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,
    );
  }
}
4
  • Would increasing the radius of the CircleAvatar help your cause? Sep 6, 2018 at 20:01
  • I tried that it keeps the same cropping of the image.
    – Mfreeman
    Sep 6, 2018 at 20:08
  • 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 Sep 6, 2018 at 20:13
  • 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
    – Mfreeman
    Sep 6, 2018 at 20:46

5 Answers 5

81

Change your container with this will work fine

Container(
      height: 120.0,
      width: 120.0,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(
              'assets/assets/alucard.jpg'),
          fit: BoxFit.fill,
        ),
        shape: BoxShape.circle,
      ),
    )
1
  • how to fit small image in big container in flutter ? Please suggest. Thanks.
    – Kamlesh
    Feb 2, 2021 at 10:09
12

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

9

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,
    );
  }
}
6
  • I get an error saying .... argument type "Image" cannot be assigned to parameter type "ImageProvider", i cannot use Image.asset in backgroundImage
    – Mfreeman
    Sep 6, 2018 at 21:17
  • My bad. Edited now. Check.
    – Tayo.dev
    Sep 6, 2018 at 21:29
  • 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
    – Mfreeman
    Sep 6, 2018 at 21:37
  • 1
    The Container with the image needs a height and width. Sep 6, 2018 at 21:41
  • Set the Container height and width as suggested by @AlbertLardizabal. I've also edited my answer setting the container height and width.
    – Tayo.dev
    Sep 6, 2018 at 21:43
8

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

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

Please try this:

Container(
    height: _height*0.35,
    width: _width,
    decoration: BoxDecoration(
        image: DecorationImage(
            image: ExactAssetImage('assets/splash_img.jpeg'),
            fit: BoxFit.fitHeight,
        ),
    ),
),

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.