how can put image inside the image in flutter - dart

Question

https://i.stack.imgur.com/w5mLQ.png
Like what we see a small circular image inside the big picture . And how to arrange the text as in the picture
https://i.stack.imgur.com/w5mLQ.png

Answer 1

Widget build(BuildContext context) {
return new Container(
height: 150.0,
margin: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
gradient: new LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
child: new CircleAvatar(radius: 35.0, backgroundImage: NetworkImage('https://wallpapercave.com/wp/wp2365076.jpg'),)
),
new Expanded(child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('New York', style: new TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
new SizedBox(height: 8.0,),
new Text('Sunny', style: new TextStyle(fontSize: 12.0, color: Colors.white70),),
new SizedBox(height: 10.0,),
new Row(children: <Widget>[
new Column(children: <Widget>[
new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
new Text('Popularity', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
],),
new Column(children: <Widget>[
new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
new Text('Like', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
],),
new Column(children: <Widget>[
new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
new Text('Followed', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
],)
],)
],)),
new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('12°', style: new TextStyle(fontSize: 30.0, color: Colors.white70),),
new Text('Ranking', style: new TextStyle(fontSize: 14.0, color: Colors.white70),),
],))
],),
);
}

Answer 2

It will take a few widgets to accomplish what you would like to achieve. Here is how I would solve it (it might need some fine tuning to fit your exact needs, but should get you started):
First start with the background (I believe you call it the big picture). To accomplish this you could use the Container widget to draw the rectangle and use set the decoration property with a BoxDecoration widget to set the background image.
Next set the child property of the Container widget with a Row widget which will contain the circular image and a Column widget to contain the text elements.
The whole thing could look something like this:
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/card_background.png'),
fit: BoxFit.cover,
),
),
child: new Row(
children: <Widget>[
new CircleAvatar(
backgroundImage: new AssetImage('assets/images/avatar.png')
),
new Column(
children: <Widget>[
new Text('David Borg'),
new Text('Title: Flying Wing'),
],
),
],
),
)
Here are some references to the most important widgets used in the above code snippet:
Container widget
BoxDecoration widget
CircleAvatar widget
Column widget
Row widget
Note that I have not tested the code listed in the snippet so it might need a little bit of tweaking.

Answer 3

Have a look at this example (a hamburger icon and three red points over a purple clipped background):
If you would like to have this, the code would be pretty short:
body: Column(
children: <Widget>[
ClipPath(
clipper: MyClipper(),
child: Container(
height: 350,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Color.fromRGBO(16, 27, 117, 0.5),
Color.fromRGBO(16, 27, 117, 0.5),
]),
image: DecorationImage(
image: AssetImage(
"assets/images/points_removed.png",
),
),
),
child: Align(
alignment: Alignment(-0.8, -0.6),
child: Image.asset(
"assets/images/hamburger_icon.png",
width: 30,
height: 20,
),
),
),
),
],
),
(optional) the code for clipping the background
class MyClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 80);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height - 80);
path.lineTo(size.width, 0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}