In my code, there is this CircleAvtar which I want to replace it with a big rectangular box. I am new to flutter I am finding it difficult to achieve this.
child: Card(
elevation: 3,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
// border: Border.all(width: 0.5),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: CircleAvatar(
radius: 35,
backgroundImage:
NetworkImage(expertiseSearchModel.userImageURL),
),
),
I want it to look like this :
If you can show us what your current code is giving the output maybe I can help you more. But As far as i understood this, you can simple use Image.Network() to show the image and remove the circular avatar
Try this, if it works if not lemme know I will edit it accordingly
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: Image.network(expertiseSearchModel.userImageURL)
),
Inside your main container use the column as a child and put another container as a child and use the Image decoration property of the container to display pictures. You can change the border-radius of the child container to have those circular edges.
Related
HOW TO CREATE THIS?
Its like a ListTile or something with this curve effect in start of it, as of now it won't animate just the next option will be selected onTap but I'm unable to create this effect. I tried it with radius but that's not resulting out to be exact match of this. The code is below.
MY TRY SO FAR
Code
Container(
color: AppTheme.c.primary,
width: 200,
height: 60,
child: Row(
children: [
Container(
width: 50,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.horizontal(
right: Radius.elliptical(
MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height,
),
),
),
),
],
),
),
I have a design as you can see below and the question is how can I apply this notch effect on Arrow ? Is there any easy way to do it just like in Floating Action Button ? Thanks in advance.
I have created Dartpad, please look into this and do let me know if you need any help.
Dartpad Link : https://dartpad.dev/flutter?9bd55396e067e71a839851e18905f478
Code:
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
height: 70,
child: Stack(alignment: Alignment.centerRight, children: [
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Container(
height: 70,
decoration: BoxDecoration(
color: Colors.cyan, borderRadius: BorderRadius.circular(8)),
),
),
Container(
width: 40,
height: 65,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 5)),
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.cyan,
child: const Icon(Icons.chevron_right),
),
)
]),
),
);
Output:
Hey you can achieve it in 2 way
1st one and simple - Create a box decoration widget and a circle shape widget with white border and put these together with Stack and fit as per your requirements.
2nd use Custom Clipper or Custom Paint and draw your shape.
I have created a Card whose height depends on its content, so it's height is not defined anywhere. Now I want to add a left blue border to the Card, whose height adjusts to the current height of the Card (his parent).
So when I type in any fixed height (e.g. 50), the blue border looks like this:
height: 50
This is my Code:
Card(
margin: EdgeInsets.zero,
elevation: 0,
color: Colors.black12,
shape: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
borderSide: BorderSide.none,
),
child: Container(
width: double.infinity,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("This is random text."),
Text("There can be more."),
Text("So the height of this Card is never fix."),
],
),
),
Container(
height: 50, // This height must match the current height of the Card
width: 8,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(topLeft: Radius.circular(6), bottomLeft: Radius.circular(6))
),
)
],
),
),
)
But I want a dynamic height, with which it should look always like this, whether the content changes or not:
height: matches current height of Card
Neither double.infinity helped me nor an Expanded Widget.
You can use Container's decoration as parent and ClipRRect to round the corners. You can also wrap with Card if you feel needed.
Padding(
padding: const EdgeInsets.all(24.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.grey,
border: Border(
left: BorderSide(
color: Colors.blue,
width: 12,
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text("This is random text."),
Text("There can be more."),
Text("So the height of this Card is never fix."),
],
),
),
)),
A way to do this with much less code:
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
// add Card-like elevation
boxShadow: kElevationToShadow[4],
gradient: LinearGradient(
stops: const [0.03, 0.03],
colors: [
Colors.blue,
Colors.grey[900]!,
],
),
borderRadius: BorderRadius.circular(3),
),
child: const Text(' Sunt magna irure ut reprehenderit.'),
),
If you use a gradient you might want to add some padding on the left of the text though since it might go into that "Color Marker" in the next line depending on how big the width is.
Result
I have a profile page layout as its seperated by 2 and 1 positioned for avatar picture. my down container color, ı cant set it seems not working ıdk why. here is my code below:
body: new Stack(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
height: topWidgetHeight,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/9.jpg"),
fit: BoxFit.cover)
),
),
new Container(
color: Colors.red,
)
],
),
new Positioned(
child: new Container(
height: 150,
width: 150,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/0.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(75.0)),
boxShadow: [
BoxShadow(blurRadius: 7.0, color: Colors.black)
],
),
),
left: (MediaQuery.of(context).size.width/2) - avatarRadius,
top: topWidgetHeight - avatarRadius,
)
],
)
the container is not appearing because you have not given any height and to container
please give it height and width and then try
I am trying to align 2 Texts and an Image as a child of a FlatButton (like this) but somehow the elements don't align as they should.
I tried using Stack, Align, Rows and so on but I weren't really successful (I am also a beginner when it comes to dart or flutter)
new ButtonTheme(
minWidth: 171,
height: 176,
child:new Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(19),
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF8F94FB),
Color(0xFF5D62D4)
]
)
),
child: FlatButton(
onPressed: () => handleButtonClick(),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
)
],
),
),
),
),
This is the result:Image
Replace your FlatButton with below code and see if it works for you.
FlatButton(
padding: const EdgeInsets.all(0),
onPressed: () => {
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Container(
width: 109,
height: 109,
child: Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
),
),
],
),
),
You can debug step by step. First, this is a technique that I use with me and my other fellows devs. In the child parameter, pass a Container, this container will receive a color, Colors.red for example, with that you can see how much size your container's area contain.
After that, if you want to centralize the content inside this Container, passa a Center as child, and the child of this Center widget, you can pass your Image, and define this Image's size.
child: Container(
color: Colors.red,
child: Center(
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
),
),
Tell me if this worked for you.