Пользовательский интерфейс приложения великолепен, когда пользователь может легко перемещаться по его функциям без каких-либо проблем. Один из лучших способов уменьшить трения и улучшить взаимодействие с пользователем — выделить и продемонстрировать основные и неотъемлемые части вашего приложения. Это особенно полезно, когда пользователь запускает ваше приложение в первый раз или когда есть важное обновление и новая функциональность.
Showcaseview — это настраиваемый и простой в реализации пакет, который вы можете использовать, чтобы показать своим пользователям наиболее важные функции вашего приложения Flutter. С помощью Showcase и ShowCaseWidget мы можем продемонстрировать функцию в приложении Flutter.
Окончательное приложение
Как видно из демо, витрина реализуется мгновенно, как только вы запускаете приложение на главной странице. А затем перемещаться по разным витринам, когда пользователь нажимает на экран.
Давайте погрузимся в
Шаг 1. Добавьте зависимости
Сначала добавьте зависимости в файл pubsec.yaml.
dependencies:
flutter:
sdk: flutter
showcaseview: ^2.0.0+1
Шаг 2. Добавьте ресурсы в файл pubsec.yaml
assets: - assets/
Шаг 3. Запустите flutter packages get в корневом каталоге.
После всех настроек файла YAML. Вы должны реализовать это в своем коде соответственно.
Перед реализацией витрин для отдельных виджетов необходимо обернуть страницу, показывающую витрину, с помощью ShowCaseWidget. Он состоит из обязательного параметра builder, состоящего из виджета Builder, возвращающего нашу Домашнюю страницу.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter ShowCase',
theme: ThemeData(
primaryColor: const Color.fromRGBO(4, 43, 89, 1),
),
debugShowCheckedModeBanner: false,
home: ShowCaseWidget(
builder: Builder(builder: (context) => const HomePage())));
}
Теперь создайте homepage.dart внутри папки lib.
ShowCaseWidget должен знать, какие виджеты должны отображаться. Таким образом, вам нужно определить ключ для всех отображаемых виджетов. Наше приложение состоит из пяти виджетов, которые необходимо привлечь внимание пользователей, когда они переходят на Домашнюю страницу.
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>(); final GlobalKey _first = GlobalKey(); //you can define GlobalKey final _second = GlobalKey(); //or keep it as final final _third = GlobalKey(); final _fourth = GlobalKey(); final _fifth = GlobalKey();
Чтобы реализовать и запустить витрину при запуске страницы, мы вызываем метод startShowCase в initState HomePage.
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback(
(_) => ShowCaseWidget.of(context)
.startShowCase([_first, _second, _third, _fourth, _fifth]),
);
}
WidgetsBinding.instance.addPostFrameCallback() эта функция обратного вызова гарантирует, что все будет выполнено точно во время сборки.
В настоящее время, если вы запустите приложение, наша восхитительная демонстрация начнется при создании страницы. Нажмите на него, пока витрина не будет сделана.
Спустившись на нашу домашнюю страницу, внутри метода сборки мы возвращаем Scaffold и добавляем _scaffoldKey.
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
......
)}
Наша первая демонстрация будет на AppBar в виде значка гамбургера. Нам нужно добавить ключ, описание и дочерний элемент витрины.
leading: Showcase(
key: _first,
description: 'Press here to open drawer',
child: IconButton(
onPressed: () {
_scaffoldKey.currentState!.openDrawer();
},
icon: Icon(
Icons.menu,
color: Theme.of(context).primaryColor,
),
),
),
Затем мы применяем Вторую витрину к заголовку панели приложений.
title: Showcase(
key: _second,
description: 'Subscribe for more videos',
child: const Text(
'Flutter Junction',
style: TextStyle(color: Colors.blue),
)),
Точно так же третья витрина находится на виджете действий.
actions: [
Showcase(
key: _third,
description: 'Press to view Profile',
child: Container(
padding: const EdgeInsets.all(5),
width: 45,
height: 45,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).primaryColor,
),
child: Image.asset('assets/flutterjunction.png'),
),
)
],
В-четвертых, витрина будет на кузове.
Showcase(
key: _fourth,
description:
'Flutter Junction specializes in youtubing important topics in FLutter ',
child: Image.asset(
"assets/flutterjunction.png",
height: 400,
width: 350,
)),
Наконец, на floatActionButton:
floatingActionButton: Showcase(
key: _fifth,
title: 'Favorite',
description: 'Click here to add wishlist',
targetShapeBorder: const CircleBorder(),
child: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
onPressed: () {},
child: const Icon(
Icons.favorite,
),
),
),
Заключение
В этой статье я объяснил базовую структуру Showcase во Flutter. Вы можете поиграть с кодом в соответствии с вашими потребностями и выбором. Попробуйте создать новую страницу и применить к ней Showcase. Это было небольшое введение в Showcase особенности взаимодействия с пользователем.
Я надеюсь, что этот пост в блоге предоставит вам достаточно важной и базовой информации о создании и реализации витрины в проектах флаттера. Надеюсь, вы реализуете витрину в проектах флаттера, которые появятся в будущем.
❤ ❤ Спасибо, что прочитали эту статью ❤❤
Если вам понравилась статья Хлопайте 👏 .
Кроме того, подпишитесь, чтобы быть в курсе интересных статей и проектов.
Если я что-то не так? Дай мне знать в комментариях. Я хотел бы улучшить.
Давайте подключимся
Мы можем быть друзьями. Найдите на Facebook, Linkedin, Github, Youtube, BuyMeACoffee и Instagram.
Посещение: Flatter Junction
Добавить:КупиКофе
Полный код:
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу
