【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part136 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part136 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part135 Material Components
引き続き、Material Componentsについて学びます。
DropdownButton
DropdownButtonは押下すると選択肢が表示されるボタンです。
DropdownListというのはよく聞くのですがボタンですか😎
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";
@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'),
// SliverAppBarにも同じプロパティがあります。
// flexibleSpace: ,
),
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();
}
}
ボタンをタップするとリストが表示されます。
とても新鮮な感じがしますね。
最後に
ネストしすぎてよくわからなくなり手間取りました😆
今日はここまで！