Dropdown
sample.packages.flutter.lib.src.material.dropdown.1036.
This sample shows a DropdownButton
with a dropdown button text style
that is different than its menu items.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State {
List options = ['One', 'Two', 'Free', 'Four'];
String dropdownValue = 'One';
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
color: Colors.blue,
child: DropdownButton(
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
style: const TextStyle(color: Colors.blue),
selectedItemBuilder: (BuildContext context) {
return options.map((String value) {
return Text(
dropdownValue,
style: const TextStyle(color: Colors.white),
);
}).toList();
},
items: options.map>((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
),
);
}
}
SHARE: