Flutter: To put a circle image in a corner

Question

I would like to put an enter image description here image, that I want to round, in the top right corner. I've tried with the alignment, but it didn't work. Any suggestion?

This is what I've done so far:

import 'package:flutter/material.dart';


class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("Login"),),

      body: CircleImage(),
    );
  }
}



class CircleImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Image.asset("images/login_img.png", alignment: Alignment(1.0, 1.0),),
      clipper: CircleClipper(),
    );
  }
}




class CircleClipper extends CustomClipper<Path>{

  @override
  getClip(Size size) {

    var path = Path();

    path.addOval(new Rect.fromCircle(center: new Offset(size.width/2, size.height/2), radius: size.width * 0.45));

    return Path();
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }

}

And this is what I want to achieve:

image

Solution 1

Use this code to get your expected result.

          class CornerCircle extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return new Container(
          width: 200.0,
          height: 200.0,
          child: new Stack(
            alignment: Alignment.center,
            children: <Widget>[
            new Container(
              margin: EdgeInsets.all(25.0),
              decoration: new BoxDecoration(
                gradient: LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
                begin: Alignment.topRight, end: Alignment.bottomLeft),
                border: Border.all(color: Colors.red,width: 2.0)
              ),
            ),
            new Align(alignment: Alignment.topRight,
            child: new Container(
              width: 50.0,
              height: 50.0,
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle
              ),
              alignment: Alignment.center,
              child: new Text('50', style: new TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),
            ),)
          ],),
        );
       }
      }

Solution 2

You can wrap your ClipPath inside a Container and an Align widget

  @override
    Widget build(BuildContext context) {
      return Container(
        child: Align(
          alignment: Alignment.topRight,
          child: ClipPath(
            child: Image.asset(
              "images/login_img.png",
              height: 80.0,
              width: 80.0,
            ),
            clipper: CircleClipper(),
          ),
        ),
      );
    }

And fix your getClip method , you are returning a new Path() instead the path created

    @override
    getClip(Size size) {

      var path = Path();

      path.addOval(new Rect.fromCircle(center: new Offset(size.width/2, size.height/2), radius: size.width * 0.45));

      return path;
    }

Comments

[rmtmckenzie]

We need a bit more information. You're trying to put an image in the top right corner, but the top right corner of what? The screen? Another widget? And what have you tried so far? Do you want the rest of the image to be clipped off (if you're not talking about the top left of the screen)? It would be helpful if you include some code and possibly a diagram/mockup/example of what you want to see.

[diegoveloper]

Put your code and we could help you