【 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)
ディスカッション
コメント一覧
まだ、コメントがありません