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

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.
]

Related

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

Flutter Android PreferenceScreen settings page

Android has PreferenceScreen which provides you the consistent Settings interface and handles a lot of SharedPreferences functionality on its own.
Is there anything similar in Flutter or do I have to create it by my own using custom ListView?
So, there doesn't exist any widget like that, you will have to create it on your own and handle their action in onChanged or onTap events. For example:
CheckBoxPreference
CheckboxListTile(
value: true,
title: Text("This is a CheckBoxPreference"),
onChanged: (value) {},
),
SwitchPreference
SwitchListTile(
value: false,
title: Text("This is a SwitchPreference"),
onChanged: (value) {},
),
ListPreference
ListTile(
title: Text("This is a ListPreference"),
subtitle: Text("Subtitle goes here"),
onTap: (){},
)
In Flutter the easiest way to make a PreferenceScreen page is with a ListView and ListTiles.
ListView(children: <Widget>[
ListTile(
title: Text('Enable Feature'),
trailing: Checkbox(
value: PrefService.getBool('feature_enabled'),
onChanged: (val) {
setState(() {
PrefService.setBool('feature_enabled', val);
});
},
),
onTap: () {
setState(() {
PrefService.setBool(
'feature_enabled', !PrefService.getBool('feature_enabled'));
});
},
)
]),
But you still need to listen for changes and save them.
To make that easier you can use the package preferences. It removes the boilerplate code and manages saving the changes. The example above would look like this with preferences:
PreferencePage([
CheckboxPreference(
'Enable Feature',
'feature_enabled',
)
]),
You can find it under https://pub.dartlang.org/packages/preferences.
For more features like subpages, hiding of preferences or more widgets look at the example.
According to my research now (I checked the https://pub.dartlang.org and other resources), the answer to your question is, no there is no page like that in Flutter (Check the official documentation). There is one plugin to have SharedPreferences which is from Flutter team, but if you check out its source code, you can see that it just does data modification. Other alternatives from other developers doesn't have anything visual too (I will keep checking, if I find one, I will edit my post).
There are some ways to do it, you can do it by calling android bridge and having android specific screen for only android (yeah I know, it doesn't make much sense) when you are with flutter or my real answer would be you can implement it by using list view as you mentioned and assign different child elements according to your needs.

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.

What are the options of collapsable list widgets in Flutter?

I need to have some lists collapse by their topics in my project and am wondering if I'll need to implement this from zero or rather use a component from flutter. Does this component exist?
Thanks in advance :)
The Flutter Gallery has two examples that may be relevant for your accordion-like lists.
Expansion Panel Demo & Two-level List Demo
The Expansion Panel demo is probably what you want. If so, take a look at how the demo leverages ExpansionPanel and uses a headerBuilder and body. You can extends this to make the header and bodies as complex as you need. The Gallery demo adds a DemoItem helper class. You can use this pattern or come up with your own design.
Here is a snippet that shows the demo using ExpansionPanelList by passing a callback and the list of DemoItems:
child: new ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_demoItems[index].isExpanded = !isExpanded;
});
},
children: _demoItems.map((DemoItem<dynamic> item) {
return new ExpansionPanel(
isExpanded: item.isExpanded,
headerBuilder: item.headerBuilder,
body: item.build()
);
}).toList()
),

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

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.

Resources