I have a flutter app targeting Android. I want to change the default font for the app but nothing seems to work.
I have added the google_fonts package.
I have then modified theme in main.dart MaterialApp as follows:
MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.latoTextTheme(
Theme.of(context).textTheme,
),
),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.dark,
),
This doesn't work. The font does not change.
I can change individual text widget font using the below syntax and that does work:
Text('Some Text',
style: GoogleFonts.robotoMono(),
),
I have also tried downloading a font and adding it to font assets:
fonts:
- family: Noto
fonts:
- asset: fonts/NotoSans-Regular.ttf
Next, I referred to it in main.dart, but that does not work either:
theme: ThemeData(
fontFamily: 'Noto',
),
Using the below code returns monospace. Not sure what that is, I thought the default font should be Roboto.
print('font: ${DefaultTextStyle.of(context).style.fontFamily}');
I have tried to run flutter clean, to uninstall the app, but none of this helps.
How can I go about troubleshooting this?
UPDATE
Found the problem. I was confused about the dark and light themes
please, make sure you added the:
void main() {
WidgetsFlutterBinding.ensureInitialized(); // add this before runApp
runApp(MyApp());
}
it's necessary for using the font themes from the google_fonts package in your MaterialApp's theme property.
The problem was my misunderstanding of how light and dark themes work. Anyway, posting here if anyone else made the same mistake.
So to change the default font if you are using dark theme do this:
Add font(s) to your pubspec.yaml
fonts:
- family: my font family
fonts:
- asset: fonts/myfontfile.ttf
Define themes in main.dart :
MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
fontFamily: 'my font family'
),
darkTheme: ThemeData(
brightness: Brightness.dark,
fontFamily: 'my font family'
),
themeMode: ThemeMode.system,
),
Related
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(
...
)
)
),
the original Material Icons in FLutter Icon(Icons.access_alarms) stop working every time I try to define a new custom font for my app.
What I do is to import the font in the pubspec.yamlfile correctly, include the "uses-material-design:true" and define the font in main ThemeData using the fontFamily property.
flutter:
uses-material-design: true
assets:
- images/
fonts:
- family: Core Sans C
fonts:
- asset: Fonts/coresansc-45regular-webfont.ttf
style: normal
weight: 500
screenshot of the pubspec.yaml including the font definition
ThemeData kThemeLB = ThemeData(
fontFamily: 'Core Sans C',
backgroundColor: kBgColor1,
primaryColor: kMainColor,
// primarySwatch: kMainColor,
textTheme: const TextTheme(
bodyText1: TextStyle(
color: kSecondaryColor,
),
),
scaffoldBackgroundColor: kBgColor1);
And my main.dart
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: kThemeLB,
home: LoadLogin(),
My fonts DIR
Fonts dir
I can use FontAwesome Icons correctly, but still I'd like to know what the issue is.
I've been looking for a solution for a long time now but I can't seem to figure out what's the problem here. Any help is much appreciated thank!
Try move your files inside your assets dir, for example:
- assets
-- fonts
--- **"your fonts inside fonts dir"**
after that modify your pubspec file, like this:
fonts:
- family: coreSansC
- fonts:
- asset: assets/fonts/coresansc-45regular-webfont.ttf
finally modify your ThemeData, like this:
ThemeData kThemeLB = ThemeData(
fontFamily: 'coreSansC',
backgroundColor: kBgColor1,
primaryColor: kMainColor,
// primarySwatch: kMainColor,
textTheme: const TextTheme(
bodyText1: TextStyle(
color: kSecondaryColor,
),
),
I recommend you use camelCase names.
I want to give every CircularProgressIndicator a color in my app but what attribute is responsible for it in MaterialApp widget:
MaterialApp(
theme: ThemeData(
// what is the attribute for this widget.
)
)
I used both accentColor and colorScheme.secondary but still not change.
You can use accentColor to change the color of CircularProgressIndicator. It will look like this:
theme: ThemeData(
accentColor: Colors.red,
EDIT:
In the newest version of Flutter, you should use colorScheme instead of accentColor.
colorScheme: ColorScheme.fromSwatch().copyWith(
secondary: Colors.red,
),
In ThemeData there is progressIndicatorTheme attribute which you can assign ProgressIndicatorThemeData constructor to it, and there you can change the default color of ProgressIndicator.
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 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
),
);