【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

    【Flutter】GoogleMapを使用したアプリの開発について P…

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

  3. flutter

    【Flutter】Flutter実装メモ  enumの拡張

  4. flutter

    【Flutter】Cloud Firestoreと連携

  5. flutter

    【Flutter】StateNotifierProviderで状態管理…

  6. flutter

    【Flutter】CustomPainterを使い、図形を描画

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys