我想要一个像这样的按钮,但是我做不出来请告诉我怎样才能使
我试过了
ElevatedButton( style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30)), backgroundColor: Colors.lightBlue[400], side:BorderSide(width: 2, color: Colors.black)),
结果
gc0ot86w1#
Container( height: 50, width: 200, decoration: BoxDecoration( color: Color(0xff92fcd1), border: Border.all(color: Colors.black), borderRadius: BorderRadius.circular(100), boxShadow: <BoxShadow>[ BoxShadow( color: Colors.black, offset: Offset(2.5, 2.5), spreadRadius: 0.1 ) ], ), child: Center( child: Text('LOGIN'), ) ),
fxnxkyjh2#
Container( width: 100, height: 30, decoration: BoxDecoration( border: Border.all( width: 1, color: Colors.black, ), color: const Color(0xff93fbd1), borderRadius: BorderRadius.circular(15), boxShadow: const [ BoxShadow( color: Colors.black, blurRadius: 1, offset: Offset(1, 2), // Shadow position ), ], ), child: TextButton( child: const Text( 'LOGIN', style: TextStyle( fontStyle: FontStyle.italic, color: Colors.black, fontWeight: FontWeight.bold), ), onPressed: () { // TODO: button onTap events }, ), );
afdcj2ne3#
我通常自己创建按钮,您可以添加更多功能
Card( elevation: 8, color: Color.fromARGB(255, 132, 255, 199), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15), side: BorderSide(width: 2)), child: InkWell( borderRadius: BorderRadius.circular(15), onTap: () {}, child: Container( padding: EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10), child: Text( "LOGIN", style: TextStyle(fontWeight: FontWeight.w700), ))), )
yftpprvb4#
我创建这个按钮与完成所有您的需要,有框阴影,斜体登录,响应设计的基础上设备的宽度。
GestureDetector( behavior: HitTestBehavior.opaque, onTap: () {}, child: Container( width: MediaQuery.of(context).size.width * 0.4, height: MediaQuery.of(context).size.height * 0.05, decoration: BoxDecoration( color: const Color(0xff92fcd1), border: Border.all(color: Colors.black), borderRadius: BorderRadius.circular(100), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.7), spreadRadius: 2, offset: const Offset(2, 2), // changes position of shadow ), ], ), child: const Center( child: Text("Login", style: TextStyle( fontStyle: FontStyle.italic, color: Colors.black)), ), ), )
这是结果
4条答案
按热度按时间gc0ot86w1#
fxnxkyjh2#
afdcj2ne3#
我通常自己创建按钮,您可以添加更多功能
yftpprvb4#
我创建这个按钮与完成所有您的需要,有框阴影,斜体登录,响应设计的基础上设备的宽度。
这是结果