개발하자

플러터에서 아이콘의 무게/대담함(FontWeight) 증가/구성 방법

Cuire 2023. 9. 3. 21:51
반응형

플러터에서 아이콘의 무게/대담함(FontWeight) 증가/구성 방법

나는 내 플러터 앱에 아이콘(구체적으로 말하자면 뒤 아이콘)을 가지고 있다. 더 가벼워 보여요. 나는 그것을 대담하게 만들고 싶다/어떤 이유에서인지 체중을 늘리고 싶다.

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

관련 스레드/문서를 찾을 수 없습니다.



아이콘

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

현재, 나는 아이콘에 속성이 없다고 생각한다. 사용자 지정 아이콘을 에서 가져올 수 있으며 글꼴 아래에서 가져올 때 pubspec.swl에서 글꼴 가중치를 다음과 같이 설정할 수 있습니다:

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

자세한 내용은 다음 기사를 참조하십시오:



아이콘 크기를 지정하여 수행할 수 있습니다.

Container(
    child: Icon(
        Icons.arrow_back,
        size: 20.0,
        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)),
    ),
)


질문은 오래되었지만 누군가에게 도움이 되기를 바란다.

이전:

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

이후(포함):

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

물론 아이콘은 다양한 가중치를 지원해야 합니다. 내 예시의 아이콘은 오직 2개의 가중치만 지원한다:

  1. thin <= FontWeight.w500
  2. thick >= FontWeight.w600


만약 당신이 그것을 바꾸고 싶다면

Flutter 3.10.0 이상 버전부터:

재료 설계 3은 플러터에서 구현되므로 다음 예와 같이 아이콘의 무게를 쉽게 지정할 수 있습니다:

Icon(Icons.star_outline,weight: 10)


무게 설정(스트로크 두께). 기본적으로 제공되는 아이콘 중 이 속성을 지원하는 아이콘이 없습니다. 따라서 이러한 아이콘에는 속성을 설정해도 아무런 효과가 없습니다.

패키지의 아이콘은 가중치 속성을 지원합니다. 예:

import 'package:material_symbols_icons/symbols.dart';
...
          Icon(Symbols.chevron_right, weight: 100)

반응형