老鐵記得 轉(zhuǎn)發(fā) 痛倚，貓哥會呈現(xiàn)更多 Flutter 好文~~~~
微信群 ducafecat
b 站 https://space.bilibili.com/404904528
原文
https://medium.com/flutterdevs/explore-onboarding-overlay-in-flutter-5ed882e123ac
參考
正文
Flutter 是一個開源的用戶界面軟件開發(fā)軟件開發(fā)工具包诱咏。Flutter 是一個開源項目，由 Google 負(fù)責(zé)維護(hù)爽彤。目前撬讽，在 2021 年 3 月尚猿。谷歌已經(jīng)發(fā)布了另一個新版本的 Flutter 2。作為一個軟件開發(fā)工具包應(yīng)用程序的 Flutter 是很好的从绘，但是當(dāng)構(gòu)建一個大的應(yīng)用程序時，在代碼中會有一些問題或者 bug 需要調(diào)試是牢。
Flutter 提供了多種調(diào)試工具僵井，如時間軸檢查器、內(nèi)存和性能檢查器等驳棱。這些工具簡化了開發(fā)者的調(diào)試過程批什，下面列出了調(diào)試 Flutter 應(yīng)用程序的不同工具。
你好朋友社搅，我將談?wù)撐业男虏┛蜕咸剿魃习鍝涓采w驻债。我們還將實現(xiàn)一個探索 Onboarding 覆蓋小部件演示，并使用它們在您的 Flutter 應(yīng)用程序形葬。那么讓我們開始吧合呐。
Flutter
Flutter 是谷歌的用戶界面工具包，它可以幫助你在創(chuàng)紀(jì)錄的時間內(nèi)用一個代碼庫為移動笙以、網(wǎng)絡(luò)和桌面構(gòu)建漂亮的本地組合應(yīng)用程序淌实。這意味著你可以使用一種編程語言和一個代碼庫來創(chuàng)建兩個不同的應(yīng)用程序(iOS 和 Android)。
Onboarding Overlay
按照自定義的設(shè)計指南，Onboarding Overlay Package 動畫包實現(xiàn)了 Onboarding 覆蓋拆祈，在這里恨闪，我們可以使用任何 Onboarding 覆蓋中的小部件，我們使用它向用戶介紹一個他們不知道的功能放坏。Onboarding overlay 是一個靈活的 Onboarding 小部件凛剥，可以通過任意數(shù)量的步驟和任意起始點啟動和停止。
https://pub.flutter-io.cn/packages/onboarding_overlay
Implementation
你需要分別在你的代碼中實現(xiàn)它:
- 第一步: 添加依賴項轻姿。
將依賴項添加到 pubspec.yaml 文件犁珠。
dependencies:
onboarding_overlay: ^2.1.0
- 步驟 2: 導(dǎo)入包:
import 'package:onboarding_overlay/onboarding_overlay.dart';
- 第三步: 在應(yīng)用程序的根目錄中運行 flutter 軟件包。
Implementation
在 libfolder 中創(chuàng)建一個名為 onboarding_overlay_demo.dart 的新 dart 文件互亮。
首先犁享，我們必須定義 GlobalKey 和它的內(nèi)部，它的名字是 onBoardingKey 和 scaffoldKey豹休。
final GlobalKey<OnboardingState> onboardingKey = GlobalKey<OnboardingState>();
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
現(xiàn)在我們將使用 Onboarding Widget炊昆，其中我們將使用 Steps 屬性，其中我們已經(jīng)使用了一些不同類型的屬性威根，如標(biāo)題凤巨，titleTextColor，labelBoxPadding洛搀，labelBoxDecoration敢茁，bodyText 等，我們已經(jīng)使用了下面的代碼留美，可以在參考的幫助下理解彰檬。
OnboardingStep(
focusNode: focusNodes[0],
title: 'Tap anywhere to continue Tap anywhere to continue',
titleTextColor: Colors.black,
bodyText: 'Tap anywhere to continue Tap anywhere to continue',
labelBoxPadding: const EdgeInsets.all(16.0),
labelBoxDecoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
color: const Color(0xFF00E1FF),
border: Border.all(
color: const Color(0xFF1E05FB),
width: 1.0,
style: BorderStyle.solid,
)),
arrowPosition: ArrowPosition.bottomCenter,
hasArrow: true,
hasLabelBox: true,
fullscreen: true,
),
Code File
import 'package:flutter/material.dart';
import 'package:onboarding_overlay/onboarding_overlay.dart';class OnBoardingOverlayDemo extends StatefulWidget {
const OnBoardingOverlayDemo({
Key? key,
required this.focusNodes,
}) : super(key: key);
final List<FocusNode> focusNodes;
@override
_OnBoardingOverlayDemoState createState() => _OnBoardingOverlayDemoState();
}
class _OnBoardingOverlayDemoState extends State<OnBoardingOverlayDemo> {
late int _counter;
@override
void initState() {
super.initState();
_counter = 0;
}
@override
void dispose() {
super.dispose();
}
void _increment(BuildContext context) {
setState(() {
_counter++;
Onboarding.of(context)!.show();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
focusNode: widget.focusNodes[4],
icon: const Icon(Icons.menu),
onPressed: () {},
),
title: Focus(
focusNode: widget.focusNodes[3],
child: const Text('Title'),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Focus(
focusNode: widget.focusNodes[0],
child: const Text('You have pushed the button this many times:'),
),
Focus(
focusNode: widget.focusNodes[2],
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
focusNode: widget.focusNodes[1],
onPressed: () {
_increment(context);
},
child: const Icon(Icons.add),
),
);
}
}
Conclusion
在這篇文章中，我已經(jīng)解釋了在 Flutter 探索在板上覆蓋谎砾，你可以根據(jù)自己的修改和實驗逢倍，這個小介紹是從我們這邊的 Flutter 探索在板上覆蓋演示。
? 貓哥
往期
開源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新聞客戶端
https://github.com/ducafecat/flutter_learn_news
strapi 手冊譯文
微信討論群 ducafecat
系列集合
譯文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
開源項目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 編程語言基礎(chǔ)
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基礎(chǔ)入門
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 實戰(zhàn)從零開始 新聞客戶端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 組件開發(fā)
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
