dartflutter

Image in widget [flutter]


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

} }


Solution

  • 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'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }