How can I localize showDatePicker on a single-locale app? - localization

I have an app intended for just one locale that is not English, so it includes hardcoded strings in Text objects. I'm attempting to localize showDatePicker()
If I try to pass localizationsDelegates: [GlobalMaterialLocalizations.delegate] to the MaterialApp I get an exception.
And if I try to pass locale: const Locale("es") to showDatePicker without passing localizationDelegates to MaterialApp, I get an exception.

I've solved it.
Pass these arguments to the materialApp:
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate, // ONLY if it's a RTL language
],
supportedLocales: const [
Locale('fr', 'FR'), // include country code too
],
And since the locale is already defined, it's not necessary to pass it to showDatePicker.

Related

Flutter(iOS) -"No CupertinoLocalizations found", how fix it?

I using TextField in my flutter app. It worked on on android. but on ios when I try to paste from the clipboard into the field I get the error:
No CupertinoLocalizations found.
_CupertinoTextSelectionControlsToolbar widgets require CupertinoLocalizations to be provided by a Localizations widget ancestor.
The cupertino library uses Localizations to generate messages, labels, and abbreviations.
To introduce a CupertinoLocalizations, either use a CupertinoApp at the root of your application to include them automatically,
The specific widget that could not find a CupertinoLocalizations ancestor was: _CupertinoTextSelectionControlsToolbar
This is part of my code, main page:
return Localizations(
locale: Locale('en'),
delegates: [
GlobalMaterialLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
DefaultWidgetsLocalizations.delegate,
],
child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(...)
....
)
in each tabs I use this page:
return MaterialApp(
navigatorKey: navKey,
home: child,);
I have separate navigation in each tab.
how do I fix this? any ideas? I will be grateful
You can try to add a delegate of GlobalCupertinoLocalizations instead of DefaultCupertinoLocalizations into your delegates:
delegates: [
GlobalMaterialLocalizations.delegate,
// DefaultCupertinoLocalizations.delegate,
GlobalCupertinoLocalizations.delegate, // Here !
DefaultWidgetsLocalizations.delegate,
],
EDIT:
You may need to add supportedLocales too.
supportedLocales: [
const Locale('en'), // English
// const Locale('de'), // German, etc.
]

Flutter TextField with number keyboard, comma is needed instead of period (Only iOS)

I want to create a TextField in Flutter. The TextField is for decimal numbers. So i set keyboardType: TextInputType.numberWithOptions(decimal: true). Now I get a number keyboard on iOS, but this number keyboard has a period (.) instead of a comma (,). The language of the iOS device is German.
My current TextField:
TextField(
key: Key("pricePerLiter"),
style: TextStyle(color: inputTextColor),
textAlign: TextAlign.end,
focusNode: pricePerLiterFocusNode,
keyboardType:
TextInputType.numberWithOptions(decimal: true),
decoration: inputDecoration.copyWith(
suffixText: "€", errorText: pricePerLiterError),
controller: pricePerLiterTextController,
onEditingComplete: () {},
onChanged: (value) {},
)
My Localization is set up like following in my Material app:
MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('de', 'DE'),
],
home: MyHomePage(),
)
What do I need to change to get a number keyboard with a comma (,) instead of a period (.)?
On iOS you have to enable the de (or any other locale than en_US) locale in the ios build settings even for flutter apps. Open the ios/Runner.xcworkspace of your flutter app with Xcode. Select the Project Runner. On the "Info" page you will see the locales enabled for your app under "Localisations". Add the de locale (or any other) here. Rebuild the app (by Xcode or Flutter, doesn't matter).
Look also here for another approach:
https://flutter.dev/docs/development/accessibility-and-localization/internationalization#appendix-updating-the-ios-app-bundle

Customize color of text inside `backquotes` in VSCode

The only options I can find that deal with custom coloring inside Visual Studio Code are those:
"editor.tokenColorCustomizations": {
"[Atom One Dark]": {
"comments": "#FF0000" // only 6 color-customizable
},
"workbench.colorCustomizations": {
"statusBar.background": "#666666",
"panel.background": "#555555",
"sideBar.background": "#444444"
},
},
Is there a way to set a custom color for these types of things? One exists for comments, for strings (inside "string"). I believe something similar should be possible for other stuff using regexps. Thanks in advance.
Search for tokenColorCustomizations and textMateRules and you will find that you can do something like this (see colorizing with textmate):
"editor.tokenColorCustomizations": {
"textMateRules": [
{
// works for a language that recognizes backticks as string templates
"scope": "string.template",
"settings": {
"foreground": "#FF0000"
}
},
{
"scope": "punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end",
"settings": {
"foreground": "#F0F"
}
},
]
}
using the Inspect TM Scopes... command in the command palette. So I used that command to click inside a template literal and got the string.template.js.jsx scope. But that didn't change the ${someVar} so I inspected that scope and saw variable.other.readwrite.js.jsx plus additional scope parameters - still working on isolating that kind of a variable from other variables.
Edit: Should work in more file types by using only string.template, if the language treats backticks as a string template.
You can also change the fontStyle within a setting. There are a few answers here about using the TM Scopes command.

Flutter global material localizations and initialize date formatting not working together

I am using localisation in a flutter app but also want to localise the date format using initialise date formatting. My main looks like this ...
void main() {
runApp(new MaterialApp(
supportedLocales:
[const Locale('en', 'US'),
const Locale('en', 'AU')],
localizationsDelegates: [
const DemoLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
home: new ThirdPageWidget(),
navigatorObservers: [routeObserver],
));
}
Also I have a initializeDateFormatting in a stateful widget like this ...
#override
void initState() {
super.initState();
initializeDateFormatting().then((_) {
dateFormat = new DateFormat.yMd('en_AU');
print(dateFormat.format(DateTime.now()));
});
Now when the locale is en_AU the format of the date is month/day/year american style but when I remove this line of code
GlobalMaterialLocalizations.delegate,
The date correctly displays day/month/year. Does any one know what I can do to fix this? How important is it to have the GlobalMaterialLocalizations.delegate?
I solved the problem by adding in pubspec.yaml
the following dependency:
dependencies:
...
flutter_localizations:
sdk: flutter
...
be careful with the indentation.
I too had this issue and, after playing around a little, found that when using Material localisations it appears default to US if you do not specify the supported locales.
Adding the following supported locales allowed the UK date format to be shown rather than the US one.
localizationsDelegates: [
const DemoLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'), // English US
const Locale('en', 'GB'), // English UK
// ... other locales the app supports
],
I didn't have to explicitly initialise the DateFormat class as Material appears to handle this too.

How to display more than 3 items in a BottomNavigationBar while coding in flutter

I tried adding 5 BottomNavigationBarItem but, the compiler throws an error if I try to add more than 3 items. It looks something like this:
The following RangeError was thrown building BottomNavigationBar(dirty, state:
_BottomNavigationBarState#a56dd(tickers: tracking 3 tickers)):
RangeError (index): Invalid value: Not in range 0..2, inclusive: 3
I need to display 5 items in the BottomNavigationBar. Help me out on this one.
BottomNavigationBar missing
there is the link to the code and, currently there are just three items in there, I wanna add two more items without the compiler throwing error message
Just writing it for the future query regarding on this issue.
Just add a extra parameter in your BottomNavigationBar Constructor -
type : BottomNavigationBarType.fixed
Check also the Flutter Official Ref.
Optional : Restart your app from start for fixing rendering issue.
It's because the default NavigatioBar doesn't support more than 3 items, Use this parameter inside your BottomNavigationBar widget:
type: BottomNavigationBarType.fixed
OR Copy and Paste this code below
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed, ///This allow more than 3 items
backgroundColor: Theme.Colors.primaryDarkColor,
currentIndex: 1,
items: [
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up,), title: Text("GLO",
style: TextStyle(color: Colors.black),),),
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
Text("MTN"),),
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
Text("Airtel"),),
BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title:
Text("9mobile"),),
],
),

Resources