【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part137 Material Components

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part137 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part136 Material Components

引き続き、Material Componentsについて学びます。

PopupMenuButton

PopupMenuButtonはポップアップメニューを開く三点リーダー()のボタンです。
actionsプロパティやListTile, trailingプロパティに使用できます。\

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyHomePage()));
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool dark = false;
  String dropdown1Value = "One";
  String _selectedValue = "Toolbar menu";

  void showMenuSelection(String s) {
    setState(() {
      _selectedValue = s;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: dark ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('sample'),
          actions: [
            PopupMenuButton<String>(
              onSelected: showMenuSelection,
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                const PopupMenuItem<String>(
                  value: 'Toolbar menu',
                  child: Text('Toolbar menu'),
                ),
                const PopupMenuItem<String>(
                  value: 'Right here',
                  child: Text('Right here'),
                ),
                const PopupMenuItem<String>(
                  value: 'Hooray!',
                  child: Text('Hooray?'),
                ),
              ],
            )
          ],
        ),
        body: Center(
          child: DropdownButton<String>(
            value: dropdown1Value,
            hint: const Text('Choose'),
            onChanged: (String? newValue) {
              setState(() {
                dropdown1Value = newValue!;
              });
            },
            items: get(),
          ),
        ),
      ),
    );
  }

  List<DropdownMenuItem<String>> get() {
    var items = <String>['One', 'Two', 'Free!?', 'Four'];
    var menus = items.map((String v) {
      return DropdownMenuItem<String>(
        value: v,
        child: Text(v),
      );
    });
    return menus.toList();
  }
}

最後に

本書のサンプルがまた乱暴になってきた気がします。
せめてshowMenuSelectionなど登場する関数の定義は記載してほしいものです。

今日はここまで!

参考

ポップアップメニューの表示 PopupMenuButton – 各種 Material ウィジェットの使い方 – Flutter 入門 (keicode.com)