Today I have a button that calls the method _launchURL. But I'd like to call this method right after the app opens, without the need to press a button.
import 'package:flutter/material.dart';
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Tabs Example',
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
),
darkTheme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.dark,
),
home: Builder(
builder: (_context) => Scaffold(
appBar: AppBar(
title: const Text('Flutter Custom Tabs Example'),
brightness: Brightness.dark,
),
body: Center(
child: TextButton(
onPressed: () => _launchURL(_context),
child: Text(
'Open Page',
style: TextStyle(fontSize: 17),
),
),
),
),
),
);
}
Future<void> _launchURL(BuildContext context) async {
final theme = Theme.of(context);
try {
await launch(
'https://www.google.com/',
customTabsOption: CustomTabsOption(
toolbarColor: theme.primaryColor,
enableDefaultShare: true,
enableUrlBarHiding: true,
showPageTitle: true,
animation: CustomTabsSystemAnimation.slideIn(),
extraCustomTabs: const <String>[
// ref. https://play.google.com/store/apps/details?id=org.mozilla.firefox
'org.mozilla.firefox',
// ref. https://play.google.com/store/apps/details?id=com.microsoft.emmx
'com.microsoft.emmx',
],
),
safariVCOption: SafariViewControllerOption(
preferredBarTintColor: theme.primaryColor,
preferredControlTintColor: Colors.white,
barCollapsingEnabled: true,
entersReaderIfAvailable: false,
dismissButtonStyle: SafariViewControllerDismissButtonStyle.close,
),
);
} catch (e) {
// An exception is thrown if browser app is not installed on Android device.
debugPrint(e.toString());
}
}
}
Widget build(BuildContext context) {
_launchURL(context); // <= here
return MaterialApp(
title: 'Flutter Custom Tabs Example',
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
),
.
.
.
.
Or you can add it in initstate, but your method needs a BuildContext to work.
Related
I am starting to use Material 3 for flutter.
However, even when use the basic counter app that is as default, when I add:
useMaterial3: true,
The app bar goes white, with no background. Even when I set : colorSchemeSeed
Here is my code:
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorSchemeSeed: Colors.red,
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
Why does the app bar turn into a white background?
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
I'm not sure but if you can replace the colorSchemeSeed instead of primaryColor should work
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.red,
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
there is a dark/light theme toggle function in this snap of code. There is no error when I compile, debuging this code. But It doesn't work.
For example, I never define scaffoldbackgroundColor(0xfffafafa) and What I define color in dark, light theme is Color(0xFFE7626C) and Color(0xFF232B55). But ios simulator only show me backgroundcolor(0xfffafafa).
When I click toggle button, the screen never changes. What's wrong with my code...
import 'package:flutter/material.dart';
import 'package:pomodoro_app/widget/sidebar_widget.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
static final ValueNotifier<ThemeMode> themeNotifier =
ValueNotifier(ThemeMode.dark);
#override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeMode>(
valueListenable: themeNotifier,
builder: (_, ThemeMode currentMode, __) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.light,
scaffoldBackgroundColor: const Color(0xFFE7626C),
textTheme: const TextTheme(
displayLarge: TextStyle(
color: Color(0xFF232B55),
),
displaySmall: TextStyle(
color: Color(0xFF232B55),
),
),
cardColor: const Color(0xFFF4EDDB),
),
darkTheme: ThemeData(
brightness: Brightness.dark,
scaffoldBackgroundColor: const Color(
0xFF232B55,
),
cardColor: const Color(0xFFF4EDDB),
textTheme: const TextTheme(
displayLarge: TextStyle(
color: Color(0xFFE7626C),
),
displaySmall: TextStyle(
color: Colors.white,
),
),
),
themeMode: currentMode,
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
leading: Builder(
builder: (context) => IconButton(
onPressed: () => Scaffold.of(context).openDrawer(),
icon: const Icon(
Icons.menu_rounded,
color: Color(0xFFF4EDDB),
),
),
),
actions: [
IconButton(
icon: Icon(themeNotifier.value == ThemeMode.light
? Icons.dark_mode
: Icons.light_mode),
onPressed: () {
setState(
() {
themeNotifier.value =
themeNotifier.value == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light;
},
);
},
),
],
),
drawer: const SideBar(),
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Hello",
)
],
),
),
);
},
);
}
}
That's because the context you are using with
Theme.of(context);
comes from the build method of _HomeScreenState.
So this context is above the MaterialApp which has the Theme.
You have to use a context that is bellow the MaterialApp.
One way to do it is to add a Builder in between your MaterialApp and Scaffold:
return MaterialApp(
title: 'Flutter Demo',
theme: // ...
darkTheme: // ...
themeMode: currentMode,
home: Builder( // <- Insert a builder here.
builder: (context) { // <- Now you'll be using this `context` which is below the `MaterialApp` (and your themes) in the widget tree, so you'll be able to use them.
return Scaffold(
// ...
);
},
);
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)
Why when I switch page using Get(()=> Page2 of getX package, the app go back to default theme colors?
I have a custom theme with yellow color, but then it goes back to the flutter blue default color.
Am I missing something?
my code
appBar: AppBar(
title: Text('Profile'),
actions: [
IconButton(
icon: Icon(Icons.edit_note_outlined), onPressed: () {
setState(() {
/*isVisible= !isVisible;
isReadOnly = !isReadOnly;*/
});
Get.to(
AddNewProduct(),
duration: Duration(milliseconds: 300),
transition: Transition.fade
);
},
),
],
),
my main
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(GetMaterialApp(
home: const MyApp(),)
);
}
my custom theme
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter app',
theme: ThemeData(
primarySwatch: Colors.amber,
buttonTheme: ButtonTheme.of(context).copyWith(
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
)
),
home: const MyHomePage(title: 'Home'),
);
}
In your case you are using two app widgets:
GetMaterialApp in root
MaterialApp in MyApp
But you have to use only GetMaterialApp.
In your main function remove GetMaterialApp
runApp(const MyApp(),);
In your MyApp widget replace MaterialApp with GetMaterialApp
#override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter app',
theme: ThemeData(
primarySwatch: Colors.amber,
buttonTheme: ButtonTheme.of(context).copyWith(
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
)
),
home: const MyHomePage(),
);
}
ANSWER THAT DEPENDS ON CONTEXT
Let's look on structure of your widget tree
GetMaterialApp
Builder (context1)
MaterialApp <-- here you are setup your theme
Scaffold
AppBar
Navigator.of(context1).push(MaterialPageRoute(builder: (_) => AddNewProduct()));
body: ...
As you can see when you are navigating to the AddNewProduct screen you request context from the Builder widget where your theme is not set up and you launch a new screen with the default theme
To solve this you have two options:
wrap Scaffold with another Builder widget
move everything that is related to body property to a separate widget
I prefer the second option:
runApp(GetMaterialApp(home: Builder(builder: (context) {
return MaterialApp(
title: 'Flutter app',
theme: ThemeData(
primarySwatch: Colors.amber,
buttonTheme: ButtonTheme.of(context).copyWith(
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)),
)),
home: const HomeWidget(),
);
})));
And your HomeWidget:
class HomeWidget extends StatelessWidget {
const HomeWidget({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile'),
actions: [
IconButton(
icon: Icon(Icons.edit_note_outlined),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => AddNewProduct()));
},
),
],
),
body: ... your content here...
}
}
You are using two MaterialApp classes. The 'normal' one and the GetMaterialApp. You should get rid of the normal one, and move all parameters to the GetMaterialApp. GetMaterialApp replaces MaterialApp. So like
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(GetMaterialApp(
title: 'Flutter app',
theme: ThemeData(
primarySwatch: Colors.amber,
buttonTheme: ButtonTheme.of(context).copyWith(
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
)
),
home: const MyHomePage(title: 'Home'), );
}
You probably don't need your MyApp class anymore. Or alternatively replace the MaterialApp in MyApp with GetMaterialApp and remove it from main like
runApp(const MyApp());
You are using 2 material classes.
-> MaterialApp
-> GetMaterialApp
Remove GetMaterialApp from main class
runApp(const MyApp(),);
And replace MaterialApp to GetMaterialApp in MyApp widget
#override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter app',
theme: ThemeData(
primarySwatch: Colors.amber,
buttonTheme: ButtonTheme.of(context).copyWith(
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
)
),
home: const MyHomePage(),
);
}
change
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(GetMaterialApp(
home: const MyApp(),)
);
}
to
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(GetMaterialApp(
theme: ThemeData(
primarySwatch: Colors.amber,
buttonTheme: ButtonTheme.of(context).copyWith(
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
)
),
home: const MyApp(),)
);
}
Do not use *GetMaterialApp(* in build use Scaffold
I was working on a Flutter project and I tried to add the title parameter to AppBarTheme but it gave me an error. This is the code:
#override
Widget build(BuildContext context){
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
accentColor: Colors.pinkAccent,
fontFamily: 'Quicksand',
appBarTheme:
AppBarTheme(textTheme: ThemeData.light().textTheme.copyWith(
title: const TextStyle(
fontFamily: 'Quicksand',
fontSize: 20,
)
)
)
)
);
}
The error was: The named parameter 'title' isn't defined.
How can I solve this?
Here is the way :
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AppBar titleTextStyle')),
body: Center(child: Text('Hello World')),
);
}
}
void main() {
runApp(
MaterialApp(
theme: ThemeData.light().copyWith(
appBarTheme: AppBarTheme(
backgroundColor: Colors.yellow,
titleTextStyle: TextStyle(color: Colors.black),
backwardsCompatibility: false, // !!!
),
),
home: Home(),
),
);
}
You cannot add title to AppBarTheme, you can only provide the TextStyle for the title in themeData and add the title in AppBar like this:
AppBar(
title: Text(
'your text',
// You need to add this line
style: Theme.of(context).appBarTheme.TextStyle,
),
),