【Flutter】Android画面に小さなポップアップ(Toast, SnackBar)を表示（Kotlin）

ホーム
BLOG
【Flutter】
【Flutter】Android画面に小さなポップアップ…

【Flutter】
2022.08.01

【Flutter】Android画面に小さなポップアップ(Toast, SnackBar)を表示（Kotlin）

概要
プロジェクトの準備
ソースコード(Kotlin)
ソースコード(Dart)
結果
参考

1. 概要

【Flutter】KotlinでNative側を実装しFlutterと連携

上記前回のブログではFlutterからAndroidのNativeメソッドを呼び出し、連携する事についてでした。

今回は下記ついてです。

FlutterからAndroidのNativeメソッドに引数を渡して処理
Android側のToastを使い、メッセージを表示
- トーストの概要 | Android デベロッパー | Android Developers
Flutter側のSnackBarを使い、メッセージを表示
- Display a snackbar | Flutter

アプリがフォアグラウンドにあるときは、トーストの代わりにスナックバーを使用することを検討してください。スナックバーにはユーザーが操作できるオプションがあり、アプリの利便性を高めることができます。
トーストの概要 | Android デベロッパー | Android Developers

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. プロジェクトの準備

2-1. プロジェクトを作成

こちらを参考
- https://isub.co.jp/flutter/flutter-dev-vscode-on-windows11/#create-project

3. ソースコード(Kotlin)

4-1. android/app/src/main/kotlin/com/example/batterylevel/MainActivity.kt

このファイルはFlutterプロジェクトを作成すると、自動生成されるので内容を変更

package com.example.flutter_to_native

import android.widget.Toast
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import androidx.annotation.NonNull

class MainActivity: FlutterActivity() {
  private val CHANNEL = "samples.flutter.dev/message"

  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
      // This method is invoked on the main thread.
      call, result ->
      val arguments = call.arguments as Map<String, Any?>
      val message : String = arguments["message"] as? String ?: ""
      val score : Int = arguments["score"] as? Int ?: 0
      if (call.method == "showToast") {
        showToast(message, score)
      }
    }
  }

  private fun showToast(message: String?, score: Int?) {
    val toast = Toast.makeText(this, "${message}(${score})", Toast.LENGTH_LONG)
    toast.show()
  }
}

Androidデバイスのバッテリー残量を取得し、返す。

「CHANNEL」について
- samples.flutter.dev/message
- Flutter側との通路

The client and host sides of a channel are connected through a channel name passed in the channel constructor. All channel names used in a single app must be unique; prefix the channel name with a unique ‘domain prefix’, for example: samples.flutter.dev/battery.
Writing custom platform-specific code | Flutter

「showToast」について
- Flutter側で呼び出すメソッド名

4. ソースコード(Dart)

4-1. lib/main.dart

import 'package:flutter/material.dart';

import 'views/home.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

4-2. lib/views/home.dart

import 'package:flutter/material.dart';
import '../repository/message_repository.dart';
import 'widgets/utils.dart';

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

  @override
  Widget build(BuildContext context) {
    final MessageRepository messageRepository = MessageRepository();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Toast vs SnackBar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Toast vs SnackBar'),
            ElevatedButton(
                onPressed: () => messageRepository.showToast(
                    'FlutterからAndroid側にメッセージを渡し、Toastで表示する。', 100),
                child: const Text('Show Toast')),
            ElevatedButton(
                onPressed: () => Utils.showSnackbar(context,
                    'ToastよりSnackBarが推奨されているようなので、SnackBarでも表示してみる。', 5),
                child: const Text('Show Snackbar'))
          ],
        ),
      ),
    );
  }
}

4-3. lib/views/widgets/utils.dart

import 'package:flutter/material.dart';

class Utils {
  static showSnackbar(context, message, seconds) {
    final snackBar = SnackBar(
      content: Text(message),
      duration: Duration(seconds: seconds),
      action: SnackBarAction(
        label: 'Undo',
        onPressed: () {},
      ),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }
}

4-4. lib/repository/message_repository.dart

import 'package:flutter/services.dart';

class MessageRepository {
  static const platform = MethodChannel('samples.flutter.dev/message');

  Future<void> showToast(msg, score) async {
    final Map params = <String, dynamic>{'message': msg, 'score': score};
    await platform.invokeMethod('showToast', params);
  }
}

Native側のメソッドを呼び出す。