I've been trying to solve a couple of problems using both Material and Cupertino widgets.
1) I can't seem to figure out how to globally define a font family for both. Either I use a CupertinoApp and have the Cupertino widgets correct or MaterialApp and have the Material theme widgets correct.
2) How do I define the Cupertino primaryColor attribute without a CupertinoTheme?
I've found something called MaterialBasedCupertinoThemeData but I'm not sure how it works / can't find any docs/tutorials on it.
I can't find any other questions on the subject and would appreciate the help!
#override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'betterfriend',
debugShowCheckedModeBanner: false,
// This lets us use material components
localizationsDelegates: <LocalizationsDelegate<dynamic>>[
DefaultMaterialLocalizations.delegate,
DefaultWidgetsLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
],
home: CupertinoTheme(
data: MaterialBasedCupertinoThemeData(
materialTheme: ThemeData(textTheme: Styles.textTheme),
),
child: ScreenSwitcher(),
),
);
}
Related
I am very new to Flutter so I'm not sure if my train of thoughts even make sense. I'm currently using a package called EasyLocalization to localize my app. In doing so, I am trying to reference the current locale of my application which is set by EasyLocalization in a service class completely independent of widgets but the only methods offered by the package was to reference the context
In their example, the following code works
print(context.locale.toString());
However, since I want the value in a "service" class that doesn't make use of widgets, I'm not able to call on any context at all. So something like this code works on my widget but not in an independent service class since context doesn't exist there
var currentLocale = EasyLocalization.of(context)?.locale ?? 'en';
I've also tried some other code to get the localization but they turn out different from the actual localization my app is sync'ed to. For example when my app is running off 'zh' in EasyLocalization, other methods such as the ones below only return 'en-US'
print(Intl().locale);
print(Intl.getCurrentLocale());
One way I've gotten it to partially work is to create a function inside my widget that sets a global value when clicked and then reference that value but it feels "hacky" and isn't sufficient for my use-case where data gets loaded on application start which is then passed through a translation function using the context locale. Most other search results also only turn up information for navigation and snackbars which don't seem to help my use-case so I'm currently out of ideas and turning to SO for help.
Below is my MaterialApp() if it helps
Widget build(BuildContext context) {
return ProviderScope(
child: MaterialApp(
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
debugShowCheckedModeBanner: false,
// Todo: Implement dark mode color theme
theme: lightTheme,
onGenerateRoute: AppRouter.generateRoutes,
));
}
You can use navigator key to access current context from anywhere. You have to create global key and pass it to material app.
//create key
final navigatorKey = new GlobalKey<NavigatorState>();
//pass it to material app
Widget build(BuildContext context) {
return ProviderScope(
child: MaterialApp(
navigatorKey: navigatorKey, //key
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
debugShowCheckedModeBanner: false,
// Todo: Implement dark mode color theme
theme: lightTheme,
onGenerateRoute: AppRouter.generateRoutes,
));
}
//access context
print(navigatorKey.currentContext.locale.toString());
Your service class should be locale independent by design, so taking locale as an input, for example:
class I18nService {
final String locale;
I18nService(this.locale);
String sayHello() {
if (locale == 'en_CA') {
return 'hello Canada';
}
return 'hello world';
}
}
I'd also recommend looking into the provider package, you can instantiate your service using a ProxyProvider and pass in the locale there.
I'm working with Cupertino widgets, and need to locally override my global CupertinoTheme, and use CupertinoTheme widget for this purpose. My use case is to force some 'dark' theme when displaying text on top of images, but the issue is general.
In the following sample, I try to change the font size for one text style (from 42px to 21px), but it is not applied: the two texts have the same size (second should be 21px high).
It seems that CupertinoTheme.of(context) does not read the overriden style, contrary to the documentation
Descendant widgets can retrieve the current CupertinoThemeData by calling CupertinoTheme.of
Here is a sample (that can be tested on DartPad):
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoApp(
debugShowCheckedModeBanner: true,
theme: CupertinoThemeData(
brightness: Brightness.dark,
textTheme: CupertinoTextThemeData(
navLargeTitleTextStyle: TextStyle(fontSize: 42)
)
),
home: Home()
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Column(
children: [
Text(
'Hello, World #1!',
style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle
),
CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
navLargeTitleTextStyle: TextStyle(fontSize: 21)
)
),
child: Text(
'Hello, World #2!',
style:
CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle
),
),
]
)
);
}
}
You’re getting the theme from the wrong context. The context must be a descendant of the CupertinoTheme widget (or rather the element that will be created from it). Try:
CupertinoTheme(
data: ...,
child: Builder(
builder: (context) => ... CupertinoTheme.of(contex)...
)
)
With the content parameter of the build method you can access anything done by ancestors of the build-method’s widget. Whatever you do in the build method has no effect on it.
Widgets are recipes for creating a tree of Elements. The context parameter that you get in build(er) method is (a reduced interface of) the element created for that widget. The Foo.of(context) methods typically search through the ancestor elements of context to find a Foo. (In some cases there is caching, so it isn’t a slow search.) When you create a tree of widgets in a build method, you’re just creating widgets; the elements will be created after that build method competes. Using a Builder widget, like I did above, delays creation of the widgets in Builder’s builder parameter until after an elements have been created for the Builder (and the widgets above it). So that is a way to get around your problem. Another way would be to create a new StatelessWidget with the widgets that are children of CupertinoTheme in your code, because it will similarly delay the creation of those widgets until after the element for that stateless widget (and its parents) is created.
I am currently learning app development with Flutter and have started learning about the Provider package. I was having some difficulty and was getting the error:
"Could not find the correct Provider above this ... Widget"
I ended up moving the Provider widget to wrap around my MaterialApp widget instead of my Scaffold Widget, and that seemed to fix things.
That being said, I'm not sure why this fixed things. Are we supposed to put our Provider widget around our MaterialApp? If so, can someone please explain why this is needed? If not, can someone explain how to determine where to place the Provider widget in our tree?
Usually, the best place is where you moved it, in the MaterialApp. This is because since that is where the app starts, the node tree will have access to the provider everywhere.
If your page is a Stateful widget - inside Widget wrap State with Provider, so you can use it inside of State. This is a much cleaner solution because you won't have to wrap your entire application.
If you need the functionality of Provider everywhere in the app - yes, wrapping the entire app is completely fine, though I'll prefer to use some kind of service for this
You could add it to any route and pass it to the route you need to use or you can add it to MaterialApp
so you can use it anywhere.
The best practice of using provider:
Place the Provider widget at the top of the widget tree. Bellow I put a template code that can be used for one more providers at the same place, by using MultiProvider widget under Provider package.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ProviderName<ModelName>(create: (_) => ModelName()),
AnotherProviderName<AnotherModelName>(create: (_) => AnotherModelName()),
],
child: MaterialApp(
title: 'App title',
theme: ThemeData(
primarySwatch: Colors.blue,
primaryColor: const Color(0xFF2196f3),
accentColor: const Color(0xFF2196f3),
canvasColor: const Color(0xFFfafafa),
),
home: MyHomePage(), // Your widget starting
),
);
}
}
For more informatin: https://pub.dev/documentation/provider/latest/
I am not able to set localization in my app.
I am trying to add language settings and associated localization in my app. I am able to get-set the language option. I am using 'intl' plug-in for internationalization. My code looks like below in pretty much all the UI .dart files.
AppTranslations.of(context).accountNumber +
" ${accountDetails.accountNumber}",
The getters is set as :
String get accountNumber => _text("account_number");
String _text(String key) {
return _localisedValues[key] ?? _defaultLocaleValues[key];
}
I've also placed json files containing localized labels in 3 different languages. However, it seems there is some instantiation problem of the locazation plug-in. The code doesn't go the getter line.
Any help would be highly appreciated.
AppTranslations.of(context) is a standard way of accessing the localised labels. You are right about the instantiation. If the program doesn't go to the getter line them it means, there's a problem in somewhere in the initial part of the code. It could be in the main.dart.
Check where you are initialising LocalStorageProvider(). In case it is not initialised then that's the problem. Assuming you are using a MaterialApp, try the below suggestion then :
Wrap the MaterialApp with LocalStorageProvider(). I mean, in the main widget build, return LocalStorageProvider() and pass your existing code of MaterialApp() as a child to it. Sample below (Please ignore the theme etc since I just copied the code from one of my app) :
#override
Widget build(BuildContext context) {
LocalStorage localStorage = LocalStorage();
return LocalStorageProvider(
localStorage: localStorage,
child: LocaleProvider(
localStorage: localStorage,
localeWrapper: LocaleWrapper(),
child: Builder(
builder: (context) {
return AnimatedBuilder(
animation: LocaleProvider.of(context).localeWrapper,
builder: (context, _) {
return MaterialApp(
onGenerateTitle: (context) =>
AppTranslations.of(context).appName,
locale: LocaleProvider.of(context).locale,
title: "App Title",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MapsDemo(),
localizationsDelegates: [
AppTranslationsDelegate(
LocaleProvider.of(context).supportedLanguagesCodes,
),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: LocaleProvider.of(context).supportedLocales,
);
},
);
},
),
),
);
}
I need to use CupertinoDatePicker, however its date formatting is mm-dd-yyyy, which in fact is not common for a specific location, where my app will be distributed. I would like to change the format to dd-mm-yyyy, which IMO seems more general.
Is that possible, using that picker?
EDIT: It should be possible in Flutter version 1.7
According to the CupertinoDatePicker documentation:
the class will display its children as
consecutive columns. Its children order is based on
internationalization.
You can read more about internationalization Flutter apps here.
You need to add this to your pubspec.yaml file:
dependencies:
flutter_localizations:
sdk: flutter
And then in your root widget add proper localizationsDelegates:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Application',
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('fr', ''),
],
home: Scaffold(
body: Container(),
),
);
}
}
If you'll use in app one of the localizations that supports dd-mm-yyyy format, e.g. UK English, and you'll have this language set on your device, you should see this widget changed accordingly.