Основы Flutter для начинающих (Часть VIII)

Flutter наделён большими возможностями для простой кастомизации пользовательского интерфейса.

Сегодня мы пастараемся охватить самые главные вещи, которые могут вам пригодиться в плане создания дизайна приложения.

Статья не претендует на полный объем. В ней приведено только самое главное.

Начинаем!

Добавляем кастомные шрифты

Попробуем сменить шрифт нашего Flutter приложения.

Перейдем на сайт Google Fonts и скачаем шрифт Kalam.

Далее создадим папку fonts в корне нашего проекта:

И положим туда наши шрифты:

Теперь пропишем шрифт Kalam в pubspec.yaml файле:

# в данной секции вы можете подключить шрифты и assets файлы flutter:    # указываем, что мы используем MaterialApp иконки и наше   # приложение соответствует Material Design   uses-material-design: true     # указываем кастомные шрифты   fonts:     # название семейства шрифтов     - family: Kalam       fonts:         # для каждого файла шрифта мы прописываем          # соответствующие параметры         - asset: fonts/Kalam-Regular.ttf           style: normal         - asset: fonts/Kalam-Bold.ttf           weight: 700           style: normal         - asset: fonts/Kalam-Light.ttf           style: normal           weight: 300    # прописываем директорию images   # / указывает на то, что мы собираемся включить   # все файлы которые будут в директории images   assets:     - images/

Не забываем выполнять pub get команду.

Теперь мы можем приступить к настройке темы.

Настройка темы приложения

Если у вас есть опыт нативной разработке на Android то вы, возможно, поймёте меня.

Одной из самых важнейших проблем в нативной разработке является поддержка более 2-х тем в приложении.

Возможно 3 и более тем — это не такой распространенный случай, как я думаю.

Но все же из коробки в Android это не так просто сделать. Вам придётся расширяться от стандартных компонентов и вытворять различные штуки (паттерн Observer, работа с Drawable в коде).

К счастью у Flutter таких проблем нет.

Переходим к созданию новой темы для нашего приложения. Для этого создадим папку resources, а в ней файл theme.dart:

import 'package:flutter/material.dart';  // настраиваем кастомную тему final usualTheme = ThemeData(   // указываем primaryColor и его оттенки   primaryColor: Colors.purple[600],   primaryColorLight: Colors.purple[300],   primaryColorDark: Colors.purple[800],   // также указываем accentColor   accentColor: Colors.teal,   // настройка Theme для AppBar   appBarTheme: AppBarTheme(     shadowColor: Colors.grey.withOpacity(0.8),     elevation: 10,   ),   // настройка Theme для Text   textTheme: TextTheme(     headline5: TextStyle(fontWeight: FontWeight.bold)   ),   // указываем наш шрифт для всего приложения   fontFamily: "Kalam" );

Если вы не понимаете назначение primaryColor и accentColor то вы можете более подробно с этим познакомиться на сайте Material Design.

Осталось только заменить старую тему на новую в файле main.dart:

class MyApp extends StatelessWidget {    // функция build отвечает за построение иерархии виджетов   @override   Widget build(BuildContext context) {     // виджет MaterialApp - главный виджет приложения, который     // позволяет настроить тему и использовать     // Material Design для разработки.     return MaterialApp(       // заголовок приложения       // обычно виден, когда мы сворачиваем приложение       title: 'Json Placeholder App',       // убираем баннер       debugShowCheckedModeBanner: false,       // указываем только что созданную тему       theme: usualTheme,       // Наша главная страница с нижнем меню       home: HomePage(),     );   } } 

Запускаем.

Получилось довольно симпатично!

Вот мы и рассмотрели самые главные вещи, касающиеся тем приложения и кастомных шрифтов.

Как я и говорил это довольно просто 🙂

Заключение

От себя я могу только отметить, что Flutter подарил разработчиком возможность создавать красивый UI и наслаждаться этим процессом.

Полезные ссылки:

• Use a custom font

• The Color system (Material Design)

• Ссылка на Github

Всем хорошего кода!