Related
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 am just trying to display the camera's preview and align the user to take a selfie.
I have the following snippet of code and I would like to make the person's image transparent (not white) and fill the surrounding area with color.
but the problem that I am facing, if I set the SVG with transparent color, it will display the color of the parent (container),
I need to make the person's image totally transparent to see the camera's preview with filling the surrounding area with color.
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
child: Center(
child: _cameraPreviewWidget(),
),
),
Container(
height: MediaQuery.of(context).size.height,
color: Colors.grey[700].withOpacity(0.8),
child: Align(
alignment: Alignment.bottomCenter,
child: SvgPicture.asset(
'assets/svg/selfie_person.svg',
alignment: Alignment.bottomCenter,
fit: BoxFit.cover,
color: Colors.white,
),
),
),
Container(
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.05,
bottom: MediaQuery.of(context).size.height * 0.15,
),
child: Column(
children: [
ListTile(
leading: InkWell(
onTap: () {
Navigator.pop(context, null);
},
child: FaIcon(
FontAwesomeIcons.arrowLeft,
color: Colors.white,
),
),
title: Center(
child: Text(
"Take a selfie",
style: Theme.of(context).textTheme.subtitle2,
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.05,
),
child: Text(
"Take a quick selfie so we know it's you, this is never public",
style: Theme.of(context).textTheme.subtitle2,
overflow: TextOverflow.ellipsis,
maxLines: 3,
textAlign: TextAlign.center,
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: _captureButton(),
),
),
],
),
),
),
],
),
),
);
I don't understand your question well, but i think you should try Opacity class .. wrap your SVG with Opacity
You can check it :
https://api.flutter.dev/flutter/widgets/Opacity-class.html
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(),
],
);
I'm trying to make a circular image box, but after using shape: Boxshape.circle, it is working properly on my current image. I'm sure that the shape property doesn't depend on the image pixel or any sort of thing.
I have this code:
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 144.0,
width: 144.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('MY_IMAGE')
)
)
)
]
)
)
],
);
I have read about the Boxdecoration from this link: Flutter - BoxDecoration. I'm confident that the shape should work but in my case, it is not working.
This is the result which I'm getting right now:
Use a ClipRRect inside a SizedBox :
Container(
child: new SizedBox(
height: 144.0,
width: 144.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(72.0),
child: new Image.asset('MY_IMAGE'),
),
),
),
Try this code
Container(
color: Colors.amber,// this is just for detection, rounded or not
child: Center(
child: new Container(
height: 144.0,
width: 144.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(72),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/img1.png')))),
),
)
Use the same code that you have posted in the question. But, instead of BoxFit.contain or BoxFit.fill, try using BoxFit.cover.
As it is mentioned in the comment by Mazin Ibrahim in the above answer, the actual height of your image must be less than the radius of the circular container, so even though the container is circular in shape you are not able to see it.
Check this link for more details.
For me it works using ClipOval in the child, and increasing a bit the image size with Transform.scale
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(40))),
child: ClipOval(
child: Transform.scale(
scale: 1.6,
child: Image.asset(
"my asset image",
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
),
)
For my case it worked like that -
Container(
height: (20.0),
width: (20.0),
decoration: const BoxDecoration(
shape: BoxShape.circle,
),
child: ClipOval(
child: SvgPicture.asset(
'assets/icons/$icon.svg',
fit: BoxFit.cover,
color: color,
),
),
)
I'd like to know how to center the contents of a Text widget vertically and horizontally in Flutter.
I only know how to center the widget itself using Center(child: Text("test")) but not the content itself. By default, it's aligned to the left. In Android, I believe the property of a TextView that achieves this is called gravity.
Example of what I want:
Text alignment center property setting only horizontal alignment.
I used below code to set text vertically and horizontally center.
Code:
child: Center(
child: Text(
"Hello World",
textAlign: TextAlign.center,
),
),
You can use TextAlign property of Text constructor.
Text("text", textAlign: TextAlign.center,)
I think a more flexible option would be to wrap the Text() with Align() like so:
Align(
alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
child: Text("My Text"),
),
Using Center() seems to ignore TextAlign entirely on the Text widget. It will not align TextAlign.left or TextAlign.right if you try, it will remain in the center.
child: Align(
alignment: Alignment.center,
child: Text(
'Text here',
textAlign: TextAlign.center,
),
),
This produced the best result for me.
THE TEXT TITLE MUST BE ALWAYS ON TOP.
wrong way:
child: Center(
child: Text(
textAlign: TextAlign.center,
"Hello World",
),
),
right way:
child: Center(
child: Text(
"Hello World",
textAlign: TextAlign.center,
),
),
U need to use textAlign property on the Text widget. It produced the best results for me
Text(
'Hi there',
textAlign: TextAlign.center,
)
If you are a intellij IDE user, you can use shortcut key Alt+Enter and then choose Wrap with Center and then add textAlign: TextAlign.center
Put the Text in a Center:
Container(
height: 45,
color: Colors.black,
child: Center(
child: Text(
'test',
style: TextStyle(color: Colors.white),
),
),
);
Text element inside Center of SizedBox work much better way, below Sample code
Widget build(BuildContext context) {
return RawMaterialButton(
fillColor: Colors.green,
splashColor: Colors.greenAccent,
shape: new CircleBorder(),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
width: 100.0,
height: 100.0,
child: Center(
child: Text(
widget.buttonText,
maxLines: 1,
style: TextStyle(color: Colors.white)
),
)
)]
),
),
onPressed: widget.onPressed
);
}
Enjoy coding 👨💻
Overview: I used the Flex widget to center text on my page using the MainAxisAlignment.center along the horizontal axis. I use the container padding to create a margin space around my text.
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(20),
child:
Text("No Records found", style: NoRecordFoundStyle))
])
you have to set your Text widget property to set textAlign.center.
center(
child : Text(
'Hello',
textAlign: TextAlign.center))
Wrap your Text widget inside the Align widget and add Alignment.center.
Align(
alignment: Alignment.center,
child: Text(
'Some Text',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
)
maybe u want to provide the same width and height for 2 container
Container(
width: size.width * 0.30, height: size.height * 0.4,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6)
),
child: Center(
child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
color: Colors.white,
),),
),