I am new to flutter.
I installed this library to be able to use google fonts.
Now I need to do it in the theme data definition, and tried like this but it's not allowed
ThemeData appTheme() {
return ThemeData(
...
fontFamily: GoogleFonts.openSans(),
);
}
How do I do this? Thank you very much
Reposting my comment: fontFamily expects a String. Use GoogleFonts.openSans().fontFamily.
Paste the code below in your theme file, and add it to your ThemeData(textTheme: textTheme)
final TextTheme textTheme = TextTheme(
headline1: GoogleFonts.roboto(
fontSize: 97, fontWeight: FontWeight.w300, letterSpacing: -1.5),
headline2: GoogleFonts.roboto(
fontSize: 61, fontWeight: FontWeight.w300, letterSpacing: -0.5),
headline3: GoogleFonts.roboto(fontSize: 48, fontWeight: FontWeight.w400),
headline4: GoogleFonts.roboto(
fontSize: 34, fontWeight: FontWeight.w400, letterSpacing: 0.25),
headline5: GoogleFonts.roboto(fontSize: 24, fontWeight: FontWeight.w400),
headline6: GoogleFonts.roboto(
fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
subtitle1: GoogleFonts.roboto(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
subtitle2: GoogleFonts.roboto(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
bodyText1: GoogleFonts.roboto(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
bodyText2: GoogleFonts.roboto(
fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
button: GoogleFonts.roboto(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
caption: GoogleFonts.roboto(
fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
overline: GoogleFonts.roboto(
fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
);
This video explains very well how to use themes and fonts in flutter https://youtu.be/stoJpMeS5aY?t=640
In main.dart file add
fontFamily: GoogleFonts.poppins().fontFamily,
Related
I'd like to use this font chosen from material design website into my Flutter mobile app. I've copied the code inside my main as follow.
But I have "undefined name GoogleFonts".
I've downloaded font from here : (https://fonts.google.com/noto/specimen/Noto+Sans?query=noto+sa) and copied the whole downloaded files *.ttf inside a font folder named GoogleFont, and of course added those lines of code inside pubspec.yaml
fonts:
- family: NotoSans
fonts:
- asset: GoogleFonts/NotoSans-Regular.ttf
Code inside main.dart:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
textTheme: TextTheme(
headline1: GoogleFonts.notoSans(
fontSize: 94, fontWeight: FontWeight.w300, letterSpacing: -1.5),
headline2: GoogleFonts.notoSans(
fontSize: 59, fontWeight: FontWeight.w300, letterSpacing: -0.5),
headline3:
GoogleFonts.notoSans(fontSize: 47, fontWeight: FontWeight.w400),
headline4: GoogleFonts.notoSans(
fontSize: 33, fontWeight: FontWeight.w400, letterSpacing: 0.25),
headline5:
GoogleFonts.notoSans(fontSize: 24, fontWeight: FontWeight.w400),
headline6: GoogleFonts.notoSans(
fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
subtitle1: GoogleFonts.notoSans(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
subtitle2: GoogleFonts.notoSans(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
bodyText1: GoogleFonts.notoSans(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
bodyText2: GoogleFonts.notoSans(
fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
button: GoogleFonts.notoSans(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
caption: GoogleFonts.notoSans(
fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
overline: GoogleFonts.notoSans(
fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
),
),
home: LoginPage(),
);
}
}
Earlier this week I followed some tutorial on Youtube for creating a flutter app, and I got some problems where it says that.
Instance member 'textTheme' can't be accessed using static access.
The problems occur at LandingPage.dart
#override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
return Container(
margin: const EdgeInsets.symmetric(vertical: 20),
child: Column(
children: [
Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.asset(itemData["image"])),
Positioned(
top: 15,
right: 15,
child: BorderBox(
width: 50,
height: 50,
child: Icon(Icons.favorite_border,color: COLOR_BLACK,
),
))
],
),
addVerticalSpace(15),
Row(
children: [
Text("${formatCurrency(itemData["amount"])}",
style: themeData.textTheme.headline1)
],
)
],
)
);}
textTheme.headline1 was imported from constants.dart.
import 'package:flutter/material.dart';
const COLOR_BLACK = Color.fromRGBO(48, 47, 48, 1.0);
const COLOR_GREY = Color.fromRGBO(141, 141, 141, 1.0);
const COLOR_WHITE = Colors.white;
const COLOR_DARK_BLUE = Color.fromRGBO(20, 25, 45, 1.0);
const TextTheme TEXT_THEME_DEFAULT = TextTheme(
headline1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 26),
headline2: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 22),
headline3: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 20),
headline4: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 16),
headline5: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 14),
headline6: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 12),
bodyText1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w500, fontSize: 14, height: 1.5),
bodyText2: TextStyle(
color: COLOR_GREY, fontWeight: FontWeight.w500, fontSize: 14, height: 1.5),
subtitle1: TextStyle(
color: COLOR_BLACK, fontSize: 12, fontWeight: FontWeight.w400),
subtitle2: TextStyle(
color: COLOR_GREY, fontSize: 12, fontWeight: FontWeight.w400)
);
const TextTheme TEXT_THEME_SMALL = TextTheme(
headline1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 22),
headline2: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 20),
headline3: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 18),
headline4: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 14),
headline5: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 12),
headline6: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 10),
bodyText1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w500, fontSize: 12, height: 1.5),
bodyText2: TextStyle(
color: COLOR_GREY, fontWeight: FontWeight.w500, fontSize: 12, height: 1.5),
subtitle1: TextStyle(
color: COLOR_BLACK, fontSize: 10, fontWeight: FontWeight.w400),
subtitle2: TextStyle(
color: COLOR_GREY, fontSize: 10, fontWeight: FontWeight.w400)
);
Thank You and have a good day:))
I get this error for the 'title' on the second line:
The named parameter 'title' isn't defined.
Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'title'.
textTheme: ThemeData.light().textTheme.copyWith(
title: TextStyle(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
You need to use titleLarge, titleMedium and titleSmall in place of title, use .copyWith() constructor.
return MaterialApp(
title: 'MyApp',
theme: Theme.of(context).copyWith(
textTheme: ThemeData.light().textTheme.copyWith(
titleSmall: Theme.of(context).textTheme.titleLarge?.copyWith(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
titleLarge: Theme.of(context).textTheme.titleLarge?.copyWith(...),
titleMedium: Theme.of(context).textTheme.titleLarge?.copyWith(...),
TextTheme does not include title /As you see in the below image:/
TextTheme properties
You can set theme like this
textTheme: TextTheme(
headline1: TextStyle(fontSize: 24, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline2: TextStyle(fontSize: 22, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline3: TextStyle(fontSize: 20, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline4: TextStyle(fontSize: 17, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline5: TextStyle(fontSize: 16, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline6: TextStyle(fontSize: 15, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
subtitle1: TextStyle(fontSize: 14, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w500),
subtitle2: TextStyle(fontSize: 12, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w500),
bodyText1: TextStyle(fontSize: 14, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.normal),
bodyText2: TextStyle(fontSize: 13, color: lightColors.SECONDARY_TEXT_COLOR, fontWeight: FontWeight.normal),
button: TextStyle(fontSize: 15, color: lightColors.GRAY_COLOR_100)
),
And use it in your App
Text("Text", style: Theme.of(context).textTheme.subtitle1!.copyWith())
With the latest version of Flutter, some theme identifiers changed.
display4 => headline1;
display3 => headline2;
display2 => headline3;
display1 => headline4;
headline => headline5;
title => headline6; // so use headline6 instead of title
subhead => subtitle1;
subtitle => subtitle2;
body2 => bodyText1;
body => bodyText2;
So you can define your Theme like this:
textTheme: ThemeData.light().textTheme.copyWith(
headline6: TextStyle(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
and then use it e.g. like this:
Text(
'my text',
style: Theme.of(context).textTheme.headline6,
),
The "title" is now deprecated, use "label" property instead
Documentation:
https://docs.flutter.dev/release/breaking-changes/bottom-navigation-title-to-label
I am using the date picker but it's showing a strange overflow text-overflow error.
I know the date picker uses the app Theme to style. But don't know which Theme property is used to style what in the dialogue box.
my Date picker:-
showDatePicker(
ontext: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
astDate: DateTime.utc(2100, DateTime.now().month, DateTime.now().day),
);
my App Theme:-
ThemeData(
primaryColor: Color(0xffE6F5F1),
accentColor: Color(0xFF4EB799),
visualDensity: VisualDensity.adaptivePlatformDensity,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
headline2: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 96,
letterSpacing: -1.5,
fontFamily: "Muli",
),
headline3: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 60,
letterSpacing: -0.5,
fontFamily: "Muli",
),
headline4: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 48,
letterSpacing: 0,
fontFamily: "Muli",
),
headline5: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 34,
letterSpacing: 0.25,
fontFamily: "Muli",
),
subtitle1: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0,
fontFamily: "Muli",
),
headline6: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
letterSpacing: 0.15,
fontFamily: "Muli",
),
subtitle2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
letterSpacing: 0.15,
fontFamily: "Muli",
),
bodyText2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16,
letterSpacing: 0.5,
fontFamily: "Muli",
),
bodyText1: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
letterSpacing: 0.25,
fontFamily: "Muli",
),
button: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 1.25,
fontFamily: "Muli",
),
caption: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12,
letterSpacing: 0.4,
fontFamily: "Muli",
),
overline: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
letterSpacing: 1.5,
fontFamily: "Muli",
),
),
);
What is wrong here, which theme property to style what in Date picker in flutter?
In source code date_picker_dialog.dart
landscape mode use headline5
portrait mode use headline4
final TextStyle dateStyle = orientation == Orientation.landscape
? textTheme.headline5?.copyWith(color: dateColor)
: textTheme.headline4?.copyWith(color: dateColor);
...
final Widget header = DatePickerHeader(
helpText: widget.helpText ?? localizations.datePickerHelpText,
titleText: dateText,
titleStyle: dateStyle,
orientation: orientation,
isShort: orientation == Orientation.landscape,
icon: entryModeIcon,
iconTooltip: entryModeTooltip,
onIconPressed: _handleEntryModeToggle,
);
working demo
full code reduce headline4 font size
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xffE6F5F1),
accentColor: Color(0xFF4EB799),
visualDensity: VisualDensity.adaptivePlatformDensity,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
headline2: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 96,
letterSpacing: -1.5,
fontFamily: "Muli",
),
headline3: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 60,
letterSpacing: -0.5,
fontFamily: "Muli",
),
headline4: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 30,
letterSpacing: 0,
fontFamily: "Muli",
),
headline5: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 34,
letterSpacing: 0.25,
fontFamily: "Muli",
),
subtitle1: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0,
fontFamily: "Muli",
),
headline6: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
letterSpacing: 0.15,
fontFamily: "Muli",
),
subtitle2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
letterSpacing: 0.15,
fontFamily: "Muli",
),
bodyText2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16,
letterSpacing: 0.5,
fontFamily: "Muli",
),
bodyText1: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
letterSpacing: 0.25,
fontFamily: "Muli",
),
button: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 1.25,
fontFamily: "Muli",
),
caption: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12,
letterSpacing: 0.4,
fontFamily: "Muli",
),
overline: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
letterSpacing: 1.5,
fontFamily: "Muli",
),
),
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
lastDate: DateTime.utc(2100, DateTime.now().month, DateTime.now().day),
);
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
How can I set the line-height globally inside ThemeData?
theme: ThemeData(
brightness: Brightness.light,
accentColor: myAccentColor,
primaryColor: myPrimaryColor,
fontFamily: 'Ubuntu',
buttonTheme: ThemeData.light().buttonTheme.copyWith(
buttonColor: myPrimaryColor,
textTheme: ButtonTextTheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
),
scaffoldBackgroundColor: myBackgroundWhite,
cardColor: myBackgroundWhite,
textSelectionColor: myGreyTextColor,
cursorColor: myAccentColor,
cupertinoOverrideTheme: CupertinoThemeData(
primaryColor: myAccentColor,
),
errorColor: myErrorColorRed,
)
We cant set the line-height (property name: height) directly from ThemeData.
The best practice for handling text style is by using material type system guidelines. See the section "Material Text Scale: Modernizing Flutter Text Theming" from here.
So then on global ThemeData, you can use
theme: ThemeData(
brightness: Brightness.light,
accentColor: flujoAccentColor,
primaryColor: flujoPrimaryColor,
fontFamily: 'FiraSans',
textTheme: TextTheme(
headline5: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
),
bodyText1: TextStyle(
fontSize: 16.0,
fontStyle: FontStyle.normal,
letterSpacing: 0.5,
),
bodyText2: TextStyle(
fontSize: 14.0,
fontStyle: FontStyle.normal,
letterSpacing: 0.25,
height: 1.5,
),
subtitle1: TextStyle(
fontSize: 16.0,
fontStyle: FontStyle.normal,
letterSpacing: 0.15,
),
subtitle2: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
caption: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
overline: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
letterSpacing: 0.25,
height: 1.5,
fontStyle: FontStyle.normal,
)),
Like this and on a Text widget, apply it like:
Text(
"Hello world!",
style: Theme.of(context).textTheme.bodyText1.copyWith(color: Colors.teal,),
);