I follow the tutorial of card topic and to write the code of flutter gallery card example
https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/cards_demo.dart
Official card example here
I don't know the logic with stack combine with fittedbox. Why there is a height ? I just follow the tutorial of set the margin of bottom, left and right to 16.0,16.0,16.0. If i do not have any misunderstanding, it's a margin between parent and size-box. Why would have height existing ? Is there any black magic code of that? I just want to understand the logic of that.
My result image
var titleImage2 = new SizedBox(
height: 200.0,
child: new Stack(
children : <Widget> [
//new Text("First element" , style: new TextStyle(color: Colors.red),),
new Positioned(
//top: 0.0,
left : 16.0,
right : 16.0,
bottom: 16.0,
//width: 100.0,
child: new FittedBox(
fit : BoxFit.scaleDown,
alignment: Alignment.topLeft,
child : new Container(
child: new Text(
"Hello world"
),
)
),
)],
),
);
Summary : Why only set left ,right, bottom to margin 16.0, it will appear an existing height? I'm a newbie of flutter
left : 16.0,
right : 16.0,
bottom: 16.0,
Weird image
I can't tell you the specifics of the actual algorithm that makes this happen, but I can tell you why - because you're using a FittedBox. FittedBox does all sorts of calculations to try to fit your item into the parent item, based on the constraints of the parent and of the child. It's useful for things like images which have a specific aspect ratio but otherwise no constraints on their size.
Because you have a text as the child of the FittedBox, it is probably having trouble calculating the size it can scale to - I have no idea what Text would report (and I'm ignoring the Container because it basically just delegates layout to its child if it doesn't have width & height set). Try setting it to BoxFit.cover and you'll see what happens. But why it picks that particular size I have no idea.
I would recommend removing the FittedBox unless you're using an image; it is the cause of what you're seeing.
Related
I am loading a description dynamically as text, I want to design the text and insert some spacing between the text, Here is the code I am trying.
Container(
height: 240.h,
width: Get.width / 1.1,
child: SingleChildScrollView(
child: Text(
product.description,
style: subHeadingTextStyle6,
),
)),
The output of my code is like;
I want the following spacing of the text
Text( product.description, style: TextStyle(color: Colors.black, height: 4)),
Update to comment: "thanks for your concern, the height property is good, but it did it equally for all line, what else I have to do to look like the picture, which I have shared in question"
This will do the job!
RichText(
text: TextSpan(
children: splitText(text),
),
)
List<TextSpan> splitText(String text) {
List<TextSpan> reasonList = [];
text.split(".").forEach((element) {
reasonList.add(TextSpan(
text: "$element\n\n\n", style: TextStyle(color: Colors.black)));
});
return reasonList;
}
So what are we doing exactly?
First we're turning your text into a list of sentences, with text.split(".") which splits the text whenever it encounters a '.'
Now we are adding it in a list of TextSpan to be able to use it in RichText.
Here's the part where it makes space between every sentence "$element\n\n\n" I don't know if you know but \n means insert a new line. As if you hit the enter button. I used 3 \n's so that it will leave 2 lines empty after every sentence.
I think just adding \n\n between the paragraphs should work.
is there some widget for grid use-case?
I am trying using Wrap with Expanded or Flexible inside it. Its not working.
Because I have dynamic widgets with random grid settings and need to draw like cols in css bootstrap.
Wrap(
children<Widget>:
[
Expanded(flex: 2, child: ...)
Expanded(flex: 4, child: ...)
]
)
Sometimes I want to force a widget to take a specific size, which I usually do by using a SizedBox/ConstrainedBox/Container
But I've realized that in some situations, the widget merely ignores it and takes a different size. Why is that?
Example:
Expected behavior:
Actual behavior:
This situation happens when the parent and its child wants two different sizes; but the parent has no idea how it should align its child within its boundaries.
The following code doesn't give enough information to tell how to align the red box within the blue box:
Container(
color: Colors.blue,
width: 42,
height: 42,
child: Container(
color: Colors.red,
width: 24,
height: 24,
),
),
So while it could be centered as such:
it would also be perfectly reasonable to expect the following alignment instead:
In that situation, since Flutter doesn't know how to align the red box, it will go with an easier solution:
Don't align the red box, and force it to take all the available space; which leads to:
To solve this issue, the solution is to explicitly tell Flutter how to align the child within its parent boundaries.
The most common solution is by wrapping the child into an Align widget:
Container(
color: Colors.blue,
width: 42,
height: 42,
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.red,
width: 24,
height: 24,
),
),
),
Some widgets such as Container or Stack will also offer an alignment property to achieve similar behavior.
I am Japanese, and I want to write Japanese words vertically in Fabric.js.
Japanese language has small letters, and the positions of the them are top-left corner in vertical writing.
So, I want to change the position of a small letter in iText.
I thought that I can change the position of a character by using "styles" parameter of iText, so I wrote as follows.
var iTextSample = new fabric.IText('h\ne\nl\nl\no', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
1: {
0: { textDecoration: 'underline', ←★ WORK
fontSize: 80, ←★ WORK
top:-10, ←★ NOT WORK
transformMatrix: [ 1, 0, 0, 1, 18, -50 ] ←★ NOT WORK
},
},
}
});
https://jsfiddle.net/uemon/tLy9eqj6/77/
The 'textDecoration' and 'fontSize' worked, but the 'top' or 'transformMatrix' didn't work.
Can't I use 'top' or 'transformMatrix' in the "styles" parameter ?
How can I change the position of one character ?
Thank you in advance.
So from the use of textDecoration property i guess you are on the 1.7 or similar version.
You should really move to the 2.0 version that has integrated support for multibyte languages and composition.
Said that, there is no support for vertical text in fabricjs at all.
This may change in the future.
You should really go here:
https://github.com/kangax/fabric.js/issues/511
refresh the request and maybe add some detail about it, because the actual mantainer may have no clue on how vertical text should work regarding input, decorations, multiple columns and so on.
Currently, whenever I set the text of a fabric.Text object dynamically, using the set('text', 'some random text') function, the width seems to grow bi-directionally i.e from both the left and right side.
Is there any way to make it grow from either the left or right side only.
I have achieved this by explicitly calculating the top_left_x, top_left_y, top_right_x, top_right_y and using some arithmetic logic for the same.
But what is there any internal fabricJS property (or something similar) by which this can be achieved.
For ex: In the Kitchensink demo, if you add a new Text object and modify the text in the lower-right text area, you will see that the text grows from the right while its left side remains fixed. This is exactly what I wish to achieve.
Any suggestions anyone?
This happened because the default origin point is the center of object. So you need set the "originX" to "left". As you can see in the Kintchensink source file:
document.getElementById('add-text').onclick = function() {
var textSample = new fabric.Text(text.slice(0, getRandomInt(0, text.length)), {
left: getRandomInt(350, 400),
top: getRandomInt(350, 400),
fontFamily: 'helvetica',
angle: getRandomInt(-10, 10),
fill: '#' + getRandomColor(),
scaleX: 0.5,
scaleY: 0.5,
fontWeight: '',
originX: 'left',
hasRotatingPoint: true
});
canvas.add(textSample);
updateComplexity();
};