I am using flutter 2 and trying to use GetX for localization between two different languages.
problem is I should put my translation class in main.dart, inside MaterialApp. but MaterialApp isn't accepting that paramater. do I need to upgrade to flutter 3 or where is the problem?
My Code:
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return ScreenUtilInit(
designSize: Size(411.429,
835.8095238095239),
minTextAdapt: true,
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
textTheme:
GoogleFonts.josefinSansTextTheme(
Theme.of(context).textTheme),
primaryColor: Colors.pinkAccent,
primarySwatch: Colors.pink,
visualDensity:
VisualDensity.adaptivePlatformDensity),
home: WillPopScope(
onWillPop: () async => false,
child: AppConfigPage(),
),
locale: Get.deviceLocale,
translations: MyLocale() // here is the problem .. with "tranalsations" paramater.
);
});
}
I figured out I am using MaterialApp, correct to use GetMaterialApp
Related
Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes
ThemeData lightTheme = ThemeData(
useMaterial3: true,
backgroundColor: Colors.white,
appBarTheme: AppBarTheme(
elevation: 1000,
backgroundColor: Colors.white,
)
);
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);
Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes
class _MyMaterialAppState extends State<MyMaterialApp> {
#override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: appName,
theme: lightTheme,
darkTheme: darkTheme,
translations: Languages(),
locale: Get.deviceLocale,
fallbackLocale: const Locale('en', 'US'),
home: const MyHomePage(),
);
}
}
The documentation of GetX Itself says that you should not depend on any higher level widget than GetMaterialApp in order to update it. This can trigger duplicate keys.
I have seen your code and I tried to test this on physical devide and it works perfectly fine.
Here's the code:
import 'package:flutter/material.dart';
import 'package:get/route_manager.dart';
ThemeData lightTheme = ThemeData(
useMaterial3: true,
backgroundColor: Colors.white,
appBarTheme: AppBarTheme(
elevation: 1000,
backgroundColor: Colors.white,
));
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);
void main(List<String> args) {
runApp(MyMaterialApp());
}
class MyMaterialApp extends StatelessWidget {
const MyMaterialApp({super.key});
#override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: "appName",
theme: lightTheme,
darkTheme: darkTheme,
// translations: Languages(),
locale: Get.deviceLocale,
fallbackLocale: const Locale('en', 'US'),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Column(
children: [
Center(
child: TextButton(
onPressed: () {
Get.changeTheme(ThemeMode.dark);
// Get.changeThemeMode(ThemeMode.dark);
},
child: Text("Chage"),
),
),
Center(
child: TextButton(
onPressed: () {
Get.changeThemeMode(ThemeMode.light);
},
child: Text("Chage light"),
),
),
],
),
);
}
}
Probably, this is because of the GetMaterialApp widget in the build method. Because the build method is called every time the widget is updated, this means that your custom theme will be overwritten. You can do something like this:
class _MyMaterialAppState extends State<MyMaterialApp> {
GetxController<ThemeData> _themeController = GetxController(lightTheme);
#override
Widget build(BuildContext context) {
return GetBuilder<GetxController<ThemeData>>(
init: _themeController,
builder: (_, theme) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: appName,
theme: theme.value,
darkTheme: darkTheme,
translations: Languages(),
locale: Get.deviceLocale,
fallbackLocale: const Locale('en', 'US'),
home: const MyHomePage(),
);
},
);
}
}
This code uses GetBuilder to listen for changes to the _themeController and update theme property.
To change the theme:
_themeController.updateValue(newTheme)
I am using flutter_screenutil: ^5.5.3+2
and build_runner: ^2.0.4
after running the build runner
there is error in the builder of screenutlils
use ScreenUtilInit like this
#override
Widget build(BuildContext context) {
// In first method you only need to wrap [MaterialApp] with [ScreenUtilInit] and that's it
return ScreenUtilInit(
builder: (_, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)),
),
home: child,
);
},
child: HomePage(),
);
}
}
The issue is here ScreenUtilInit builder require context and child
builder: (context , child) { //this
Widget build(BuildContext context) {
return ScreenUtilInit(
builder: (context, child) {
return MultiBlocProvider(
providers: [],
child: Text("AA"),
);
},
);
}
In MaterialApp I can use themeMode to explicitly set the theme of the app.
themeMode: ThemeMode.dark,
I couldn't find a similar one in CupertinoApp.
You can use brightness property in the CupertinoThemeData for it.
#override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(
brightness: Brightness.light,
),
title: _title,
home: MyStatefulWidget(),
);
}
I am receiving the following error -
I/flutter (18695): The following StackOverflowError was thrown building Consumer(dirty, dependencies:
I/flutter (18695): [_DefaultInheritedProviderScope]):
I/flutter (18695): Stack Overflow
This seems to relate to error in my Consumer. I am using Provider plugin to try to create a toggle button for Dark Mode in Flutter.
See below for my files -
appstatenotifier.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
ThemeData light = ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
accentColor: Colors.pink,
scaffoldBackgroundColor: Color(0xfff1f1f1)
);
ThemeData dark = ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
accentColor: Colors.pink,
);
class ThemeNotifier with ChangeNotifier {
final String key = "theme";
SharedPreferences prefs;
bool _darkTheme;
bool get darkTheme => darkTheme;
ThemeNotifier() {
_darkTheme = false;
}
toggleTheme() {
_darkTheme = !_darkTheme;
notifyListeners();
}
}
Below is my main.dart relevant Widgets
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
var themeData = ThemeData(
primarySwatch: Colors.blue,
);
return ChangeNotifierProvider(
create: (_) => ThemeNotifier(),
child: Consumer<ThemeNotifier>(
builder: (context, ThemeNotifier notifier, child) {
return MaterialApp(
theme: notifier.darkTheme ? dark : light,
title: 'Work Out Log',
routes: MyApp.routes,
);
}
),
);
}
}
Widget buildDrawer(context) {
return Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text('Dark Theme'),
trailing: Consumer<ThemeNotifier>(
builder: (context, notifier, child) => SwitchListTile(
title: Text("Dark mode"),
onChanged: (val) {
notifier.toggleTheme();
},
value: notifier.darkTheme,
),
),
),
],
),
);
}
Any idea why it's throwing this error?
As Viren V Varasadiya pointed out, your getter for darkTheme is incorrect:
bool get darkTheme => darkTheme;
Presumably, you meant to point it at _darkTheme, but instead you have the getter that is returning itself. This means that any time you call darkTheme, the getter looks up the value of darkTheme, which makes the getter look up the value of darkTheme, which makes the getter look up the value of darkTheme, which makes the getter look up the value of darkTheme, which makes the getter look up... (hopefully you get the idea).
You just need to change the getter to return the correct thing:
bool get darkTheme => _darkTheme;
You Must be Retruning the same thing as the class name
I'm new to flutter and I'm trying to create an app with provider. I wrapped MaterialApp widget with the ChangeNotifierProvider and the app works and I can use the provider as it intended to do. I need to know is it okay to do so and will i face any problems?
Widget build(BuildContext context) {
return ChangeNotifierProvider<BaseModel>(
builder: (context) =>
BaseModel(loading: false, title: "Title", isLoggedIn: false),
child: MaterialApp(
routes: <String, WidgetBuilder>{
"/home": (BuildContext context) => Home(),
"/signIn": (BuildContext context) => SignIn()
},
initialRoute: "/signIn",
title: 'Flutter Demo',
theme: ThemeData(
// is not restarted.
primarySwatch: Colors.blue,
),
home: SignIn()),
);
In all the sample codes they use Provider under "home" in MaterialApp widget. I used MaterialApp inside the provider.
It is totally fine. There's no problem whatsoever.