如何在颤振中创建此 UI?请帮帮我:

时间:2021-04-09 06:31:54

标签: flutter dart

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

}

0 个答案:

没有答案