Flutter:将圆形图像放在角落

Lit*_*key 2 image flutter flutter-layout

我想在右上角输入一个我想要圆形的图像描述。我试过对齐,但没有奏效。有什么建议吗?

这是我到目前为止所做的:

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

}
Run Code Online (Sandbox Code Playgroud)

这就是我想要实现的目标:

图片

Zul*_*qar 7

使用此代码可获得预期结果。

          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),),
            ),)
          ],),
        );
       }
      }
Run Code Online (Sandbox Code Playgroud)

上面代码的ui