I want to create like this button
But I am creating like this
when I m removing this line then I got error
right: BorderSide(
color: skyBlue,
width: 2.0,),
This is my code
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
tabValue = 'Growth';
});
print(tabValue);
},
child: Padding(
padding: const EdgeInsets.only(
bottom: 10, top: 10),
child: Container(
width:MediaQuery.of(context).size.width/2.24,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: skyBlue,
width: 2.0,
style: BorderStyle.solid),
top: BorderSide(
color: skyBlue,
width: 2.0,
style: BorderStyle.solid),
bottom: BorderSide(
color: skyBlue,
width: 2.0,
style: BorderStyle.solid),
right: BorderSide(
color: skyBlue,
width: 2.0,),
),
boxShadow: tabValue == 'Growth' ? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1)
)
]:<BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0,0)
)
],
color: tabValue == 'Growth'
? skyBlue
: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),),
padding: EdgeInsets.symmetric(
horizontal: 20, vertical: 15),
child: Text(
"Growth",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Growth'
? Colors.white
: skyBlue),
textAlign: TextAlign.center,
)),
),
),
InkWell(
onTap: () {
setState(() {
tabValue = 'Home Loan';
});
print(tabValue);
},
child: Padding(
padding: const EdgeInsets.only(
bottom: 10, top: 10),
child: Container(
width:MediaQuery.of(context).size.width/2.4,
decoration: BoxDecoration(
border: Border.all(
color: green2Color,
width: 2.0,
style: BorderStyle.solid),
boxShadow: tabValue == 'Home Loan' ? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1)
)
]:<BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0,0)
)
],
color: tabValue == 'Home Loan'
? green2Color
: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 15),
child: Text(
"Home Loan",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Home Loan'
? Colors.white
: green2Color),
textAlign: TextAlign.center,
)),
),
)
],
),
You can allow set borderRadius only when you define all border side same or not define each one of them, try this:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
tabValue = 'Growth';
});
print(tabValue);
},
child: Container(
margin: EdgeInsets.only(bottom: 10, top: 10),
padding: EdgeInsets.only(top: 2, left: 2, bottom: 2),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
color: Colors.blue,
),
child: Container(
width: MediaQuery.of(context).size.width / 2.24,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
boxShadow: tabValue == 'Growth'
? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1))
]
: <BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0, 0))
],
color:
tabValue == 'Growth' ? Colors.blue : Colors.white,
),
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 15),
child: Text(
"Growth",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Growth'
? Colors.white
: Colors.blue),
textAlign: TextAlign.center,
)),
),
),
InkWell(
onTap: () {
setState(() {
tabValue = 'Home Loan';
});
print(tabValue);
},
child: Container(
margin: EdgeInsets.only(bottom: 10, top: 10),
padding: EdgeInsets.only(top: 2, right: 2, bottom: 2),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
color: Colors.green,
),
child: Container(
width: MediaQuery.of(context).size.width / 2.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
boxShadow: tabValue == 'Home Loan'
? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1))
]
: <BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0, 0))
],
color: tabValue == 'Home Loan'
? Colors.green
: Colors.white,
),
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 15),
child: Text(
"Home Loan",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Home Loan'
? Colors.white
: Colors.green),
textAlign: TextAlign.center,
)),
),
)
],
)
Try Changing the right border color as transparent.
right: BorderSide(
color: Colors.transparent,
width: 2.0,),
Related
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)),
result
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'),
)
),
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
},
),
);
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),
))),
)
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
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome'),
),
body: Center(
child: Container(
alignment: Alignment.topCenter,
height: 260,
width: 260,
decoration: const BoxDecoration(
color: Colors.blue,
//borderRadius: BorderRadius.all(Radius.circular(20)),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(30),
bottomLeft: Radius.elliptical(100, 50),
bottomRight: Radius.elliptical(70, 150),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
blurRadius: 10,
spreadRadius: 5,
offset: Offset(.5, 0),
blurStyle: BlurStyle.outer,
),
],
),
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.only(left: 10),
child: const Text(
'Hello World!',
//textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
));
}
Try this, Need to remove const
Center(
child: Container(
alignment: Alignment.topCenter,
height: 260,
width: 260,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(30),
bottomLeft: Radius.elliptical(100, 50),
bottomRight: Radius.elliptical(70, 150),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
blurRadius: 10,
spreadRadius: 5,
offset: Offset(.5, 0),
blurStyle: BlurStyle.outer,
),
]),
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.only(left: 10),
child: const Text(
'Hello World!',
//textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
Please remove "const" before BoxDecoration widget. And then you could assign withOpacity for Color in the BoxShadow.
Before
After
How can I design this kind of button in flutter?
You can use elevated button with transparent color and white border and shadow
Try below code hope its help to you.
Container(
padding: EdgeInsets.all(10),
height: 80,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(80),
),
child: InkWell(
onTap: () {
//Write your onPressed function here
print('Button Pressed');
},
child: Card(
color: Colors.teal[100],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(70),
),
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
),
Your result screen->
Here you go, adjust to your needs:
Container(
color: Color.fromRGBO(133,208,212,1),
padding: const EdgeInsets.all(15),
child: Container(
padding: EdgeInsets.all(8),
decoration: ShapeDecoration(
shape: StadiumBorder(),
color: Color.fromRGBO(133,208,212,1),
shadows: <BoxShadow>[
BoxShadow(
color: Colors.white,
spreadRadius: 8,
blurRadius: 3,
offset: Offset(0, 0),
),
BoxShadow(
color: Colors.grey.shade300,
spreadRadius: 3,
blurRadius: 3,
offset: Offset(5, 2),
),
],
),
child: Text(
'Sign in',
style: TextStyle(color: Colors.white),
),
),
),
The first Container is there just to highlight it's child, so it's not important
When I use GridView in Flutter, there is extra margin at the top, I set the padding and margin to 0 and still the problem persists.
Here is my code:
Container(
padding: EdgeInsets.only(top: 25, bottom: 0, right: 25, left: 25),
margin: EdgeInsets.zero,
child: Text(
'Let\'s begin',
style: TextStyle(
fontSize: 2,
fontWeight: FontWeight.w700),
),
),
GridView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
],
),
I wrapped the above code with ListView. The extra margin on top makes the page look bad. I searched about this problem and found nothing.
The output:
What I actually want:
I fixed It! I added
padding: EdgeInsets.zero
to the GridView
I want to add border color on 3 side only and add border radius seems like in container its not possible i tried its showing some error then i try it with Material and its working fine but issue is i am not able to add borderRadius now. Need to know how can i add border radius with different side colors.
Want to achieve this
And stuck on this
You can see on left side no radius is showing
My code
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Material(
shape: Border(
left: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
bottom: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
top: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
),
child: Container(
width: Width * 0.45,
height: Height * 0.07,
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
),
child: Center(
child: Text(
'https://facebook.com/',
style:
TextStyle(color: textGreyColor, fontSize: 15),
)),
),
),
Container(
width: Width * 0.45,
height: Height * 0.07,
child: TextFormField(
key: ValueKey('name'),
style: TextStyle(color: textGreyColor),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Facebook Page",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
),
),
),
],
),
You can wrap it with ClipRRect. Not the best solution but it will work
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
child: Material(
shape: Border(
left: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
bottom: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
top: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
),
child: Container(
width: Width * 0.45,
height: Height * 0.07,
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
),
child: Center(
child: Text(
'https://facebook.com/',
style: TextStyle(
color: textGreyColor, fontSize: 15),
)),
),
),
),
Container(
width: Width * 0.45,
height: Height * 0.07,
child: TextFormField(
key: ValueKey('name'),
style: TextStyle(color: textGreyColor),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Facebook Page",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
),
),
),
],
),
Flutter expect that when you will use the border radius all border will be uniform. So using a custom style for 2 or 3 border and setting a border radius after that does not work.
You can use a outer container which will have the border and radius of four side. After that you place a ClipRRect to cut any background color if that goes over the outer container border. Here's a example output
#override
Widget build(BuildContext context) {
final double borderRadius = 6;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(16),
child: Center(
child: Container(
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
border: Border.all(color: Colors.grey, width: 1),
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//left child
Expanded(
child: _facebookUrlText(),
),
//middle separator
Container(
width: 1,
color: Colors.grey,
),
//right child
Expanded(
child: _facebookPageInputField(),
),
],
),
),
),
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
),
),
);
}
_facebookUrlText() {
return Container(
height: double.infinity,
color: Color(0xffFAFAFA), //background color of left box
padding: EdgeInsets.symmetric(horizontal: 6),
child: Center(
child: Text(
'https://facebook.com/',
style: TextStyle(color: Colors.grey, fontSize: 15),
),
),
);
}
_facebookPageInputField() {
return TextFormField(
key: ValueKey('name'),
style: TextStyle(color: Colors.grey),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent, width: 1),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey, fontSize: 15),
hintText: "Facebook Page",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent, width: 1),
),
),
);
}