🏌️♀️
【Flutter】かっこいいチュートリアル画面の作り方
チュートリアル画面とは
アプリの使い方等をユーザーへわかりやすく提示する手段の一つに利用される手法です。
私がリリースしているアプリにも一部利用していますが、この画面を追加することで「よりアプリっぽく」自身のアプリを昇華できると思います。
※こちらのアプリは下記からダウンロードできます
iOS:
Android:
パッケージ『intro_views_flutter』のインストール
チュートリアル画面を実装する為、
下記コードをVScodeのターミナルへコピペしてエンターキーを押下する
$ flutter pub add intro_views_flutter
使い方
下記コードを参考にしていただくとチュートリアルページの実装が可能となります。
App.dart
class App extends StatelessWidget {
// Making list of pages needed to pass in IntroViewsFlutter constructor.
final pages = [
PageViewModel(
pageColor: Colors.indigoAccent,
bubble: Image.asset('assets/IMG_6303.png'),
body: const Text(
'画面右下にある黄色いボタンを押すと、',
),
title: const Text(
'アプリの使い方',
),
titleTextStyle: const TextStyle(
fontFamily: 'MyFont',
color: Colors.white,
fontSize: 40,
),
bodyTextStyle: const TextStyle(
fontFamily: 'MyFont',
color: Colors.white,
fontSize: 20,
),
mainImage: Image.asset(
'assets/IMG_6303.png',
height: 300.0,
width: 300.0,
alignment: Alignment.center,
),
),
PageViewModel(
pageColor: Colors.indigoAccent,
iconImageAssetPath: 'assets/IMG_6303.png',
body: const Text(
'クイズ等のアプリで利用可能なコンテンツを表示することができます',
),
title: const Text('アプリの使い方'),
mainImage: Image.asset(
'assets/IMG_6304.png',
height: 285.0,
width: 285.0,
alignment: Alignment.center,
),
titleTextStyle: const TextStyle(
fontFamily: 'MyFont',
color: Colors.white,
fontSize: 40,
),
bodyTextStyle: const TextStyle(
fontFamily: 'MyFont',
color: Colors.white,
fontSize: 20,
),
),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'IntroViews Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Builder(
builder: (context) => IntroViewsFlutter(
pages,
showNextButton: true,
showBackButton: true,
onTapDoneButton: () {
// Use Navigator.pushReplacement if you want to dispose the latest route
// so the user will not be able to slide back to the Intro Views.
Navigator.push(
context,
MaterialPageRoute(builder: (_) => HomePage()),
);
},
pageButtonTextStyles: const TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
),
);
}
}
実機で動かしたい場合
シミュレーターや実機で動かしたい場合は下記にソースコードを載せています。
Discussion