При разработке современных приложений типографика играет решающую роль в создании визуально привлекательного пользовательского интерфейса. Google Fonts предоставляет обширную коллекцию бесплатных шрифтов с открытым исходным кодом, которые могут улучшить дизайн вашего приложения Flutter. В этой статье мы рассмотрим различные методы интеграции Google Fonts в ваше приложение Flutter, а также приведем примеры кода для каждого подхода.

Метод 1: использование пакета google_fonts
Самый простой способ включить Google Fonts в ваше приложение Flutter — использовать пакет google_fonts. Этот пакет упрощает процесс загрузки и интеграции шрифтов из Google Fonts.

1. Добавьте зависимость google_fontsв файл pubspec.yaml:

   dependencies:
   flutter:
   sdk: flutter
   google_fonts: ^2.0.0

2. Импортируйте пакет google_fontsв свой файл Dart:

   import 'package:google_fonts/google_fonts.dart';

3. Используйте нужный шрифт Google в своем приложении:

   Text(
   'Hello, Google Fonts!',
   style: GoogleFonts.roboto(),
   )

Метод 2: загрузка и использование шрифтов вручную
Если вы предпочитаете загружать и использовать шрифты непосредственно в своем проекте, не полагаясь на пакет, выполните следующие действия:

1. Посетите веб-сайт Google Fonts ( https://fonts.google.com/ ) и выберите нужный шрифт.

2. Нажмите кнопку «Выбрать этот шрифт», а затем перейдите на вкладку «Выбрано семейство».

3. В разделе «Встроить» выберите параметр «@import» и скопируйте предоставленную ссылку CSS.

4. Создайте новый файл в каталоге assets/fontsвашего проекта, например fonts/roboto_regular.ttf, и вставьте загруженный файл шрифта в этот каталог.

5. Обновите файл pubspec.yaml, включив в него файл шрифта:

   flutter:
   assets:
   - assets/fonts/roboto_regular.ttf

6. Загрузите шрифт в файл Dart:

   import 'package:flutter/services.dart';
   import 'package:flutter/widgets.dart';
   Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await loadFont();
   runApp(MyApp());
   }
   Future<void> loadFont() async {
   await Future.wait([
   // Load other assets if needed
   rootBundle.load('assets/fonts/roboto_regular.ttf'),
   ]);
   }

7. Примените шрифт к текстовому виджету:

   Text(
   'Hello, Custom Font!',
   style: TextStyle(
   fontFamily: 'Roboto',
   fontWeight: FontWeight.normal,
   fontSize: 16,
   ),
   )

Метод 3. Использование URL-адреса CSS Google Fonts
Если вы предпочитаете использовать URL-адрес CSS Google Fonts напрямую, выполните следующие действия:

1. Посетите веб-сайт Google Fonts ( https://fonts.google.com/ ) и выберите нужный шрифт.

2. Нажмите кнопку «Выбрать этот шрифт», а затем перейдите на вкладку «Выбрано семейство».

3. В разделе «Встроить» выберите параметр «@import» и скопируйте предоставленную ссылку CSS.

4. В файл Dart добавьте следующий код для получения CSS и URL-адреса шрифта:

   import 'package:http/http.dart' as http;
   import 'package:html/parser.dart';
   Future<String> getFontUrl() async {
   final response = await http.get(Uri.parse('<CSS URL HERE>'));
   final document = parse(response.body);
   final fontUrl = document
     .querySelector('link[rel="stylesheet"]')
     .attributes['href']
     .replaceAll('.css', '.ttf');
   return fontUrl;
   }

5. Загрузите файл шрифта, используя извлеченный URL-адрес, и сохраните его в своем каталоге assets/fonts.

6. Выполните шаги 5–7 в методе 2, чтобы загрузить и применить собственный шрифт.

В этой статье мы рассмотрели три различных метода интеграции Google Fonts в приложение Flutter. Пакет google_fontsпредоставляет удобный способ прямого использования Google Fonts, а ручные методы позволяют расширить возможности настройки. Поэкспериментируйте с различными шрифтами и стилями, чтобы создать визуально привлекательные и привлекательные пользовательские интерфейсы в своих приложениях Flutter.