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)
这就是我想要实现的目标:
使用此代码可获得预期结果。
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)
| 归档时间: |
|
| 查看次数: |
3620 次 |
| 最近记录: |