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: ...)
]
)
Related
Hello I want to show how I will change the text style of this in the list of strings
١۷ع in last line
static final List Fatiha = [
'اَلْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِیْنَۙ۱',
'الرَّحْمٰنِ الرَّحِیْمِۙ۲',
'مٰلِكِ یَوْمِ الدِّیْنِؕ۳',
'اِیَّاكَ نَعْبُدُ وَ اِیَّاكَ نَسْتَعِیْنُؕ۴',
'اِهْدِنَا الصِّرَاطَ الْمُسْتَقِیْمَۙ۵',
'صِرَاطَ الَّذِیْنَ اَنْعَمْتَ عَلَیْهِمْ ۙ۬ۦ',
'غَیْرِ الْمَغْضُوْبِ عَلَیْهِمْ وَ لَا الضَّآلِّیْنَ۠١۷ع'
];
If you want to Change Style In the UI, Then you have to Show Strings In the Text("String",TexStyle(fontSize,FontFamily,,etc)) But If you want to See in the Code Editor for better Visibility then you have to Adjust The Code Editor Zoom Level using Control +,
Text.rich(
TextSpan(
style: style1,
children: [
TextSpan(
text:
$firstPart',
),
TextSpan(
text: '$partYouWantDifferentStyle',
style: style2,
),
TextSpan(
text: '$lastPart',
)
],
),
textDirection: TextDirection.rtl,
)
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.
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 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.
I want to add class to the textbox, how could I add that using fabric.js
canvas.set('class','textbox1');
Right now here i'm using canvas.set('class','textbox1'); for add any class.
Thanks In Advance.
I don't think it is necessary to use a class on a canvas element. Fabric.js has methods for their TextBox object with which you can style your component. The same goes for the Canvas object itself.
http://fabricjs.com/docs/fabric.Canvas.html
http://fabricjs.com/docs/fabric.Textbox.html
Fabric doesn't appear to have a Class option and CSS has no effect on canvas objects anyway.
So, if you wanted to set the background color of your TextBox you would do the following:
var t1 = new fabric.Textbox('My Text', {
width: 200,
top: 5,
left: 5,
fontSize: 16,
textAlign: 'center',
backgroundColor:'rgb(200,200,200)'
});