FontWeight not work with Chinese in Flutter - flutter

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

Related

Flutter google_fonts package doesn't match for roboto flex font

Flutter doesn't render robotoFlex fonts Font weights Example Bold, W600, W700, W800, W900,
I'm using google_fonts for my project, I don't know what's wrong. Its working fine with other fonts like GoogleFont.lato and other
font comparison
child: Text(
'GoogleFonts.lato',
style: GoogleFonts.lato(
textStyle: const TextStyle(
fontSize: 17,
)),
).pV(5).pH(20),
),
Center(
child: Text(
'This is GoogleF.lato',
style: GoogleFonts.lato(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.w900)),
).pV(5).pH(20),
),
Center(
child: Text(
'This is GoogleF.lato',
style: GoogleFonts.lato(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold)),
).pV(1).pH(20),
),
const SizedBox(
height: 35,
),
Center(
child: Text(
'GoogleFonts.robotoflex',
style: GoogleFonts.robotoFlex(
textStyle: const TextStyle(
fontSize: 17,
)),
).pV(5).pH(20),
),
Center(
child: Text(
'This is GoogleF.RobotoFlex',
style: GoogleFonts.robotoFlex(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.w900)),
).pV(1).pH(20),
),
Center(
child: Text(
'This is GoogleF.RobotoFlex',
style: GoogleFonts.robotoFlex(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold)),
).pV(1).pH(20),
),
outPut Here you can see the difference google.lato font renders the font weight but roboto doesn't

how to make a row responsive in flutter?

Hello i'm try to write this text " choose a one to modify the number " and the word "to modify " is with a different style text . my problem here is that the text is not responsive that mean there is not a return to next line if the phone has a small screen
how can i fix it and make this text in the center ?
Row(
children: const [
Text(
"Choose a one",
style: TextStyle(
fontSize: 17,
fontFamily: 'SFProRegular',
color: Color(0xFF000000),
),
),
Text(
"to modify",
style: TextStyle(
fontSize: 17,
fontFamily: 'SFProRegular',
color: Color(0xFFFF9E4F),
),
),
Text(
"the number",
style: TextStyle(
fontSize: 17,
fontFamily: 'SFProRegular',
color: Color(0xFF000000),
),
),
],
)

You can try using rich text, it will be like the following
RichText(
text: TextSpan(
text: "Choose a one",
style: TextStyle(
fontSize: 17,
fontFamily: 'SFProRegular',
color: Color(0xFF000000),
),
children: const <TextSpan>[
TextSpan(text: 'to modify',
style: TextStyle(
fontSize: 17,
fontFamily: 'SFProRegular',
color: Color(0xFFFF9E4F),
),
TextSpan(text: ' the number',
style: TextStyle(
fontSize: 17,
fontFamily: 'SFProRegular',
color: Color(0xFF000000),
),
),
],
),
)

Flutter indentation on new line in ListBody

I have a ListBody which has a Text element and then a String which is returned by an API.
Such as..
Destination: $destination
Destination: London
However, if it is longer is spills over as such
Destination: London Paddington
Station
How is best to ensure that if the text is long enough to require a new line it is indented with the beginning on the String (i.e. The 'L' in 'London' is in-line)
Destination: London Paddington
Station
ListBody(
children: <Widget>[
RichText (
text: TextSpan(
children: <TextSpan> [
TextSpan(text: "\t\tDestination ", style: TextStyle(
fontSize: 18 ,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans'
)
),
TextSpan(text: "$destination",
style: TextStyle(
fontSize: 18 ,
fontWeight: FontWeight.w600,
color: Colors.black,
fontFamily: 'DMSans'
)
),
Thank you

Why did you use a RichText ?
If it was only to render the "$destination" value in bold, it's a little bit overkill, and the following solution may be easier to implement.
Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Destination",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans'),
),
Flexible(
child: Padding(
padding: EdgeInsets.only(left: 12.0),
child: Text(
"London Paddington Station",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.black,
fontFamily: 'DMSans'),
),
),
),
],
),
],
)
And the rendering will look like this

The most straightforward way is simply to display the text as a row of two elements, with crossAxisAlignment: CrossAxisAlignment.start
Like so:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Destination: ',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans',
),
),
Expanded(
child: Text(
'London Paddington Station',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.black,
fontFamily: 'DMSans',
),
),
),
],
),
Note that it's important to wrap the long text in an Expanded widget - Otherwise, the text will simply overflow past the edge of the widget, rather than wrapping.
You can see a working example here: https://dartpad.dev/?id=80d0a8514577a65874c0e0ff7f2cb79c

The named parameter 'title' isn't defined

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

Flutter CircleAvatar with a radius above 27 in a ListTile becomes an ellipse

I'm having an issue with this, I need a CircleAvatar with a Radius of 35, but anything above 27, placed in a ListTile makes it an ellipse, constraining the height. In the container above it is displayed properly with Radius 40. Any ideas?
Card(
elevation: 0,
child: ListTile(
leading: CircleAvatar(
radius: 27,
backgroundImage: AssetImage('images/sophia_hs.jpg'),
),
title:
Text("Sophia Daniels",
style: TextStyle(
fontFamily: 'Roboto',
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
subtitle:
Text("Casting Director",
style: TextStyle(
fontFamily: 'Roboto',
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal,
),
),
),
),
Container(
height: 120,
color: Color(0xffffd504),
child: Center(
child: ListTile(
leading: CircleAvatar(
radius: 40,
backgroundImage: AssetImage('images/sophia_hs.jpg'),
),
dense: false,
title: Text("Sophia Daniels",
style: TextStyle(
fontFamily: 'Roboto',
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
subtitle: Text("Casting Director",
style: TextStyle(
fontFamily: 'Roboto',
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal,
),
),
),
),
),
enter image description here

Try to edit the height of the container and make it bigger than 120.
You could also try Image.Asset() to load images from assets. They have more ability to fit the image according to it's size.

As a workaround, wrap the "CircleAvatar" with radius greater than 27 and "ListTile" in a row as shown below:
Row(
children: [
CircleAvatar(
radius: 32,
backgroundImage: AssetImage('images/sophia_hs.jpg'),
),
Flexible(
child: ListTile(
title: Text(
"Sophia Daniels",
style: TextStyle(
fontFamily: 'Roboto',
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
subtitle: Text(
"Casting Director",
style: TextStyle(
fontFamily: 'Roboto',
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal,
),
),
),
),
],
),
ListTile should be enclosed in a Flexible to avoid "BoxConstraints forces an infinite width" error.