introduction_screenを使って今あるFlutterアプリをリッチにしよう!

image

Version

  • Flutter 2.10.1
  • Dart 2.16.1
  • introduction_screen: ^3.0.0

introduction_screenとは

introduction_screenとは、Flutterのアプリ内でアプリの特徴や使い方などをユーザーに説明するページを作成したい時に使います。introduction_screenを使用することで、簡単にリッチなアプリの説明ページを作成することができるため、ユーザーにとっても開発者にとっても強力な味方になってくれるライブラリーです。

今回の記事では、introduction_screenを使って以下のような成果物を作っていきます。

introduction_screenの例

1.パッケージのインストール

まずはアプリにintroduction_screenのパッケージをインストールをします。パッケージのインストール先はpubspec.yamlファイルです。 introduction_screenのパッケージはこちらになります。

pubspec.yamlファイルのdependenciesに以下のように記述します。

pubspec.yamlファイルは非常にデリケートなので記述する箇所のindent等には注意が必要です。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
    
introduction_screen: ^3.0.0

dependenciesの箇所に上記のように記述したら、画面上のpub getボタン、もしくはターミナルでflutter pub getを入力して実行します。

メッセージやターミナルでエラーが吐かれなければ、アプリにintroduction_screenのインストールが完了したことになります。

更に今回紹介する成果物では、アプリ内に保存した画像を使用するので、pubspec.yamlファイルにその準備もしていきます!

※アプリ紹介ページで表示する画像をWebの画像にする場合は、2.の行程へ。

pubspec.yamlファイルのflutterの部分(一番下)に以下を追加します。

flutter:
  uses-material-design: true

assets:
- assets/images/ #(/で終わっているのは、assetsフォルダー内のimagesフォルダーの中にある画像は全て使えると言う意味)

今回は、libファイルと同じ階層の部分にassetsファイルを追加するため上記のようにしています。

次は、assetsファイルを追加していきます。

libファイルと同じ階層の部分にassets/images/3枚の画像を追加します。以下の画像が例です。

ファイル構造

2.コード全文

今回のコード全文はこちらになります。コピペで動きますが、introduction_page.dartファイル内のimage:のところは各自が設定した画像を指定してください。

main.dartファイル

import 'package:flutter/material.dart';
import 'package:introduction/introduction_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'IntroductionScreen',
      //画面右上の赤いバーナーを消す
      debugShowCheckedModeBanner: false,
      home: IntroductionPageExample(),
    );
  }
}

class IntroductionPageExample extends StatelessWidget {
  const IntroductionPageExample({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('アプリの紹介ページ'),
        centerTitle: true,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const IntroductionPage(),
              ),
            );
          },
          child: const Text('アプリの使い方を紹介するページを開く'),
        ),
      ),
    );
  }
}

introduction_page.dartファイル

import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';

class IntroductionPage extends StatelessWidget {
  const IntroductionPage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        // ここでIntroductionScreenのライブラリーを呼び出している
        child: IntroductionScreen(
          scrollPhysics: const BouncingScrollPhysics(),
          pages: [
            PageViewModel(
              // \nは改行を意味しているよ!
              title: 'アプリ紹介のページへ\nようこそ!',
              body: '1ページ目だよ!',
              image: Image.asset('assets/images/first.png'),
            ),
            PageViewModel(
              title: 'アプリの使い方を説明すると\nユーザーにとって親切だよ!',
              body:
                  '2ページ目だよ!',
              image: Image.asset('assets/images/second.png'),
            ),
            PageViewModel(
              title: '紹介ページを設けることで\n簡単にアプリをリッチにできるよ!',
              body: '3ページ目だよ!',
              image: Image.asset('assets/images/third.png'),
            ),
          ],
          onDone: () async => Navigator.pop(context),
          showBackButton: true,
          next: const Icon(Icons.arrow_forward_ios),
          back: const Icon(Icons.arrow_back_ios),
          done: const Text(
            'OK!',
            style: TextStyle(fontWeight: FontWeight.w600),
          ),
          dotsDecorator: DotsDecorator(
            size: const Size.square(10.0),
            // ここの大きさを変更することで
            // 現在の位置を表しているマーカーのUIが変更するよ!
            activeSize: const Size(20.0, 10.0),
            activeColor: Colors.blue,
            color: Colors.black26,
            spacing: const EdgeInsets.symmetric(horizontal: 3.0),
            activeShape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(25.0),
            ),
          ),
        ),
      ),
    );
  }
}

introduction_screenの実装(introduction_page.dartファイルの一部を説明)

.......
        child: IntroductionScreen(
onDone: () async => Navigator.pop(context),
showBackButton: true,
next: const Icon(Icons.arrow_forward_ios),
back: const Icon(Icons.arrow_back_ios),
done: const Text(
'OK!', style: TextStyle(fontWeight: FontWeight.w600), ),
dotsDecorator: DotsDecorator(
size: const Size.square(10.0), // ここの大きさを変更することで // 現在の位置を表しているマーカーのUIが変更するよ! activeSize: const Size(10.0, 10.0), activeColor: Colors.blue, color: Colors.black26, spacing: const EdgeInsets.symmetric(horizontal: 3.0), activeShape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(25.0), ), ), ), .......

onDone:の部分では、用意された紹介ページの最後のページ行った際に、行う処理を記述します。

next,back,doneの部分は、紹介ページに表示されるアイコンやtextを指定することができます。 今回は、最後のページに行った際にOKボタンを表示させるようにしました。

dotsDecorator:は、全紹介ページ中の何ページ目に自分がいるのかを表示する部分のデザインを扱う部分です。 この部分を変更することで、面白い挙動にすることができたりします。

(例:ページを移る時に、スライムが動くような挙動になる(個人の感想です...))

 activeSize: const Size(20.0, 10.0),

最後に

いかがでしたでしょうか。意外と簡単に紹介ページを表示することができたのではないかと思います。

introduction_screenを使うことによって、アプリの利用者に対して、アプリの特徴や使い方をオシャレに説明することができます。

簡単な実装で、アプリをリッチにできるintroduction_screenを是非一度、ご自身のFlutterアプリに取り入れてみてはいかがでしょうか?

参考

https://qiita.com/Anharu/items/4970100e4876b1f46183 https://pub.dev/packages/introduction_screen/example

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (109)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (12)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)デザイン (5)新卒 (4)就活 (4)vscode (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More