Zenn
🥰

アニメーションにて自動で画面遷移を行う方法

2023/09/05に公開
Flutter
#
animation
tech

はじめに

添付動画であるようなアニメーションを使用して自動で画面の遷移をすることができたので紹介したいと思います。

実装方法

アプリを起動したときに表示される画面を作成

まずはアプリを起動したときに表示される画面を作成します。

launch_the_app_page.dart
class LaunchTheAppPage extends StatefulWidget {
  const LaunchTheAppPage({Key? key}) : super(key: key);

  @override
  State<LaunchTheAppPage> createState() => LaunchTheAppPageState();
}

class LaunchTheAppPageState extends State<LaunchTheAppPage> {

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
            const Text(
              'アプリ起動画面です',
              style: TextStyle(
	      fontWeight: FontWeight.bold, 
	      color: Colors.grey, fontSize: 20),
            )
          ],
        ),
      ),
    );
  }
}

画面遷移した後のページを作成する

次にアプリ起動画面から画面遷移した後に表示される画面を作成します。

Top_page.dart
class TopPage extends StatelessWidget {
  const TopPage({super.key});
  
  @override
   Widget build(BuildContext context) {
    return Scaffold(
     body: Center(
      Text('TOPPage')
     ),
    );
   }
}

アニメーションを使用して画面遷移を行う

ここからが今回の本題です。
アニメーションを使用して画面遷移を行う際にはTimerを使用して、何秒後に画面を遷移するとする必要があります。

  1. Timerをインポートして変数を定義する
    Timerはdart:asyncに含まれるので、これをインポートします。
    次にTimer型を使用してtimer変数を宣言します。
launch_the_app_page.dart
+ import 'dart:async';

  class LaunchTheAppPageState extends State<LaunchTheAppPage> {
+ Timer? timer:
}
  1. initState()メソッドの中でTimerを定義する
    initaStateの中で定義することでインスタンス作成を初期化時に設定することができます。
    これにより、アプリ起動画面から画面遷移する動作をスムーズに自動遷移することができます。
launch_the_app_page.dart
  class LaunchTheAppPageState extends State<LaunchTheAppPage> {
  Timer? timer:
  
  //
+ @override
+ void initState() {
+  super.initState();
+  timer = Timer()
}

またinitStateの中で定義するものとしては、

  • Durationウィジェットを用いて、間隔を何秒（今回は2秒）開けるかを設定
  • Navigator.push()を用いて、画面遷移を行う

以下がこれらの定義を追加したコードとなります。

launch_the_app_page.dart

 void initState() {
  super.initState();
  timer = Timer(
+  const Duration(seconds: 2),
+  () {
+   Navigator.push(
+    context,
+    MaterialPageRoute(
+     builder: (context) => const HomePage();
+    ),
+   );
+  },
);
}
  1. disposeメソッドとcancelメソッドを追加する
    アニメーションのタイマーが終了した後は、タイマーを破棄する必要があるためdisposeメソッドを追加します。（リソースの解放のため）
    またdisposeによりタイマーが破棄されたりdeactive(日活性状態)になった時は、cancelメソッドを必要とします。
    そのため、cancelメソッドも追加します。
    これによりTimerのコールバック関数をやめさせることができます。
launch_the_app_page.dart
//initStateの下に追加
 + @override
 + void dispose() {
 +   timer?.cancel();
 +   super.dispose();
 + }

最後に

アプリでよくある自動画面遷移についてご紹介しました。
このアニメーションを使用してアプリを作るだけでも、グッとリッチなアプリらしくなるかなと思いますので、ぜひ試してみてください。
最後までこの記事を見ていただきありがとうございました😊
もしこの記事が良かったなと思った方は♡マークを押していただけると、今後の活力となりますのでよろしくお願いいたします。😆

Discussion