Давайте разработаем первые элементы пользовательского интерфейса, используя пакет google_nav_bar.
В этой статье мы углубимся в разработку элементов пользовательского интерфейса (UI) для нашей текстовой игры с искусственным интеллектом с использованием Flutter. Наша основная цель на этом начальном этапе — создать панель навигации, которая будет важным компонентом пользовательского интерфейса нашей игры.
Для этого я решил использовать возможности пакета «google_nav_bar». Этот пакет предлагает широкий спектр возможностей дизайна и упрощает процесс внедрения, позволяя нам сосредоточиться на обеспечении беспрепятственного взаимодействия с пользователем.
Во-первых, нам нужно добавить необходимую зависимость в файл pubspec.yaml нашего проекта:
dependencies: google_nav_bar: ^5.0.6
После добавления зависимости мы импортируем пакет в наш код Flutter:
import 'package:google_nav_bar/google_nav_bar.dart';
Теперь приступим к реализации панели навигации. Мы продемонстрируем фрагмент кода для этой задачи, который будет встроен в основной виджет нашей игры:
@override
Widget build(BuildContext context) {
return BlocBuilder<ThemeCubit, ThemeState>(builder: (context, state) {
return Scaffold(
backgroundColor: state.theme.scaffoldBackgroundColor,
body: SafeArea(child: widget.child),
bottomNavigationBar: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 20),
child: GNav(
backgroundColor: state.theme.scaffoldBackgroundColor,
activeColor: state.theme.primaryColor,
tabBackgroundColor: state.theme.focusColor,
gap: 8,
padding: const EdgeInsets.all(16),
tabs: [
GButton(
icon: Icons.home,
iconColor: state.theme.primaryColor,
text: 'Home',
textStyle: GoogleFonts.ubuntu(
color: state.theme.primaryColor,
fontSize: 15.0,
//fontWeight: FontWeight.bold,
),
onPressed: () {},
),
GButton(
icon: Icons.local_fire_department,
iconColor: state.theme.primaryColor,
text: 'Discover',
textStyle: GoogleFonts.ubuntu(
color: state.theme.primaryColor,
fontSize: 15.0,
//fontWeight: FontWeight.bold,
),
onPressed: () {},
),
GButton(
icon: Icons.person,
iconColor: state.theme.primaryColor,
text: 'Profile',
textStyle: GoogleFonts.ubuntu(
color: state.theme.primaryColor,
fontSize: 15.0,
//fontWeight: FontWeight.bold,
),
onPressed: () {},
),
GButton(
icon: Icons.settings,
iconColor: state.theme.primaryColor,
text: 'Settings',
textStyle: GoogleFonts.ubuntu(
color: state.theme.primaryColor,
fontSize: 15.0,
//fontWeight: FontWeight.bold,
),
onPressed: () {},
),
]),
));
});
}
В приведенном выше фрагменте кода мы используем виджет GNav, предоставляемый пакетом «google_nav_bar». Этот виджет позволяет нам настраивать различные аспекты внешнего вида панели навигации в зависимости от текущей темы приложения. Мы можем указать цвет фона, активный цвет, цвет фона вкладки, а также стиль текста для каждой вкладки. Кроме того, мы связываем соответствующее действие или маршрут с каждой вкладкой через обратный вызов onPressed.
Важно отметить, что BlocBuilder используется здесь для обработки темы приложения. Мы подробнее рассмотрим эту тему в следующей статье этой серии.
Чтобы улучшить визуальную привлекательность панели навигации нашей текстовой игры с искусственным интеллектом, мы решили использовать шрифты Google. Google Fonts предлагает широкий выбор высококачественных стилей шрифтов, которые могут значительно обогатить общий дизайн нашего пользовательского интерфейса.
Чтобы интегрировать Google Fonts в наш проект Flutter, мы выполнили следующие шаги:
- Во-первых, мы включили пакет
google_fontsв качестве зависимости в файлpubspec.yamlнашего проекта:
dependencies: google_fonts: ^4.0.4
2. Далее мы импортировали необходимый пакет в наш код Flutter:
import 'package:google_fonts/google_fonts.dart';
Теперь мы можем приступить к использованию шрифтов Google в реализации панели навигации. В нашем предыдущем фрагменте кода мы указали стили текста для каждой вкладки с помощью конструктора GoogleFonts.ubuntu().
Заключение
В этой первой части нашей серии о разработке текстовой игры с искусственным интеллектом с помощью Flutter мы сосредоточились на создании начальных элементов пользовательского интерфейса, уделяя особое внимание панели навигации. Используя пакет «google_nav_bar», мы смогли создать элегантный и интуитивно понятный навигационный интерфейс, который закладывает основу для захватывающего игрового процесса.
Пакет «google_nav_bar» предлагает ряд возможностей дизайна и оказался простым в реализации. Всего несколькими строками кода мы интегрировали панель навигации в пользовательский интерфейс нашей игры, используя возможности виджета GNav для настройки его внешнего вида и функциональности.
Кроме того, мы изучили интеграцию шрифтов Google, чтобы улучшить стиль текста в нашей панели навигации. Используя пакет «google_fonts», мы без труда получили доступ к обширной библиотеке стилей шрифтов, что позволило нам настроить визуальные аспекты пользовательского интерфейса нашей игры.
Завершая эту первую часть серии, мы успешно заложили основу для пользовательского интерфейса нашей текстовой игры с искусственным интеллектом. В следующих статьях мы углубимся в функциональность игры, реализуя больше функций, таких как игровая механика, элементы пользовательского интерфейса и интерактивные элементы. Кроме того, мы изучим передовые методы оптимизации производительности игры и обеспечения бесперебойного взаимодействия с пользователем.
Оставайтесь с нами во второй части, где мы продолжим наше путешествие по разработке текстовой игры с искусственным интеллектом с помощью Flutter, открывая новые уровни азарта и интерактивности.
Хотите подключиться?
- Твиттер 💙
