Widgetについて学んでみる③

ShowSnackBarの表示の仕方

公式ドキュメント
https://api.flutter.dev/flutter/material/SnackBar-class.html
日本語の記事
https://flutternyumon.com/flutter-how-to-use-snackbar/

今回は短いですがでもアプリを簡単に作ってみました

main.dart

import 'package:flutter/material.dart';

// アロー関数で書いてみた!
void main() => runApp(const MyApp());

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

  static const titleName = 'SnackBar';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(titleName),
        ),
        body: const ShowSnackBar(),
      ),
    );
  }
}

class ShowSnackBar extends StatefulWidget {
  const ShowSnackBar({ Key? key }) : super(key: key);

  @override
  State<ShowSnackBar> createState() => _ShowSnackBarState();
}

class _ShowSnackBarState extends State<ShowSnackBar> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  backgroundColor: Colors.amber,
                  duration: const Duration(days: 7),
                  content: const Text('こんにちは!', style: TextStyle(color: Colors.black87, fontSize: 20, fontWeight: FontWeight.bold),),
                  action: SnackBarAction(
                    label: '閉じる',
                    onPressed: () {
                      print('閉じるラベルが押されました');
                    },
                  ),)
              );
            },
            child: const Text('アクション', style: TextStyle(fontSize: 20),))
        ],
      ),
    );
  }
}