Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image in widget [flutter]

Tags:

flutter

dart

I want to make a card, a few cards in flutter. On the right side an image and on the left side a information text. I tested it with CircleAvatar and it almost worked like i wanted it to, but I don't want a circle, I want a square image. I removed the CircleAvatar part and put in a new container and a child, but i couldn't use AssetImage, the only thing i could use was image.asset('.jpg'). The image was almost bigger that the phone, because there was no working way to set the size. With the CircleAvatar it worked because I set the radius as size. When i tried AssetImage() vscode said to me I cannot put it in a widget. I hope you can help me out (I thing image.asset() isn't the right way). Thank you all

    return new MaterialApp(      
  title: title,
  home: new Center(
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Card(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Container(
                    child:
                      new CircleAvatar(
                    backgroundImage: new AssetImage('images/lake.jpg'),
                    radius: 80.0,
                      child: new Container(
                        padding: const EdgeInsets.all(0.0),
                          child: new Text('Sight'),
                          ),
                      )
                  ),
                  ),
                  new Container(
                    child: new Text('long information text'),
                  )
                ],
              )
            ],
          ),
        )
      ],
    ),
  )  
);

} }

like image 674
Retch Avatar asked Mar 26 '18 21:03

Retch


2 Answers

You should be able to do this for your row:

 Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      home: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
              child: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Container(
                        child: new Image.asset(
                          'images/lake.jpg',
                          height: 60.0,
                          fit: BoxFit.cover,
                        ),
                      ),
                      new Container(
                        child: new Text('long information text'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
like image 187
John Wiese Avatar answered Nov 09 '22 12:11

John Wiese


For an answer in your comment!

You can use ClipRRect,

new ClipRRect(
    borderRadius: new BorderRadius.circular(8.0),
    child: new AssetImage('images/lake.jpg')
)

also You can do like this:

new Container(
        width: 50.0,
        height: 50.0,
        decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
          fit: BoxFit.fill,
          image: new AssetImage('images/lake.jpg')
          )
       )),
like image 5
vij Avatar answered Nov 09 '22 13:11

vij