So I just decided to give Material 3 a shot in Flutter and it changed a whole lot of colors, and fonts etc.
I knew certain things would look different like more rounded corners on my cards but I wasn't expecting all the fonts and card colors to change. I literally just added the useMaterial3: true, to the code below:
child: MaterialApp(
debugShowCheckedModeBanner: false,
routes: appRoutes,
theme: ThemeData(
useMaterial3: true,
scaffoldBackgroundColor: const Color(0xFF2b8293),
),
home: const CheckLogin(),
),
Here is an example of what has changed with before and after pictures:
Anyway to change the default card color, and title fonts so I do not have to change them in every view in the app one by one?
Also odd to see the vertical 3 dot icon changed to dark while the search Icon did not. Thanks!
You can override the default theme on materialApp.
theme: ThemeData(
useMaterial3: true,
scaffoldBackgroundColor: const Color(0xFF2b8293),
appBarTheme: AppBarTheme(
titleTextStyle: TextStyle(...),
iconTheme: IconThemeData(
...
)
)
),
Related
how could I change the modes of flutter app with the mode of the mobile itself?
is there any available way to make this ?
Okay since you want to change your apps theme according to the user's current theme you have to:
Create a class that defines both the themes:
Here is a link of one of my recent projects where I am using both dark and light themes :
class CustomTheme {
static final lightTheme = ThemeData(
appBarTheme: AppBarTheme(
backgroundColor: CustomColors.coral,
foregroundColor: Colors.grey.shade700),
colorScheme: ColorScheme(
brightness: Brightness.light,
primary: CustomColors.coral,
onPrimary: CustomColors.coral,
secondary: CustomColors.babyPink,
),
)),
static final darkTheme = ThemeData(
colorScheme: ColorScheme(
brightness: Brightness.dark,
primary: CustomColors.onBackground,
onPrimary: CustomColors.onBackground,
secondary: CustomColors.background,
onSecondary: CustomColors.background,
error: CustomColors.errorColor,
onError: CustomColors.onErrorColor,
background: CustomColors.background,
onBackground: CustomColors.onBackground,
surface: CustomColors.coral,
onSurface: CustomColors.onBackground)),
Then specify your theme in the main.dart file
MaterialApp(
themeMode: ThemeMode.system,
theme: CustomTheme.lightTheme,
darkTheme: CustomTheme.darkTheme,
home: const SplashScreen(),
debugShowCheckedModeBanner: false,
);
Then use these themes wherever you want, so if you have a container then you can say
color: Theme.of(context).colorScheme.secondary,
Checkout one of my apps where I am using both themes
https://github.com/MayurSMahajan/FrontendSIH/tree/main/daemon/lib
If by mode you mean Orientation, for instance Portrait mode to Landscape mode, then checkout this answer here, it might help you:
How to detect orientation change in layout in Flutter?
Or directly checkout flutter docs :
https://flutter.io/cookbook/design/orientation/
Almost all the Q/A referred on Stackoverflow related to the same topic but didn't get proper solutions.
Main Question: My app having the primary color blue and I want to set Statusbar Text Color white.
What I have tried:
Using SystemChrome: (Using the following code, It's just changing the color of status bar text in the first screen only, other screens are having blue/black combination background/foreground.)
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: MaterialColor(0xFF084775, color), // status bar color
statusBarBrightness: Brightness.light,//status bar brightness
statusBarIconBrightness:Brightness.light , //status barIcon Brightness
));
Screenshots:
Splash Screen:
Dashboard Screen:
Using ThemeData : (This method gives the same result as the above screenshot).
theme: ThemeData(
brightness: Brightness.light, // ADDED THIS LINE..
primarySwatch: MaterialColor(0xFF084775, color),
accentColor: Color(0xffe46b10),
unselectedWidgetColor: Colors.grey,
fontFamily: 'SourceSansPro',
),
I have also checked github issue link but not worked for me.
I just need to change Statusbar Text Color to White. Any help?
To apply for all appBar use
return MaterialApp(
theme: ThemeData(
appBarTheme: Theme.of(context).appBarTheme.copyWith(brightness: Brightness.dark),
),
debugShowCheckedModeBanner: false,
// home: InvoiceList(),
home: widget());
I hope it will works.
Thank you.
As of Flutter 2
return MaterialApp(
theme: ThemeData(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(systemOverlayStyle: SystemUiOverlayStyle.light)),
debugShowCheckedModeBanner: false,
home: widget());
is there a way to set whole app backgorundcolor in flutter. For example i want to use white background on all screens. so the first thing i do is manually setting background color to all screens. But i think its overkill. and i am looking for the a shortcut to achieve it.
i have tried below code but couldn't get achieve what i wanted.
#override
Widget build(BuildContext context) {
return BlocProvider<SplashBloc>(
bloc: splashBloc,
child: MaterialApp(
theme: new ThemeData(scaffoldBackgroundColor: Colors.white),
home: Splash(),
),
);
}
}
In main.dart, use,
MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white),
),
This will change the background color of the entire app provided you are returning Scaffold in the build Widget.
You use use the theme in your MaterialApp Widget to set up the theme colors for your entire app like so:
MaterialApp(
theme: ThemeData(
primaryIconTheme: IconThemeData(color: Colors.white),
primaryColor: Color.fromRGBO(254, 248, 248, 1),
appBarTheme: AppBarTheme(
color: <color_of_choice>,
),
),
Your backgroundColor will assume the primaryColor above.
Read all about it here.
Text turn to white when I got select dark mode but I want to make all texts white70 or something(including buttons and regular texts). How can I definde the default text color for dark mode?
My Theme data like this right now:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DynamicTheme(
defaultBrightness: Brightness.light,
data: (brightness) => ThemeData(
primarySwatch: Colors.blueGrey,
brightness: brightness,
),
You can do something similar to this (Feel free to change things as you'd like):
At first go to ios/Runner folder. Next open info.plist and add the following lines into the Dict section.
<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>
Next. Make sure you have these lines in Theme settings of your MaterialApp:
MaterialApp(
themeMode: ThemeMode.light, // Change it as you want
theme: ThemeData(
primaryColor: Colors.white,
primaryColorBrightness: Brightness.light,
brightness: Brightness.light,
primaryColorDark: Colors.black,
canvasColor: Colors.white,
// next line is important!
appBarTheme: AppBarTheme(brightness: Brightness.light)),
darkTheme: ThemeData(
primaryColor: Colors.black,
primaryColorBrightness: Brightness.dark,
primaryColorLight: Colors.black,
brightness: Brightness.dark,
primaryColorDark: Colors.black,
indicatorColor: Colors.white,
canvasColor: Colors.black,
// next line is important!
appBarTheme: AppBarTheme(brightness: Brightness.dark)),
Is there an option where we can give a single color to the background of every pages in flutter. I couldn't find one in flutter.
MaterialApp has a theme property which you can adjust the ScaffoldBackgroundColor with:
MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white, //your preferred color
),
);