I am trying to find a solution to this problem.
I have a text input, and when the user types in the text input "trending". I return a result set of text containing the word trending. What I want to do is display the text that was entered bold (example: trendingitems).
The solution I have currently works, sort of.
String resultText = "trending items";
int x = resultText.toLowerCase().indexOf(queriedText.toLowerCase()); // Problem happens here, I get -1 as a result
List parts = [ // I use this list to display in a Rich Text to adjust the style of the text the user input
if (resultText.substring(0, x).isNotEmpty) resultText.substring(0, x).trim(),
queriedText,
if (resultText.substring(x + queriedText.length).isNotEmpty)
resultText.substring(x + queriedText.length).trim()
];
int idx = resultText.toLowerCase().indexOf(queriedText.toLowerCase());
while (idx > 0 && idx < resultText.length) {
String _subT = resultText.substring(idx + queriedText.length);
idx = _subT.toLowerCase().indexOf(queriedText.toLowerCase());
}
If the user enters trending items but the result set has trendingitems, int x is returned a value of -1 which is where the widget crashes (understandably).
What I would like to get is the following:
This scenario works:
User types: trending
Display: trending items in the list
This scenario crashes:
User types: trending items
Display: trending items in the list
TIA
I've made a package for this: text_chunk_styling
dependencies:
text_chunk_styling: ^2.0.1
Basically it will apply a custom TextStyle to some part of your text in your case the code would be something like this:
Sample 1
TextChunkStyling(
text: 'trending items',
highlightText: const ['trending'],
highlightTextStyle: const TextStyle(fontWeight: FontWeight.bold),
)
Sample 2
TextChunkStyling(
text: 'trending items',
highlightText: const ['trending items'],
highlightTextStyle: const TextStyle(fontWeight: FontWeight.bold),
)
Related
I have a list of data "percesc", which have a repetitive number of DS_DISCIPLINA_DIS (ordered by).
I'm using a class that I found on internet to make a Accordion style of Cards that contains a "Table" for each DS_DISCIPLINA_DIS different records.
So, for each number of DS_DISCIPLINA_DIS records I want a different "Table" to put on each Card.
PercEsc = await _iAlunoRepository.getPercEscolar(TurmaAtual);
accordionChildren.clear();
String discAtual = "";
List<TableRow> linhas = [];
for (PercEscModel percesc in PercEsc) {
if (percesc.DS_DISCIPLINA_DIS != discAtual) {
if (discAtual != "") {
Table tabelaNotas = Table(children: linhas);
linhas.clear();
var newItem = Accordion(discAtual, tabelaNotas);
accordionChildren.add(newItem);
}
discAtual = percesc.DS_DISCIPLINA_DIS;
linhas.add(const TableRow(children: [
Text("Módulo", style: TextStyle(fontSize: 20.0)),
Text("Designação", style: TextStyle(fontSize: 20.0)),
Text("Nota", style: TextStyle(fontSize: 20.0))
]));
}
linha.add(TableRow(children: [
Text(percesc.DS_ABREVUNID_ORG_UNO, style: TextStyle(fontSize: 11.0)),
Text(percesc.DS_UNID_ORG_UNO, style: TextStyle(fontSize: 11.0)),
Text(percesc.QT_NOTA_AVL.replaceAll(".00", ""),
style: TextStyle(fontSize: 11.0))
]));
}
if I made this way, all accordionChildren stays with the records of the last DS_DISCIPLINA_DIS.
if I delete "linhas.clear();" line, all accordionChildren stays with all records os all DS_DISCIPLINA_DIS.
I thought that when I write "Table tabelaNotas = Table(children: linha);" I was making a new "tabelaNotas" and the old one was discarded, but it seems that it stays the same.
How can I atribute the different data to each accordionChildren?
Sorry about my english
Let me simplify the question.
if I have this code:
Table tabelaNotas = Table(children: linhas);
var newItem = Accordion(discAtual, tabelaNotas);
accordionChildren.add(newItem);
linhas.clear();
"linhas" is a "List" of data to lines of Table
After executing this line ("accordionChildren.add(newItem);"), the first child of accordionChildren has 18 lines.
But after "linhas.clear();", accordionChildren will have no lines.
I understand that flutter works with reference to objects, so if I define "Table tabelaNotas = Table(children: linhas);", the content of table wil be somehow "linked" to "linhas", and if I clear linhas, I am also clearing the content of Table.
But I want to clear (delete) "linhas" without loosing that data on accordionCildren.
Probably is something very simple, but as before last week I never had worked with flutter, I'm a little bit confused with this situation.
If anyone could help me, I will be forever grateful.
I found the answer
List<TableRow> linhasAux = List.from(linhas);
tabelaNotas = Table(children: linhasAux);
var newItem = Accordion(discAtual, tabelaNotas);
accordionChildren.add(newItem);
linhas.clear();
this way, I made a copy (linhasAux) of List (linhas) and added the copy to table. Now I can clear "linhas" without loose the information that were already on Table.
In my flutter application I'm using qcf_bsml font, I have to generate the hex values to display the corresponding words in the font file. For that, I'm using this equation:
(64396 + Id >= 64434) ? 64429 + chapterId : 64396 + Id
I convert the result from above to hex value using this function:
calculatehex(){
final myInteger = (64396 + 1 >= 64434) ? 64429 + 1 : 64396 + 1; //Id is 1: result 64397
final hexString = myInteger.toRadixString(16);
final paddedString = hexString.padLeft(4, '0');
uppercaseString = paddedString.toUpperCase();
print(uppercaseString); //displays correct hex value in console :FB8D
}
The problem is I am only able to hardcode the hex value in text field to display the correct word. For example:
new Text('\u{FB8D}',textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ), // works fine
But if I use the variable name to display text, it displays the wrong word.
new Text(uppercaseString,textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ), // not showing correct word
I tried to concatenate the string like this, but still not working fine
new Text(r'\u{'+uppercaseString+'}',textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ),
Please help me understand why is it display the correct word with hardcoded value with '\u' but not with variable. Thank you
I solved it by using String.fromCharCode(int.parse()) & making following changes in the code:
uppercaseString = paddedString.toUpperCase();
finalhexString ='0x$uppercaseString';
then:
new Text(String.fromCharCode(int.parse(finalhexString)),textDirection: TextDirection.rtl,
style:TextStyle(fontSize:30.0, fontWeight: FontWeight.w100,fontFamily: 'QCF'),
textAlign:TextAlign.center ),
How can I have list of boxes containing all words I render, I need it to determine which word is user long clicking?
In other words how can I find what maxRange so I can use getBoxesForRange in code below?
My code :
var pin = Offset(0, 0);
// To create a paragraph of text, we use ParagraphBuilder.
final ui.ParagraphBuilder builder = ui.ParagraphBuilder(
ui.ParagraphStyle(
textDirection: ui.TextDirection.rtl,
textAlign: ebookTextAlign,
fontFamily: "Asan",
fontSize: ebookMainTextSize,
),
)..pushStyle(ui.TextStyle(color: const ui.Color(0xFF000000)));
spans.forEach((spn) {
if (spn.localName == "p") builder.addText("\n");
builder.addText(spn.text + " ");
});
builder.pop();
paragraph = builder.build()
..layout(ui.ParagraphConstraints(width: size.width));
var list = new List<ExtendedTextBox>();
var boxes = paragraph.getBoxesForRange(0, maxRange);
I am tring to use a map to get words from a string and map them to a widget.
I have tried this but my problem is the key for the words doe and sister get the same keys so i end up getting only one of them
String theText = "my name is doe from http.doe.com, my sister is selly. doe and saqil are not sister friends of koiter.";
wordsMap = Map.fromIterable(text.split(' '),
key: (v) => v,
value: (v) => TextSpan(text: v));
so I tried the code below
Map mapMyWord = {};
// var wordsMap;
var splitForSize = text.split(' ').toList();
for(var t = 0;t<= splitForSize.length-1;t++){
mapMyWord[t] = {'$t':TextSpan(text: splitForSize[t])};
}
but In the second code when I tried to access mapMyWord.values.toList() it returns a list of map data again
[{0: TextSpan("my")}, {1: TextSpan("name")}, {2: TextSpan("is")}, {3: TextSpan("doe")}, {4: TextSpan("````http.codeish.com````,")}, ... ,{19: TextSpan("koiter")}]
so my main problem is how to get the values from here.
It returns maps because you're assigning maps with this line :
mapMyWord[t] = {'$t':TextSpan(text: splitForSize[t])};
So in the end you have a Map<Int, Map<String, TextSpan>>.
If you meant to turn the words of that sentence into a list of TextSpan, this would be the way :
var textSpanList = text.split(" ").map((word) => TextSpan(text: word)).toList();
If you want to do it directly in the widget tree, this would do it :
children: <Widget>[
for(var word in text.split(" "))
Text(word),
]
N.B: This last snippet requires a minimum SDK of 2.2.2 in the pubspec.yaml
In your second code, change the assignment part:
Map mapMyWord = {};
// var wordsMap;
var splitForSize = text.split(' ').toList();
for(var t = 0;t<= splitForSize.length-1;t++){
mapMyWord[t] = TextSpan(text: splitForSize[t]);
}
Then, mapMyWord.values.toList() will only return a list of TextSpan's. And if you want to get some specific value from the map:
int index = 1; //some number
print(mapMyWord[index]); //this will return one TextSpan
This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:-
I have an Ag-Gird having 3 columns respectively:-
Id (resizable column from UI)
Name (resizable column from UI)
Address (resizable column from UI)
I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to.
Issues:-
How to increase the row height, when Address column width is completely filled-up with words or when users press Enter or Shift + Enter?
How to adjust height automatically when users resize the Address column?
Please help me with these issues.
Thanks
There are multiple things to be taken care.
Have a look at the updated Stackblitz
Have cellClass: "cell-wrap-text" attribute in the ColDef for Address column and have the appropriate CSS
Handle columnResized event so that this.gridApi.resetRowHeights() can be called to adjust the height of the rows whenever the column is resized
Also handle cellEditingStopped event, so that when the data for the column is updated, the row height also gets updated accordingly.
onColumnResized() {
this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
this.onColumnResized();
}
Provide autoHeight: true property in the defaultColDef
defaultColDef = { autoHeight: true };
Update:
provide cellEditor: 'agLargeTextCellEditor' if you want to have textarea like control for this field.
Check this StackBlitz
I was facing the same issue in react I wanted to increase the height of row according to the content of the text area and on enter it should go to next line in text area instead of not turning into read only, so what I did i used the suppressKeyboardEvent of ag-grid and wrote the code into it, here is my code
cellClass: "description-cell",
width: 200,
cellRendererFramework: (params) =>{
return <pre> {params.data.description}</pre>
},
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: (params) => {
return {
maxLength: '1000',
cols: this.props.cols,
rows: 2
}
},
suppressKeyboardEvent: (params) => {
const KEY_ENTER = 13;
const keyCode = params.event.keyCode;
const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
params.event.target.style.height = 'inherit';
params.event.target.style.height = `${params.event.target.scrollHeight}px`;
params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
this.gridApi && this.gridApi.onRowHeightChanged();
return gridShouldDoNothing;
}
I hope this could help you or someone who is looking for it :)
What helped me was to call redrawRows()
Typescript + React example:
const onCellEditingStopped = (event: CellEditingStoppedEvent<any>) => {
event.api.redrawRows();
};