Flutterで画面にメッセージを表示する

初めましてblueです。

現在、ITベンチャー企業でWEBキャンペーンシステムの運用並びに要件定義、ECサイトの開発を行っています。

今回はFlutterで画面にメッセージを表示する方法について記事にしてみました！

使用するメソッド

SnackBar class - material library - Dart API

実装コード

final snackBar = SnackBar(
           content: const Text('ボタンを押しました！'),
           action: SnackBarAction(
             label: 'Undo',
             onPressed: () {
             },
           ),
         );

ScaffoldMessenger.of(context).showSnackBar(snackBar);

SnackBarを定義。表示させたいメッセージを記載する。
action:SnackBarActionでスナックバーを元に戻したり出来る。

全体コード

import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

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

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: '通知',
     home: Scaffold(
       appBar: AppBar(
         title: const Text('通知'),
       ),
       body: const SnackBarPage(),
     ),
   );
 }
}

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

 @override
 Widget build(BuildContext context) {
   return Center(
     child: ElevatedButton(
       onPressed: () {
         final snackBar = SnackBar(
           content: const Text('ボタンを押しました！'),
           action: SnackBarAction(
             label: 'Undo',
             onPressed: () {
             },
           ),
         );
         ScaffoldMessenger.of(context).showSnackBar(snackBar);
       },
       child: const Text('ボタン'),
     ),
   );
 }
}

実装画面