how to add font family into in main.dart flutter - flutter

I'm new to flutter and struggling to add font family in my code..already updated my pubspec.yamal with OpenSans fonts.. now how to add font family into this main. dart material app widget??
fontFamily: "OpenSans",
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E),
),
),
home: Homescreen(key: null),
);
}
}

You can try this
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E)),
textTheme: theme.textTheme.apply(fontFamily: "OpenSans"),
),

Create a simple file for the theme like the one I created theme_util.dart and use it as follows.
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: appTheme,
home: Homescreen(key: null),
);
theme_util.dart
ThemeData appTheme = ThemeData(
backgroundColor: appColor.white,
scaffoldBackgroundColor: appColor.white,
appBarTheme: AppBarTheme(
color: appColor.white,
brightness: Brightness.light,
textTheme: TextTheme().copyWith(headline6: titleStyle),
iconTheme: IconThemeData(color: appColor.primaryColor)),
fontFamily: 'Opensans',
primaryColor: appColor.primaryColor,
primaryColorDark: appColor.primaryDarkColor,
primaryColorLight: appColor.primaryLight,
accentColor: appColor.accentColor,
brightness: Brightness.light,
//primarySwatch: appColor.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
buttonTheme: ButtonThemeData(buttonColor: appColor.primaryColor),
);

You can create a style file in your dart folder and use the font where ever you want like this way-text_styles.dart
class TextStyles {
static TextStyle overline(
{required BuildContext context, required Color color}) {
return GoogleFonts.montserrat(
textStyle: Theme.of(context).textTheme.overline?.copyWith(color: color),
);
}
}
and use it as-
TextStyles.overline(context: context, color: theme.textColor).copyWith(fontWeight: FontWeight.w900),
Note:if you use custom font you have to install the package from your pubspec.yaml.Example-
google_fonts:

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

Flutter textTheme property is not working, How to replace or fix it?

I am new to flutter. I just created a theme file to define light and dark theme.When I defined light theme, the textTheme: property which is deprecated is not changing the text title color of app bar into black.
If I have to create or define textTheme or replace it ?? How should I do it ?
class MyTheme {
static ThemeData lightTheme(BuildContext context) => ThemeData(
primarySwatch: Colors.deepPurple,
fontFamily: GoogleFonts.lato().fontFamily,
appBarTheme: AppBarTheme(
color: Colors.white,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
//------
textTheme: Theme.of(context).textTheme, // Problem is here
//------
));
static ThemeData darkTheme(BuildContext context) =>
ThemeData(brightness: Brightness.dark);
}
Change it to this
textTheme: Theme.of(context).appBarTheme.textTheme,
PS: It's deprecated. try to migrate.
Use toolbarTextStyle and titleTextStyle instead of using textTheme inside appBarTheme.
toolbarTextStyle:
Theme.of(context).appBarTheme.toolbarTextStyle?.copyWith(
color: Colors.amber,
///your config
),
titleTextStyle:
Theme.of(context).appBarTheme.titleTextStyle?.copyWith(
color: Colors.amber, ///your config
)
More about using theme.

migrating accent color in flutter v2.5

after the flutter 2.5 update my theme data kinda broke and doesn't accept accentColor anymore. I took a look at the documantation and saw that is "renamed" to colorScheme.secondary. But no matter what I try, I can't get it to work for me.
This is my current code:
class Themes {
static final lightTheme = ThemeData(
accentColor: Palette.orange,
colorScheme: ColorScheme.light(),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Palette.orange,
foregroundColor: Colors.white,
),
scaffoldBackgroundColor: Colors.white,
);
static final darkTheme = ThemeData(
accentColor: Palette.orange,
colorScheme: ColorScheme.dark(),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Palette.orange,
foregroundColor: Colors.white,
),
scaffoldBackgroundColor: Colors.grey[900],
);
}
So many changes are in flutter 2.5
Try to use Below code hope it's helpful to you
theme: ThemeData(
colorScheme: Theme.of(context).colorScheme.copyWith(secondary: Color(accentColor))
),
for more information check official documentation here
final ThemeData theme = ThemeData();
MaterialApp(
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(secondary: myColor),
),
//...
)
Code before migration:
Color myColor = Theme.of(context).accentColor;
Code after migration:
Color myColor = Theme.of(context).colorScheme.secondary;

iOS Flutter dark mode not changing instantly

I'm not sure if this is a flutter issue, but whenever i change light/dark mode from control center, the theme does not change instantly. Only after dismissing the control center and resume back the app, then it will start to change. I have uploaded a gif to explain the issue.
If i compare to other apps like Reddit, the background will instantly change to dark after toggling dark mode in control center
For now im using the default material app theme
main.dart
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: AppTheme.lightTheme,
darkTheme: AppTheme.darkTheme,
home: HomeWidget()
);
}
AppTheme.dart
class AppTheme {
AppTheme._();
static final ThemeData lightTheme = ThemeData(
canvasColor: Colors.transparent,
scaffoldBackgroundColor: Colors.grey.shade100,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.black),
caption: TextStyle(color: Colors.grey.shade700),
headline6: TextStyle(color: Colors.black)
),
iconTheme: IconThemeData(
color: Colors.black
),
appBarTheme: AppBarTheme(brightness: Brightness.light),
brightness: Brightness.light
);
static final ThemeData darkTheme = ThemeData(
canvasColor: Colors.transparent,
scaffoldBackgroundColor: Color(0xff111215),
textTheme: TextTheme(
bodyText1: TextStyle(color: Color(0xffd0d2d4)),
caption: TextStyle(color: Color(0xff717579)),
headline6: TextStyle(color: Color(0xffd0d2d4))
),
iconTheme: IconThemeData(
color: Color(0xff9aa0a6)
),
appBarTheme: AppBarTheme(brightness: Brightness.light),
brightness: Brightness.light
);
}
Are you checking it in the debugging mode or release mode. If you are checking it in the debugging mode just check it in the release mode(debug mode renders a little slow).
Let me know if it works

How to change cursor color in flutter

Dears,
I have 2 qestions in flutter If you don't mind.
1- How to change the color of the cursor as it default blue and I don't like it
2- how can I make the text at the bottom of the screen whatever the screen size. ??
Thank you in advance.
put cursorColor: Colors.white, inside the TextFormField
This works fine in both iOS and Android:
TextField(cursorColor: Colors.white)
But, if you like to set it in theme then
SOLUTION 1 - Original answer, recently not tested, also, seems it's deprecated:
I found the solution here:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
MaterialApp(
title: "Rate your Colleagues",
theme: ThemeData(
// for iOS
cupertinoOverrideTheme: CupertinoThemeData(
primaryColor: Colors.red,
),
// for others(Android, Fuchsia)
cursorColor: Colors.red,
home: SplashScreen(),
);
...
SOLUTION 2 - edited answer - not tested - please give credit to #i4guar
I found the solution here:
MaterialApp(
title: "Rate your Colleagues",
theme: ThemeData(
textSelectionTheme: TextSelectionThemeData(
cursorColor: darkPrimarySwatchColor,
selectionColor: darkPrimarySwatchColor,
selectionHandleColor: darkPrimarySwatchColor,
),
),
home: SplashScreen(),
);
cursorColor is now deprecated for ThemeData use this instead (works on both iOS and android):
MaterialApp(
title: "Rate your Colleagues",
theme: ThemeData(
textSelectionTheme: TextSelectionThemeData(
cursorColor: darkPrimarySwatchColor,
selectionColor: darkPrimarySwatchColor,
selectionHandleColor: darkPrimarySwatchColor,
),
),
home: SplashScreen(),
);
Flutter has been updated, and now the cursorColor is used like this:
ThemeData(
...
textSelectionTheme: TextSelectionThemeData(
cursorColor: Colors.blue, //thereby
),
),
For question 1 you can set the cursorColor for theme attribute when calling MaterialApp like the below
new MaterialApp(
title: "Flutter App",
theme: ThemeData(
cursorColor: Colors.red,
home: HomeScreen(),
)
I had to set useTextSelectionTheme to true and set textSelectionTheme for my custom dark theme:
ThemeData _defaultDarkTheme = ThemeData.dark();
ThemeData _darkTheme = initializeDefaultLineHeight(ThemeData(
brightness: Brightness.dark,
// How to set cursor color for TextFormField
useTextSelectionTheme: true,
textSelectionTheme: _defaultDarkTheme.textSelectionTheme.copyWith(
cursorColor: Colors.grey[600]),