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

flutter

1. 概要

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

今回は下記ついてです。

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

トーストの概要  |  Android デベロッパー  |  Android Developers

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

2. プロジェクトの準備

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

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側のメソッドを呼び出す。

  • 「MethodChannel」
    • samples.flutter.dev/message
    • Native側との通路
  • 「showToast」
    • Native側に用意されているメソッド名

5. 結果

5-1. Toast / SnackBar

6. 参考

関連記事

  1. flutter

    インターフェース定義からDart-Flutterクライアントコードを自…

  2. flutter

    【Flutter】Demoプロジェクトの値の状態を管理(Flutter…

  3. flutter

    【Flutter】APIからデータを取得し画面に表示(Flutter,…

  4. 【Widget of the Week】#9 PageView

  5. flutter

    【Flutter】KotlinでNative側のCounterを実装し…

  6. 【Widget of the Week】#4 AnimatedCont…

最近の記事

  1. flutter
  2. flutter
  3. flutter
  4. flutter
  5. flutter
  6. flutter
  7. BBQ
  8. flutter

制作実績一覧

  1. Checkeys