I am creating a profile page, i want top like this
here is my code
Widget build(BuildContext context) {
return Scaffold(
appBar: new MyAppBar(title: Text("My Profile")
),
drawer:drawer(),
body:
SingleChildScrollView(
child:Stack(children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 150,
color: Colors.blue[500],
child: Align(
alignment:Alignment(-1.4,4.0),
child:Container(
//margin: EdgeInsets.all(20),
width: 400,
height: 125,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage('https://patientcaremedical.com/wp-content/uploads/2018/04/male-catheters.jpg'),
),
),
))),
])));
}
}
and here is its output
it is round from the bottom, can u please help where i am doing wrong.
You mean the bottom of your circle looks flat? That has nothing to do with your code. It's because the image you're using has white at the bottom. Take a look for yourself. If you change the backgroundColor: of your Scaffold to Colors.red or something other than white, you will see what I am talking about. All you need to do is use a different image that doesn't have white at the bottom, or crop your current one.
Related
I am trying to add an image and a white back arrow on top of a container with background gradient color while of-course preserving the background. Here is the result that I want:
This is the code that I tried:
Stack(
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[Color(0xffb21fc3), Color(0xff960cd1)],
),
),
),
Image.asset(
'assets/vip_big.jpg',
colorBlendMode: BlendMode.overlay,
),
Positioned(
top: 45,
left: 15,
child: IconButton(
icon: Icon(
Icons.arrow_back_ios,
size: 45.0,
color: Colors.white,
),
onPressed: () {}),
),
],
),
Here is what I got:
What changes do I need to make to get the correct output?
Replace the white color from image to transparent. Right now, because the image is jpeg, there is no transparency. So the image overlaps your gradient container.
I am trying to convert this circular icon to the one below but when I use borderRadius it doesn't change anything. What should I do?
to this :
Here is the code I am using
class IconTrangChu {
Border border;
BorderRadius borderRadius;
Icon icon;
int numOfItems;
String title;
Color colorIcon;
String routes;
IconTrangChu({
this.colorIcon,
this.icon,
this.numOfItems,
this.title,
this.routes,
this.border,
this.borderRadius,
});
}
List<IconTrangChu> listIconTrangChus = [
IconTrangChu(
title: "",
icon: Icon(
Icons.assessment,
size: 30.0,
color: Colors.white,
),
border: Border.all(width: 2, color: Colors.white),
borderRadius: BorderRadius.circular(5.0),
numOfItems: 3,
colorIcon: Color(0XFFB5CCFA),
routes: 'xemdiem',
),
]
You should reduce the border radius :
borderRadius: BorderRadius.circular(5.0),
If you want to create below same the picture ?
If yes ? Then you can try
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.25), // border color
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(2), // border width
child: Container( // or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue, // inner circle color
),
child: Container(), // inner content
),
),
),
If you no need border of circular container ? Then remove top decoration of parent container. I hope solve your problem. if not? please comment . I will try to another solution
I wish to make my logo with rounded corners and did that with ClipRRect from Flutter. I also wanted a set height and width to my image. These together make it seem if the image was never rounded. When I remove the set height and width from the image, ClipRRect makes the image rounded, but very large.
The code:
body: Container(
padding: EdgeInsets.all(20),
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.asset('assets/images/logo.png', width: 300, height: 150),
),
])));
Thank you, all help is appreciated.
Clear padding for the container and use fit property for the image widget.
Example
ClipRRect(
borderRadius: BorderRadius.circular(75.0),
child: Image.network(
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
height: 150.0,
width: 150.0,
fit: BoxFit.cover,
),
),
Update for Container with column widget tree:
Container(
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(75.0),
child: Image.network(
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
height: 150.0,
width: 150.0,
fit: BoxFit.cover,
),
),
],
),
),
I want to show a popup on a button tap. When I am trying to show AlertDialog with my custom design child Container of this AlertDialog not covering whole space. It has some padding from corners.
I have implemented in this way:
AlertDialog(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0)
),
content: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: Colors.redAccent,
width: screenSize.width,
height: screenSize.height*.90,
child: Text('test'),
)
],
),
),
)
For more info I am adding screenshot.
I found the solution for this. I resolve this issue by adding following tag in AlertDialog:
contentPadding: EdgeInsets.all(0.0),
Widget build(context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 300,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: color ?? Colors.blue,
borderRadius: BorderRadius.circular(10)
),
child: msg
)
],
);
}
This is build method of my widget and It renders this UI depending on what I pass as msg paramter
Loading text
Some very long text
Now the issue I am facing is that I am not able to wrap the text inside this container/blue box without setting it's width but If I set width of container/blue box then it will always stay that wide no matter how short the text is.
Now is there a way to set maxWidth (like let's say 500) of container/blue box? So that the blue box will become as wide as required for small text like "Loading" and for long text it will expand till it reaches width of 500 units and then will wrap the text ?
Required output for long text:
For small text like loading I dont want any change in UI but for long text I want it to look like this.
You can add a constraint to the Container Widget with the preferred maxWidth like this:
Widget build(context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: color ?? Colors.blue,
borderRadius: BorderRadius.circular(10)
),
child: msg
)
],
);
}
Use ConstrainedBox with BoxConstraints maxWidth, wrapped in a Flexible() widget. The Flexible widget allows for the box to resize for smaller screens as well.
Flexible(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 150),
child: Container(
color : Colors.blue,
child: Text('Your Text here'),
),
),
),
This required to be inside Row or Column Widget
1. Row
Row(
children: [
Container(
constraints: BoxConstraints(maxWidth: 300),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0)),
child: Text("Long Text....")
),
],
);
2. Column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(maxWidth: 300),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0)),
child: Text("Long Text....")
),
],
);
Here in both examples, it's working because Column and Row allow it's children to expand to it's given constraint/size.
Note: If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored.
Here's a simple method I use for long texts:
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 200),
child: Container(
child: Text(
'Long string of text',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
)
Note the maxLines attribute which might be helpful should you wish to show just a single line of text.
Use Constraints property in Container widget.
use maxWidth & minWidth value to achieve the requirement.
Container(
constraints: BoxConstraints(minWidth: 150, maxWidth: 300),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5)),
child: Text("")
)
This is how i fixed it
Center(
child: Container(
child: this.child,
width: 300,
height: double.infinity,
),
)
For me at least putting the Constrained box in IntrinsicWidth has solved issue.
IntrinsicWidth(
child: Container(
constraints: BoxConstraints(maxWidth: 200),
child: Row(
children: [
],
),
),
);
Maybe use a Flexible around the text and then wrap the Flexible in a fixed size containter? Just an idea.
I know it's late, but someone may get help in the future.
I used the auto_size_text plugin to get it done:
AutoSizeText(
'A really long String',
style: TextStyle(fontSize: 30),
minFontSize: 18,
maxLines: 4,
overflow: TextOverflow.ellipsis,
)
In my case my solution was this:
Wrapped in Row and add Spacer (in comment bubble widget I didn't define either width any max-width. it grows depends on the text.
to limit width added padding to comment bubble.
return Row(
children: [
CommentBubble(
chatText: snapshot.get('text'),
sentAt: snapshot.get('sentAt'),
sendBy: snapshot.get('sendBy'),
),
Spacer(),
],
);