FlutterShow⚡の紹介
Flutterは有名なクロスプラットフォームのアプリのフレームワークです。
近年大きいコミュニティが作られて、たくさんのイベントで熱心な人々はFlutterについてスピーチをします。さて、ちょっと想像してみてください!もしFlutterでプレゼンの開発が出来たら、どうでしょうか。
このアイデアはどう考えましたか: 今年Fluttercon2023で僕の最初のスピーチがあり、最高のプレゼンにするため、努力しました。プレゼンの練習中にパソコン上のwindowを変えるのは煩わしいだと思いました。他の理由はプレゼン中でプレゼンのための機能を見えることが出来るのはかっこいいと思いました。そして僕のプレゼンはFlutterで作りましたので、MacBookのAPIに直接アクセスすることが出来ました。もし興味をありましたら、こちらが結果です。
他にも同じような解決方法があり、僕が最初の発案者ではありません。インターネットで他の解決方法を見つけることも出来ませんでしたので、僕自身で解決方法を開発しました。それによってFlutterShow⚡が生まれました。これは僕のプレゼンで使用したもので、他のスピーチをする人にも簡単に使用できるフレームワークです。
プレゼンを作る
- まずリポジトリをクローンまたはフォークして、この手順とおりにしてください。
- プレゼンを実行した後でそのアプリを見ることができます:
さあ、準備ができたので、最初のスライドを二つのステップで作りましょう。
- スライドの中に新しいのファイルを作って、新しいwidgetを作ってください。
class CreditsSlide extends ConsumerWidget {
const CreditsSlide({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final controller = ref.watch(presentationController);
return DecoratedBox(
decoration: BoxDecoration(
gradient: FSGradients.dynamicBackground(controller.brightness),
),
child: Stack(
children: [
KeynoteTitleAndBulletsSlideVariants.variantTwo(
titleText: 'Cedits',
subTitleText: 'Thanks to:',
bulletPoints: ['The event organizators', 'The audience', 'FlutterShow'],
),
],
),
);
}
}
2. 次にlib/presentation/config/pages_of_presentation.dartに移動して、新しく作ったcredits_slideのwidgetを使用して、新しいEnumメンバーを加えてください. Enumのメンバーの順は大切だと思い出してください。
今プレゼンをリロードした後で、結果が見えます:
それは以上です。記事を読んでいただきありがとうございます。ライクをしてください。
。。。アニメーションさせることができますか？
はい！FlutterShow⚡のwidgetはほとんど自動でアニメーシオンさせることができます。
アニメーションのAPIがあります。presentationControllerはプレゼンの状態を保存します。そのpresentationControllerはanimationIndexもあります。二つのスッテプでwidgetをアニメーションすることが出来ます。
-
lib/presentation/config/pages_of_presentation.dartを戻って、credits_slideのenumのメンバーのanimationStepsを５に変更してください。それにプレゼンは５スッテプがあることを知らせます。毎回クリックするごとにanimationIndexが上がり、widgetが見るとができます。５に変更したので、スライドにはサブタイトルと3つのbullet_pointがあります。そして、最後のクリックで次のスライドに進みます。 -
次にcredits_slideを戻って、新しいパラメータを加えしてください:
animationIndex: controller.animationIndex
class CreditsSlide extends ConsumerWidget {
const CreditsSlide({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final controller = ref.watch(presentationController);
return DecoratedBox(
decoration: BoxDecoration(
gradient: FSGradients.dynamicBackground(controller.brightness),
),
child: Stack(
children: [
KeynoteTitleAndBulletsSlideVariants.variantTwo(
// 新しいパラメータ
animationIndex: controller.animationIndex,
titleText: 'Cedits',
subTitleText: 'Thanks to:',
bulletPoints: [
'The event organizators',
'The audience',
'FlutterShow'
],
),
],
),
);
}
}
またそれは以上です😄！
アニメーションをあまり努力しないで作るのは素晴らしいですね
FlutterShow⚡がサポートしています。今、スライドの作るとアニメーションの方法
を学びました。これで、すぐに全てのプレゼンテーションを作れます。
他のアニメションをする方法を知りたいなら、このページを移動してください。
締めの言葉
FlutterShow⚡でプレゼンの作る手続きは簡単で、速いです。速さはスピーチする人によると非常に重要なので、ほとんどのスピーチの準備はぎりぎりまで行います😅。
僕の希望は、FlutterShow⚡が良いエコシステムを開発することです。FlutterShow⚡のパッケージはFlutterShow⚡の以外からもアクセスすることができます。他のプレゼンテーションフレームワークがお好みであれば、そのコンポーネントも使えます。すべてのコンポーネントについてはここで読めます。
FlutterShow⚡は僕の最初の大きなオープンソースプロジェクトです。継続的にFlutterShow⚡の開発を続けます。将来最高のフレムーワークになりたいですから、頑張ります！他のアイデアがあれば、改善をあれば、問題を開けてください
(⭐️もください)
プレゼンのためにFlutterShow⚡を使ったら、連絡してください。