Container(
height: 55,
width: 55,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
vertical: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
]),
child: OutlinedButton(
onPressed: () {
_controller.forward();
widget.onPress();
},
style: const ButtonStyle(
alignment: Alignment.centerLeft,
backgroundColor: MaterialStatePropertyAll(Colors.white),
shape: MaterialStatePropertyAll(CircleBorder()),
),
child: const Icon(
Icons.view_carousel_outlined,
size: 35,
color: Colors.black,
),
),
),
as you can see the icon is not aligned properly ...
i have tried every method possible, i used stack, positioned, tried to give it a padding, margin etc. tried to put it in boxfit and tried everything else, any ideas why this is happening ?
Changing the alignment to Alignment.center and using EdgeInsets.zero worked fine for me.
Container(
height: 55,
width: 55,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
vertical: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
],
),
child: OutlinedButton(
onPressed: () {
/* _controller.forward();
widget.onPress(); */
},
style: const ButtonStyle(
alignment: Alignment.center,
padding: MaterialStatePropertyAll(EdgeInsets.zero),
backgroundColor: MaterialStatePropertyAll(Colors.white),
shape: MaterialStatePropertyAll(CircleBorder()),
),
child: const Icon(
Icons.view_carousel_outlined,
size: 35,
color: Colors.black,
),
),
),
Ok, so i fixed it, basically removed a lot of styling in the container and styled the border in the outline button itself.
Here is the code:
Container(
decoration: const BoxDecoration(shape: BoxShape.circle, boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
]),
child: OutlinedButton(
onPressed: () {
_controller.forward();
widget.onPress();
},
style: const ButtonStyle(
side: MaterialStatePropertyAll(BorderSide(width: 2.0)),
padding: MaterialStatePropertyAll(EdgeInsets.all(20.0)),
backgroundColor: MaterialStatePropertyAll(Colors.white),
shape: MaterialStatePropertyAll(CircleBorder()),
),
child: const Icon(
Icons.view_carousel_outlined,
size: 35,
color: Colors.black,
),
),
),
OutlinedButton has its own constraints, margin, padding, tapTargetSize, visualDensity, hence, your child is not getting centered inside it.
So to achieve your desired UI snippet either modify this properties
OR
Wrap your Icon with Center and use InkWell for onTap() functionality
CODE:
Container(
height: 55,
width: 55,
decoration: const BoxDecoration(
color: Colors.white, //TODO: Add Color to Container
shape: BoxShape.circle,
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
vertical: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
]),
child: InkWell( //TODO: Replace OutlinedButton with InkWell
onTap: () {
_controller.forward();
widget.onPress();
},
child: const Center( //TODO: Wrap Icon with Center
child: Icon(
Icons.view_carousel_outlined,
// size: 35,
color: Colors.black,
),
),
),
),
OUTPUT:
Related
Basically I'm new to Flutter and trying to make a design like this -
So I Tried Stack for this but couldn't make it perfect.
Here is my code and image
Stack(
children: [
Positioned(
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.yellow,
),
),
),
Positioned(
child: Container(
height: 250,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
),
top: 10,
left: 5,
right: 5,
),
],),
You will need to give proper positione to each and every Positioned widget.
This code will provide you output which you expact.
You can checkout interactive code here.
Stack(
children: [
Positioned(
left: 125,
top: 50,
child: Container(
height: 250,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.black,
),
),
),
Positioned(
left: 100,
top: 60,
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
),
),
Positioned(
left: 75,
top: 75,
child: Container(
height: 350,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.yellow,
),
),
),
],
)
Please update your code with the below code. Here, I have fix the height only as device wise width could be changed. I have used Align widget to position the widget to bottom.
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 90),
height: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
color: Colors.greenAccent,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 50),
height: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
color: Colors.orange,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
color: Colors.limeAccent,
boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 5.0,
),
],
),
),
),
],)
It will look like this,
Rather then achieve it with Stack widget you can try this with Column widget like below
Column(
children: [
Container(
height: 20,
width: MediaQuery.of(context).size.width - 150,
decoration: BoxDecoration(/*as-per-your-requirement*/),
),
Container(
height: 20,
width: MediaQuery.of(context).size.width - 100,
decoration: BoxDecoration(/*as-per-your-requirement*/),
),
Container(
///this will be your main layout that user can completely see
width: MediaQuery.of(context).size.width - 50,
decoration: BoxDecoration(/*as-per-your-requirement*/),
child: /*as-per-your-requirement*/,
),
],
)
Stack(
children: [
Positioned(
top: -52.h,
left: -22.w,
child: Text(
"$position",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 200.sp,
color: Color(0x2007B4CF)),
)),
Positioned(
child: SvgPicture.asset(Res.ic_plan_lock),
top: 20.h,
right: 20.w,
),
Positioned(
top: 46.h,
left: 13.w,
right: 13.w,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(Res.ic_plan_secured),
SizedBox(
height: 10.h,
),
Text(
offer.offerName,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
color: ColorUtil.of(context).primaryDark),
),
SizedBox(
height: 12.h,
),
Text(
offer.offerText,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14.sp,
color: Colors.black),
),
],
),
),
Positioned(
bottom: 20.h,
left: 20.h,
right: 20.h,
child: GestureDetector(
behavior: getDefaultGestureDetectorBehaviour(),
onTap: () {
onCtaClicked();
},
child: Container(
height: 31.h,
width: 159.w,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFF2D2D3D),
borderRadius: BorderRadius.circular(10.h)),
child: Text(
offer.route,
style: TextStyle(
color: ColorUtil.of(context).colorPrimaryLight,
fontSize: 14.sp,
fontWeight: FontWeight.w500),
),
),
))
],
),
I have a widget as a badge. But When I want to add a white border on it I don't know why it's having another color too. I assume it's coming from the stack. But how can I fix it? To make it clear :
I don't want that blue outline on my border.
My Widget :
Stack(
children: [
CircleNotification(
backgroundColor: ColorService.purpleHalfOpacityBackground,
icon: SvgPicture.asset(
AssetService.boldChatBubbleIcon,
),
radius: 32,
),
Positioned(
left: 30,
top: 25,
child: Stack(children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
border: Border.all(color: Colors.white, width: 3),
),
child: CircleNotification(
backgroundColor: ColorService.halfOpacityBlue,
icon: SvgPicture.asset(
AssetService.cameraSvg,
),
radius: 32,
),
),
Positioned(
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
//When i add that border its coming with outline
--> border: Border.all(color: Colors.white, width: 2),
color: ColorService.blueTitleColor,
shape: BoxShape.circle,
),
child: const Text("1",
style: TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 13,
)),
),
right: 0,
top: 0,
)
]),
),
],
),
It is actually a bug in flutter, see this issue.
What you can do is wrap your container with another one that has your border color as a background and border color:
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
color: Colors.white, // <- The background is the same color as the border.
shape: BoxShape.circle,
),
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration( // <- You don't need any border here.
color: ColorService.blueTitleColor,
shape: BoxShape.circle,
),
child: // ...
),
)
I need to create a top, right, left border with rounded top right and top left corner. I could create it with a bottom border I can't remove. Here is what I could do:
I just need to remove this bottom border.
Code of the component:
class Tile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
30,
),
topLeft: Radius.circular(
30,
),
),
border: Border(
left: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
right: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
top: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
bottom: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
),
),
child: const ExpansionTile(
collapsedTextColor: kNotificationTileCollapsedTextColor,
textColor: kNotificationTileExpandedTextColor,
trailing: SizedBox.shrink(),
title: Center(
child: Text(
'Title',
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
),
children: <Widget>[
ListTile(
title: Text('data'),
),
],
),
);
}
}
If I remove the bottom Border it says "A borderRadius can only be given for a uniform Border."
What can I do? Thank you.
A workaround is to put a line over the bottom border with the same color of the background. You can achieve this using Stack and Positioned widgets. Here is a sample:
import 'package:flutter/material.dart';
const kBorderColor = Colors.blue;
const kNotificationTileCollapsedTextColor = Colors.blue;
const kNotificationTileExpandedTextColor = Colors.blue;
class TestScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Center(
child: Stack(
children: [
Tile(),
Positioned(
child: Container(
height: 2,
color: Colors.black,
),
bottom: 0,
left: 0,
right: 0,
)
],
)),
),
);
}
}
class Tile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
30,
),
topLeft: Radius.circular(
30,
),
),
border: Border(
left: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
right: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
top: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
bottom: BorderSide(
width: 1,
color: kBorderColor,
style: BorderStyle.solid,
),
),
),
child: const ExpansionTile(
collapsedTextColor: kNotificationTileCollapsedTextColor,
textColor: kNotificationTileExpandedTextColor,
trailing: SizedBox.shrink(),
title: Center(
child: Text(
'Title',
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
),
children: <Widget>[
ListTile(
title: Text('data'),
),
],
),
);
}
}
Try to build a custom button with X sign on the right, but when I add this to a Wrap widget, it used up the entire row.
this is the code for building the button:
Material _buildDeleteFilter(String caption, Function onTap) {
return Material(
color: Colors.orange,
borderRadius: BorderRadius.circular(5),
child: InkWell(
onTap: onTap,
splashColor: Colors.deepOrange,
child: Container(
padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: Row(
children: <Widget>[
Text(
caption,
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
),
Icon(
Icons.close,
size: 20,
color: Colors.white,
)
],
),
),
),
);
}
Here it's my code in this moment:
ClipRRect(
borderRadius: BorderRadius.circular(11),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.bottomLeft,
end: FractionalOffset.topRight,
colors: <Color>[Colors.purple, AppBaseColors.orange],
),
boxShadow: [BoxShadow(color: Colors.yellow)]
),
child: Material(
child: InkWell(
onTap: () {
print("tapped");
},
child: Container(
width: ButtonTheme.of(context).minWidth,
height: ButtonTheme.of(context).height,
child: Center(
child: Text(
"log in",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
color: Colors.transparent,
),
),
),
WHAT HAVE I TRIED:
Add the boxShadow in the first Container
Add the boxShadow in the second Container
Add another Container with boxShadow as a parent of ClipRRect
Add the boxShadow in Material as shadowColor (ofc is not working because I don't have any kind of shadow)
Adding also the spreadRadius and blurRadius in all of the cases from above, but nothing changed.
Any idea what I did wrong?
You need to do these changes:
remove the ClipRRect widget.
add borderRadius inside BoxDecoration.
add an Offset to your BoxShadow.
Container(
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(
begin: FractionalOffset.bottomLeft,
end: FractionalOffset.topRight,
colors: <Color>[Colors.purple, Colors.orange],
),
borderRadius: BorderRadius.circular(11),
boxShadow: [
BoxShadow(color: Colors.yellow, offset: Offset(5.0, 5.0))
]),
child: Material(
borderRadius: BorderRadius.circular(11),
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () {
print("tapped");
},
child: Container(
width: ButtonTheme.of(context).minWidth,
height: ButtonTheme.of(context).height,
child: Center(
child: Text(
"log in",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
color: Colors.transparent,
),
),
I fixed mine by removing the clipBehavior or setting it to Clip.none.