Flutter: Material icons not showing when importing a custom Font - flutter

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.

Related

AppBarTheme not applied with copyWith in Flutter?

I've got this code snippet below trying to apply a title theme to my appBar and I am not quite sure I am understanding the copyWith function for the theme. My understanding would be that all properties of my theme are copied over, except those that I change. I am not changing appBarTheme when I use the copyWith, so why is it not applying to the app?
I've uncommented the line that does't work, and commented out the one that does.
class MyApp extends StatelessWidget {
final ThemeData theme = ThemeData(
primarySwatch: Colors.purple,
fontFamily: 'Quicksand',
// This doesn't work
appBarTheme: AppBarTheme(
titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 40)),
);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Personal Expenses',
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(secondary: Colors.amber),
// This does work
// appBarTheme: AppBarTheme(
// titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 40)),
),
home: MyHomePage(),
);
}
}
I am not changing appBarTheme when I use the copyWith, so why is it
not applying to the app?
What do you mean? If you want to simply apply your theme then all you have to do is this.
Essentially,
MaterialApp(
...
theme: theme
...
);
If you want to change the color of the AppBar, then you would want to do this.
Essentially,
MaterialApp(
...
theme: theme.copyWith(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
),
...
);
This would allow you to change your AppBar color while leaving your AppBar's titleTextStyle as it is.
Please note that your code theme.colorScheme.copyWith(secondary: Colors.amber) will only set the secondary color, which will not be visible depending on how you setup your AppBar. I am not sure if you did this intentionally.
Finally, if you want to change the appBarTheme as well, then you would want to do this.
Essentially,
MaterialApp(
...
theme: theme.copyWith(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
appBarTheme: const AppBarTheme(
titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 10),
),
),
...
);
Note that I only changed the font size from 40 to 10.
All these should work, and it should show very big differences in the UI. In other words, your code seems fine. I am not very sure why you think that it is "not applying to the app". Please clarify why you think so.
Your code looks fine, I tested and it's working fine
theme: theme.copyWith(
appBarTheme: AppBarTheme(color: Colors.redAccent,titleTextStyle: TextStyle(fontFamily: "Amiri", fontSize: 40))
change the App bar theme but for
theme.copyWith(
colorScheme: theme.colorScheme.copyWith(secondary: Colors.amber),
it change secondary color not App bar theme

How to troubleshoot default font in Flutter

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,
),

Flutter custom font doesn't change

I tried to use a custom font for my AppBar, but it didn't change. I tried with two different fonts, RobotoMono and DancingScript, but nothing, the app did't change the font. I tried to unistall the app from the virtual phone too, too create another virtual device, but nothing. That's my main.dart :
import 'package:flutter/material.dart';
import 'background_image_task-9.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Blumax',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Dancing',
primarySwatch: myColour
),
home: BackgroundImage(
),
);
}
}
const MaterialColor myColour = const MaterialColor(
0xFF0009FF,
const <int, Color>{
50: const Color(0xFF0009FF),
100: const Color(0xFF0009FF),
200: const Color(0xFF0009FF),
300: const Color(0xFF0009FF),
400: const Color(0xFF0009FF),
500: const Color(0xFF0009FF),
600: const Color(0xFF0009FF),
700: const Color(0xFF0009FF),
800: const Color(0xFF0009FF),
900: const Color(0xFF0009FF),
},
);
This is where i use the custom font, background_image_task-9.dart :
import 'package:flutter/material.dart';
class BackgroundImage extends StatelessWidget{
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Blumax', style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: 'RobotoMono',
fontSize: 40
),),
centerTitle: true,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("assets/blumax.jpg"), fit: BoxFit.cover),
),
),
);
}
}
And that's my pubspec.yaml :
name: iphone_prj
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
english_words: ^3.1.0
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
assets:
- assets/
uses-material-design: true
fonts:
- family: RobotoMono
fonts:
- asset: assets/fonts/RobotoMono-Bold.ttf
- family: DancingScript
fonts:
- asset: assets/fonts/DancingScript-Bold.ttf
weight: 300
Just add your font-family name properly in your main ThemeData as per pubspec.yaml file
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Blumax',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'DancingScript',
primarySwatch: myColour
),
home: BackgroundImage(
),
);
}
}
The problem in your case is your font-family name is DancingScript and your providing it in the ThemeData as Dancing. So it will not effect to your app fonts.
Also, in your BackgroundImage class you have added RobotoMono font. But, the "fontWeight: FontWeight.w500" you have added is not matching as per your pubspec.yaml as you have added there RobotoMono-Bold fonts.
So, by matching your font names and font style will effect your app fonts as per your requirements.
There can be many reasons that avoid changing font in flutter :
1- Notice that the pubsec.yaml file is Space sensitive , It means that you need to use 2 or 4 spaces for declaring blocks. That's why you have to use indentation before declaring fonts. you can see the correct example in the snippet below:
flutter:
fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
2- As the document mentioned the Folder Structure should be like :
awesome_app/
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf
RobotoMono-Regular.ttf
RobotoMono-Bold.ttf
3- Add your font-family name correctly in your main ThemeData as per pubspec.yaml file:
MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font.
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),);
your using asset prefix while declaring fonts in pubspec.yaml
Here is the solution https://stackoverflow.com/a/59113335/5557479

How to set textStyle of a Cupertino app in flutter

I have a CupertinoApp and I would like to apply a custom TextStyle to all the screen/object of my app. For example I would lie to set a font family to all Text widget & Dialog widget and use that font across all my app. I was hoping to set it once in CupertinoThemeData or CupertinoTextThemeData but so far I did not have joy.
Note: I am able to set style for each Text however I would like to set it once for all
I've just run into this at the moment.
All I'm trying to do is colour text white, with general black backgrounds across the app (not font work).
The following has brought me some success:
return CupertinoApp(
theme: new CupertinoThemeData(
brightness: Brightness.dark,
primaryColor: CupertinoColors.dark,
barBackgroundColor: CupertinoColors.black,
scaffoldBackgroundColor: CupertinoColors.black,
textTheme: new CupertinoTextThemeData(
primaryColor: CupertinoColors.white,
brightness: Brightness.light,
textStyle: TextStyle(color: CupertinoColors.white),
// ... here I actually utilised all possible parameters in the constructor
// as you can see in the link underneath
),
),
// ...
)
Ref: CupertinoTextThemeData Constructor
I think you could extend my TextStyle(color: CupertinoColors.white) to apply fonts too. I intend to extract the TextStyle and ...ThemeData into separate classes to create a single place to edit them.
Hopefully this advances your position
Use this example of theme in your CupertinoApp .
theme: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
textStyle: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
backgroundColor: CupertinoColors.black)),
),
Reminder : For the colors, use a CupertinoColor instead of a simple
Color.
My code is here

How to use a specific font from a list of fonts specified in a asset family in pubspec.yaml

Let's say i have added following lines to the pubspec.yaml file
fonts:
fonts:
- family: GreatVibes
fonts:
- asset: fonts/GreatVibes-Regular.ttf
- asset: fonts/GreatVibes-Bold.ttf
I am using it in my app with the following lines of code.
new Text('My New Font',
style: new TextStyle(
color: Colors.white,
fontFamily: 'GreatVibes',
fontSize: 16.0,
)),
My question is that ,among the two .ttf files provided earlier, how does flutter decides which file to use?
And Let's say if flutter decides to use GreatVibes-Bold.ttf, what can i do to make it use GreatVibes-regular.ttf
If I understand these font things correctly - it has to be like this:
fonts:
- family: GreatVibes
fonts:
- asset: fonts/GreatVibes-Regular.ttf
- asset: fonts/GreatVibes-Bold.ttf
weight: 700
- asset: fonts/GreatVibes-Italic.ttf
style: italic
And then
new Text('My New Font',
style: new TextStyle(
color: Colors.white,
fontFamily: 'GreatVibes',
fontWeight: FontWeight.w700,
fontSize: 16.0,
)),
you may use it directly into widget style,or using Theme object which i prefer to control overall app from one location, here an example for main.dart:
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.deepOrange,
**fontFamily: 'Lato'**),
....
},
);
Checkout these links :
How to use a custom font style in flutter?
https://flutter.io/docs/cookbook/design/fonts