CODEWITHSUNDEEP
imageflutterflutter-layout
Little Monkey
Little Monkey

Reputation: 6157

Flutter: To put a circle image in a corner

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

Upvotes: 2

Views: 4993

Answers (2)

Sher Ali
Sher Ali

Reputation: 5793

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

ui of above code

Upvotes: 8

diegoveloper
diegoveloper

Reputation: 103551

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;
    }

Upvotes: 1

Related Questions