How to handle auto direction of text with dart-flutter? - flutter

I need to make auto-detection for posts language to change the text direction according to language, I Used 'firebase_mlkit_language.dart' to make the auto-detection of language.
this is a screenshot of screen:
I need the English post alignment to be from ltr.
this Function I made to check lang
Future<String> checkLang(String text)async{
final LanguageIdentifier languageIdentifier = FirebaseLanguage.instance.languageIdentifier();
final List<LanguageLabel> labels = await languageIdentifier.processText(text);
for (LanguageLabel label in labels) {
final String text = label.languageCode;
final double confidence = label.confidence;
}
return labels[0].languageCode;
}
while getposts function is processing and get the posts from firebase, I added this line to get a list of posts language
postsLang.add(checkLang(PostModel.fromJson(element.data()).text).toString());
then while generating the posts UI, in the post widget i made this condition to check whether the language is Arabic 'ar'
so, the direction should be from right to left.
textDirection: AppCubit.get(context).postsLang[index].toString() == 'ar' ?TextDirection.rtl:TextDirection.ltr,

Related

how to get country code like(+91 ,+1 etc) using user's current location flutter

I'm working on flutter app and I have a text widget where I want to show user's current country code based on his location without any dropdown.
I'm getting value like "IN","US" using Locale, but I don't want it,
I need numeric country code like +91 (for India), +1 (for US) etc.
anyone help me please.
You can use these files countries.dart and country.dart
Get the user country code from http://ip-api.com/json with http package and then use it to get the country phone code from countryList:
Future<String> getCountryPhoneCode() async {
var response = await http.get(Uri.parse('http://ip-api.com/json'));
var jsonResponse = json.decode(response.body);
final isoCode = jsonResponse['countryCode'];
print("country code " + isoCode);
return "+" +
countryList
.firstWhere((element) => element.isoCode == isoCode,
orElse: () => countryList.first)
.phoneCode;
}
I tested this and it works for me but you can improve it to avoid http exceptions
You can use country_codes package:
Install:
dependencies:
country_codes: ^2.0.1
Usage:
await CountryCodes.init(); // Optionally, you may provide a `Locale` to get countrie's localizadName
final CountryDetails details = CountryCodes.detailsForLocale();
print(details.alpha2Code); // Displays alpha2Code, for example US.
print(details.dialCode); // Displays the dial code, for example +1.
print(details.name); // Displays the extended name, for example United States.
print(details.localizedName);

How can I detect a Paste event in a TextEditingController?

I have a TextEditingController which is for phone numbers. If text is pasted in it, I need to process and modify it, trimming whitespaces etc. But that should not happen if the user is typing in whitespaces. How can I differentiate between these two types of events, and call my function only when user pastes text into the field?
Currently my code looks like this and uses onChanged. I'm looking for something like onPaste:
String getCorrectedPhone(String phone) {
phone = phone.replaceAll(RegExp(r"\s+"), "");
return phone;
}
FormBuilderTextField(
controller: _phoneController,
name: "phone",
onChanged: (String txt) {
print('Phone field changed! Is now $txt');
_phoneController.text = getCorrectedPhone(txt);
},
),
You can do something like declare a length with the phone number field and add a listener to the text editing controller or in oNchanged which checks if its length - the old length is >1. Then its pasted
int length = 0;
...
_phoneController.addListener((){
if (abs(textEditingController.text.length - length)>1){
// Do your thingy
}
length = _phoneController.length;
});
So there is another way, that is to ignore any touches on the text field using the IgnorePointer widget and then use Gesture Detector to implement custom long tap and short taps. For long taps, you'll have to create your own small pop up menu for copy cut paste and stuff. Here is some sample code for the UI. As for the functioning, I would recommend using the https://api.flutter.dev/flutter/services/Clipboard-class.html class of flutter. If you need any help in doing this let me know but it should be mostly straightforward

Search as user types functionality flutter

What is the functionality called where a user types into a search bar and API calls are made as the user types and they never have to click search?
I don't want a typeahead, I want to specifically be able to send off http requests as the user types in a search bar and return the results as a number of cards individual below the search bar.
The flutter_typeahead package is similar but I want to be able to control what happens with the results.
well you can do something like this
double waitForInputInterval = 300 // ms
double lastKeyStroke = null;
void search(String searchedTerm) {
final now = DateTime.now();
// wait 300ms before sending api requests;
if( lastKeyStroke != null && now.millisecond- lastKeyStroke < waitForInputInterval ) {
// send api request setState and other stuff
}
// for the first time
else {
lastKeyStroke = DateTime.now().millisecond;
}
}
/// inside build
TextField(
onChange: search
)

MS Teams for Iphone: incorrect displaying russian characters inside the thumbnail cards

I have a chatbot for MS Teams based on the BotFramework. When I return a ThumbnailCard from my chatbot to user, a russian charachter 'м' displays incorrectly like 'м'. This appears only on MS Teams for IPhone and not every time. Sometimes it displays correctly.
Screenshot:
enter image description here
I noticed, if I wrap text into a span tag, it displays correctly more often. But in general it doesn't help.
Also I asked the Microsoft Office 365 support to help me, but they redirected me to ask my question here.
// controller
public async Task<HttpResponseMessage> Post([FromBody] Activity activity)
{
// getting a text and a subtitle
var response = CreateAttachments(text, subtitle);
return Request.CreateResponse<ComposeExtensionResponse>(response);
}
private ComposeExtensionResponse CreateAttachments(string text, string subtitle)
{
var card = new ThumbnailCard { Text = text, Subtitle = subtitle };
var response = new ComposeExtensionResponse(new ComposeExtensionResult("list", "result"));
response.ComposeExtension.Attachments = new List<ComposeExtensionAttachment>{card.ToAttachment().ToComposeExtensionAttachment()};
return response;
}
Expecting 'м' character should display correctly, not like 'м'

Creating advanced user interfaces blackberry

I am looking out to create a text box similar to the image shown below in my blackberry form. As of now i am able to add a textfield which has a label like say
Name:(Cursor blinks)
Also when i try adding an image it doesnt show up beside the label but below it.I have tried aligning and adjusting image size etc but all in vain.How can layout managers help me do this any idea?
Can some one provide me an exact way as to how this can be achieved.Thanks in advance.
//Lets say adding textfield with validation for name
TextField1 = new TextField("\n Customer Name: ",null)
{
protected boolean keyChar(char ch, int status, int time)
{
if (CharacterUtilities.isLetter(ch) || (ch == Characters.BACKSPACE || (ch == Characters.SPACE)))
{
return super.keyChar(ch, status, time);
}
return true;
}
};
add(TextField1);
//Or either by using this,the text is placed within the image
Border myBorder = BorderFactory.createBitmapBorder(
new XYEdges(20, 16, 27, 23),
Bitmap.getBitmapResource("border.png"));
TextField myField = new TextField(" Write something ",TextField.USE_ALL_WIDTH | TextField.FIELD_HCENTER)
{
protected void paint(Graphics g) {
g.setColor(Color.BLUE);
super.paint(g);
}
};
myField.setBorder(myBorder);
add(myField);
//After trying out code given at Blackberry App Appearance VS Facebook App i am getting the following layout
I would still want to achieve a box that stands beside the label.Like the one shown in green image.Please guide.
Have a look to this answer. I think it may be helpful to you. Just play with the code until you get your desired look and feel.