dynamic_cached_fonts

동적 캐시 글꼴

웹 글꼴을 사용하기 위해 간단하고 사용하기 쉽지만 사용자 정의 할 수있는 글꼴 로더.

데모 : https://sidrao2006.github.io/dynamic_cached_fonts

소개

동적 캐싱 글꼴을 사용하면 모든 URL에서 글꼴을 동적으로로드하여 캐시 할 수 있습니다. 이렇게하면 번들 크기를 줄이고 필요한 경우 글꼴을로드 할 수 있습니다.

동적으로로드 글꼴의 또 다른 장점은 이제 사용자에게 앱 글꼴을 선택할 수있는 옵션을 쉽게 제공 할 수 있다는 것입니다. 이것은 더 큰 수준의 사용자 정의를 허용합니다.

캐싱은 글꼴이 한 번만 다운로드되어 여러 번 사용하여 네트워크와 배터리 사용을 줄이면서 추가 성능 업그레이드입니다.

? 시작하세요

패키지를 사용하려면 dynamic_cached_fonts 종속성으로 추가하십시오.

⚒️ 사용

주문형 글꼴 로딩

예를 들어 페이지가로드 될 때 주문에 글꼴을로드 할 수 있습니다.

 @override
void initState () {
  final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
    fontFamily : fontFamilyName, // The font family name to be passed to TextStyle.fontFamily
    url : fontUrl, // A valid url pointing to a font file (.ttf or .otf files only) 
  );
  dynamicCachedFont. load (); // Downloads the font, caches and loads it.

  super . initState ();
}
...
Text (
  'Some Text' ,
  style : TextStyle (fontFamily : fontFamilyName),
)

또는 버튼을 클릭하면

 ElevatedButton (
  onPressed : () {
    final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
      fontFamily : fontFamilyName,
      url : fontUrl,
    );

    dynamicCachedFont. load ();
  },
  child : const Text ( 'Load Font' ),
),

캐시가 얼마나 큰지 또는 캐시에 글꼴이 얼마나 오래 머무르고 있는지 변경하려면 maxCacheObjects 및 cacheStalePeriod 통과하십시오.

 DynamicCachedFonts (
  fontFamily : fontFamilyName,
  url : fontUrl,
  maxCacheObjects : 150 ,
  cacheStalePeriod : const Duration (days : 100 ),
);

TextStyle.fontFamily S는 load() 호출 된 후에 만 적용됩니다.

load() 호출 ()은 한 번 이상 StateError 던집니다

단일 패밀리로 여러 글꼴, 다양한 무게 및 스타일을로드해야한다면 DynamicCachedFonts.family 생성자를 사용할 수 있습니다.

urls 과 같은 패밀리의 다른 글꼴을 가리키는 URL 목록을 수락합니다.

 DynamicCachedFonts . family (
  urls : < String > [
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily : fontFamilyName,
);

패키지는 또한 글꼴을 Stream 으로로드하는 것을 지원합니다! loadStream 글꼴 파일을 방출하는 단일 가입 스트림을 반환합니다.

loadStream DownloadProgress 이벤트가 수신 될 때마다 호출되는 콜백, downloadProgressListener 수용합니다. 이것은 글꼴이 실제로 제공된 URL에서 다운로드되는 경우에만 발생합니다. 일반적으로 캐시에서 제공되는 후속 요청은 진행 상황을 방출하지 않습니다. 글꼴 파일이 만료되면 파일이 다시 다운로드되어 진행 상황이 downloadProgressListener 로 스트리밍됩니다.

loadStream 단일 글꼴 URL로 호출되면 FONT가 엔진에로드 된 경우 itemCountProgressListener 한 번만 호출됩니다.

 final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
  fontFamily : fontFamilyName,
  url : fontUrl,
);

dynamicCachedFont. loadStream (
  itemCountProgressListener : ( double progress, int totalItems, int downloadedItems) {},
  downloadProgressListener : ( DownloadProgress progress) {},
);

loadStream 전체 글꼴 패밀리를로드하는 데 사용되면 itemCountProgressListener 가족의 모든 글꼴마다 한 번 호출됩니다. 아래의 예에서, 모든 글꼴이 플러터 엔진에로드 된 후에 itemCountProgressListener 4 번이라고 불립니다.

 final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts . family (
  urls : < String > [
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily : fontFamilyName,
);

dynamicCachedFont. loadStream (
  itemCountProgressListener : ( double progress, int totalItems, int downloadedItems) {},
  downloadProgressListener : ( DownloadProgress progress) {},
);

loadStream 한 번 이상 호출하면 StateError 발생합니다

더 많은 컨트롤이 필요한 경우 정적 방법을 사용하십시오!

cacheFont

onPressed : () {
  DynamicCachedFonts . cacheFont (fontUrl);
},
child : const Text ( 'Download font' ),

maxCacheObjects 및 cacheStalePeriod 여기에서 전달할 수 있습니다.

canLoadFont , loadCachedFont , loadCachedFamily

canLoadFont 글꼴을 캐시에서 사용할 수 있는지 확인하는 데 사용됩니다. 일반적으로 loadCached* 방법과 함께 사용됩니다.

먼저 글꼴이 이미 캐시에 있는지 확인하십시오. 그렇다면 글꼴을로드하십시오.

 if ( DynamicCachedFonts . canLoadFont (fontUrl)) {
  // To load a single font...
  DynamicCachedFonts . loadCachedFont (
    fontUrl,
    fontFamily : fontFamilyName,
  );

  // Or if you want to load multiple fonts as a family...
  DynamicCachedFonts . loadCachedFamily (
    < String > [
      fontFamilyNameBoldUrl,
      fontFamilyNameItalicUrl,
      fontFamilyNameRegularUrl,
      fontFamilyNameThinUrl,
    ],
    fontFamily : fontFamilyName,
  );
}

이제 글꼴을 캐시에서 사용할 수 없으면 다운로드하십시오!

 if ( DynamicCachedFonts . canLoadFont (fontUrl)) {
  ...
} else {
  DynamicCachedFonts . cacheFont (fontUrl);
}

cacheFontStream

cacheFontStream 글꼴을 다운로드하고 캐시하는 데 사용됩니다. 이 방법은 cacheFont 와 유사하지만 다운로드 진행 상황을 방출하는 단일 가입 Stream 반환합니다. 다운로드는 DownloadProgress 이벤트가 수신 될 때마다 호출되는 progressListener 콜백으로 스트리밍됩니다. 이것은 글꼴이 실제로 제공된 URL에서 다운로드되는 경우에만 발생합니다. 일반적으로 캐시에서 제공되는 후속 요청은 진행 상황을 방출하지 않습니다. 글꼴 파일이 만료되면 파일이 다시 다운로드되어 진행 상황이 downloadProgressListener 로 스트리밍됩니다.

 DynamicCachedFonts . cacheFontStream (
  fontUrl,
  progressListener : ( DownloadProgress progress) {},
);

loadCachedFamilyStream

canLoadFont 사용하여 글꼴을 캐시에서 사용할 수 있는지 확인하십시오.

loadCachedFamilyStream 은 단일 글꼴 패밀리로 플러터 엔진에 여러 글꼴을로드하는 데 사용됩니다. 이 방법은 loadCachedFamily 와 유사하지만 스트림을 반환합니다.

loadCachedFamilyStream 단일 글꼴 URL로 호출되면 FONT가 엔진에로드 된 경우 progressListener 한 번만 호출됩니다.

또한 loadCachedFamilyStream 전체 글꼴 제품군을로드하는 데 사용되면 progressListener 가족의 모든 글꼴마다 한 번 호출됩니다. 아래의 예에서, progressListener 모든 글꼴이 플러터 엔진에로드 된 후 4 번이라고 불립니다.

 DynamicCachedFonts . loadCachedFamilyStream (
  < String > [
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily : fontFamilyName,
  progressListener : ( double progress, int totalItems, int downloadedItems) {},
);

removeCachedFont

캐시에서 글꼴을 영구적으로 제거하려면 removeCachedFont 사용하십시오.

참고 - 완전한 앱이 다시 시작될 때까지 즉시 글꼴이 변경되지 않습니다.

마지막으로, 구현을 사용자 정의하려면 RawDynamicCachedFonts 확장하고 정적 메소드를 무시하십시오.

Firebase Cloud Storage에서로드 할 맞춤형 글꼴이 있습니까? DynamicCachedFonts.fromFirebase 생성자로 이동하십시오! gs:// 부터 시작하는 URL 인 Google Cloud 스토리지 위치를 허용합니다. 그 외에는 기본 생성자와 유사합니다.

팁 : DynamicCachedFonts.toggleVerboseLogging 사용하여 디버깅을위한 자세한 상태 및 구성을 기록하십시오.

? 버그보고 및 도움

버그를 찾으면 GitHub에서 문제를 열거나 도움이 필요한 경우 GitHub 토론에 대해 토론하십시오!

? 기여

일을 더 쉽게하기 위해 Docker Compose를 사용하여 개발 환경을 설정할 수 있습니다. docker compose run linux 실행하여 Linux Dev 환경을 설정하거나 docker compose run windows 실행하여 Linux DEV 환경을 설정하십시오.

Docker Windows 환경을 설정하려면 Windows 시스템에 있어야합니다.

패키지에 기여하려면 저장소를 포크하고 풀 요청을 엽니 다!