https://i.stack.imgur.com/rQYu0.png 我是 flutter 的新手,我一直在尝试构建这个 ui,但它超出了我的范围! 到目前为止,这是我的代码: (顺便说一句,我没有使用任何特定的包......) 我最大的挑战是那个圆的角度! 我怎样才能创建那个圈子?有包吗?
class NowPlaying extends StatefulWidget {
@override
_NowPlayingState createState() => _NowPlayingState();
}
class _NowPlayingState extends State<NowPlaying> {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Container(
color: btmGreen,
height: 60,
width: size.width,
child: Row(
children: <Widget>[
GestureDetector(
child:
cbutton(back),
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>NowPlaying()));
},
),
Spacer(),
Container(
height: 35,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
// topLeft: Radius.circular(30),
bottomLeft: Radius.circular(260)),
color : PrimaryGreen,
),
)
],
),
),
Container(
// color: Colors.white,
child: Row(
children: <Widget>[
buildVerticalMenu(size),
ClipRRect(
borderRadius: BorderRadius.circular(370),
child: Container(
color: Orange,
height: 400,
width: 400,
child: ClipRRect(
borderRadius: BorderRadius.circular(370),
child: Container(
// padding: EdgeInsets.fromLTRB(110, 110, 0.0, 110),
height: 360,
width: 360,
decoration: BoxDecoration(
color: PrimaryGreen,
borderRadius: BorderRadius.all(Radius.circular(200)),
image: DecorationImage(
alignment: Alignment.bottomCenter,
fit: BoxFit.fill,
image: AssetImage("assets/images/hiphop.jpg"),
),
),),
),
),
),
],
),
)
],
),
);
}
Widget buildVerticalMenu(Size size){
return Container(alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(60)),
color: Colors.white,
),
height: size.height*0.3,
width: 70,
child: RotatedBox(
quarterTurns: -1,
child: Text('Now Playing', style: TextStyle(fontSize: 20 , fontWeight: FontWeight.w700,color: PrimaryGreen),)),
);
}
}