🏌️‍♀️

【Flutter】かっこいいチュートリアル画面の作り方

2023/06/06に公開

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,
          ),
        ),
      ),
    );
  }
}

実機で動かしたい場合

シミュレーターや実機で動かしたい場合は下記にソースコードを載せています。

チュートリアル画面とは

パッケージ『intro_views_flutter』のインストール

使い方

実機で動かしたい場合

Discussion