Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add increase /configure weight/boldness (FontWeight) of an Icon in Flutter

Tags:

icons

flutter

I have an Icon (Back Icon to be Specific) in My Flutter App. It Looks Lighter. I Want to Make It Bold/Increase weight for Some Reason.

Container(
    child: Icon(
        Icons.arrow_back,
        color: Color(0xffffffff),
    ),
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
    decoration: BoxDecoration(
        color: Color(0xff03b673),
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
    ),
)

Can't Find Any Thread/Documentation Regarding it.

like image 981
imLolman Avatar asked Jul 28 '19 17:07

imLolman


People also ask

How do I increase icon size on flutter?

You can increase the size of Icon to a required value by assigning the size property with specific double value.


2 Answers

icon size

Container(
child: Icon(
    Icons.arrow_back,
    color: Color(0xffffffff),
    size: 24.0
 ),
 padding: EdgeInsets.all(10.0),
 margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
 decoration: BoxDecoration(
    color: Color(0xff03b673),
    borderRadius: BorderRadius.all(Radius.circular(100.0)),
 ),
)

At the moment,I think there is no fontWeight property on icons. you may import custom icon from fluttericon.com and when you import it under fonts you can set the font weight like this in pubspec.yaml:

flutter:
 fonts:
 - family: MyIcon
  fonts:
    - asset: lib/fonts/iconfont.ttf
      weight: 400

For complete steps follow this nice article: https://developpaper.com/flutter-taste-1-3-step-use-custom-icon/

like image 97
Manas Avatar answered Oct 07 '22 08:10

Manas


Question is old, but I hope it will help someone.

Before:

Icon(
  CupertinoIcons.exclamationmark_circle,
  color: Colors.red,
  size: 16.0,
)

After (with FontWeight):

Text(
  String.fromCharCode(CupertinoIcons.exclamationmark_circle.codePoint),
  style: TextStyle(
    inherit: false,
    color: Colors.red,
    fontSize: 16.0,
    fontWeight: FontWeight.w700,
    fontFamily: CupertinoIcons.exclamationmark_circle.fontFamily,
    package: CupertinoIcons.exclamationmark_circle.fontPackage,
  ),
)

Of course, your icons should support different weights. Icon from my example supports only 2 weights:

  1. thin <= FontWeight.w500
  2. thick >= FontWeight.w600
like image 35
Alexander Farkas Avatar answered Oct 07 '22 06:10

Alexander Farkas