CODEWITHSUNDEEP
dartflutter
user10275101
user10275101

Reputation:

how can put image inside the image in flutter

https://i.sstatic.net/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.sstatic.net/w5mLQ.png

Upvotes: 3

Views: 14531

Answers (3)

Gabriel Arghire
Gabriel Arghire

Reputation: 2360

Have a look at this example (a hamburger icon and three red points over a purple clipped background):

Hamburger icon over purple 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;
  }
}

Upvotes: 0

Sher Ali
Sher Ali

Reputation: 5793

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

      ],),
  );
}

enter image description here

Upvotes: 5

Maurits van Beusekom
Maurits van Beusekom

Reputation: 5989

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:

Note that I have not tested the code listed in the snippet so it might need a little bit of tweaking.

Upvotes: 3

Related Questions