I want like a this button but I can not make it
Please tell me that how to make about
I did tryed code
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
backgroundColor: Colors.lightBlue[400],
side:BorderSide(width: 2, color: Colors.black)),
CodePudding user response:
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'),
)
),
CodePudding user response:
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
},
),
);
CodePudding user response:
I usually create the buttons myself, you can add more features
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),
))),
)
CodePudding user response:
I create this button with complete all of your need, having the box shadow, italic login, responsive design base on device width.
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)),
),
),
)
and here is the result