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
Related
Below is my test code:
Text(
'I love 中国',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w300,
color: Colors.red,
),
),
Text(
'I love 中国',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w500,
color: Colors.red,
),
),
Result:
You can see with different fontWeight letter works but Chinese act the same.
How can I solve it?
My flutter is 3.3.2.
Note: run on iOS.
Flutter will search for a font on the host system that is closest to the specified font weight. But if the system only provides one font that handles the requested characters, then Flutter and Skia will synthesize a "fake bold" version of that font to handle other font weights.
Due to issue on github
Solution 1: Set theme in your MaterialApp:
theme: ThemeData(
fontFamily: "PingFang SC",
),
Solution 2: Set fontFamilyFallback where you need:
Text(
'I love 中国',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w500,
color: Colors.red,
fontFamilyFallback: ["PingFang SC", "Heiti SC"],
),
),
Solution 3: Use DefaultTextStyle with fontFamilyFallback:
DefaultTextStyle(
style: TextStyle(
fontFamilyFallback: ["PingFang SC", "Heiti SC"],
color: Colors.red,
fontSize: 30,
),
child: Column(
children: [
Text(
'I love 中国',
style: TextStyle(
fontWeight: FontWeight.w400,
),
),
Text(
'I love 中国',
style: TextStyle(
fontWeight: FontWeight.w300,
),
),
Text(
'I love 中国',
style: TextStyle(
fontWeight: FontWeight.w500,
),
),
],
),
),
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 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,
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),
),
);
}
}