DropdownButton: Update selectedItemBuilder example to show case i…

…tem alignment and update DropdownButton examples (#102748)

examples/api/lib/material/dropdown/dropdown_button.0.dart

@@ -6,36 +6,35 @@
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
+const List<String> list = <String>['One', 'Two', 'Three', 'Four'];
 
-class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
+void main() => runApp(const DropdownButtonApp());
 
-  static const String _title = 'Flutter Code Sample';
+class DropdownButtonApp extends StatelessWidget {
+  const DropdownButtonApp({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: _title,
       home: Scaffold(
-        appBar: AppBar(title: const Text(_title)),
+        appBar: AppBar(title: const Text('DropdownButton Sample')),
         body: const Center(
-          child: MyStatefulWidget(),
+          child: DropdownButtonExample(),
         ),
       ),
     );
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({Key? key}) : super(key: key);
+class DropdownButtonExample extends StatefulWidget {
+  const DropdownButtonExample({Key? key}) : super(key: key);
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
 }
 
-class _MyStatefulWidgetState extends State<MyStatefulWidget> {
-  String dropdownValue = 'One';
+class _DropdownButtonExampleState extends State<DropdownButtonExample> {
+  String dropdownValue = list.first;
 
   @override
   Widget build(BuildContext context) {
@@ -48,13 +47,13 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
         height: 2,
         color: Colors.deepPurpleAccent,
       ),
-      onChanged: (String? newValue) {
+      onChanged: (String? value) {
+        // This is called when the user selects an item.
         setState(() {
-          dropdownValue = newValue!;
+          dropdownValue = value!;
         });
       },
-      items: <String>['One', 'Two', 'Free', 'Four']
-          .map<DropdownMenuItem<String>>((String value) {
+      items: list.map<DropdownMenuItem<String>>((String value) {
         return DropdownMenuItem<String>(
           value: value,
           child: Text(value),

examples/api/lib/material/dropdown/dropdown_button.selected_item_builder.0.dart

@@ -6,54 +6,79 @@
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
+Map<String, String> cities = <String, String>{
+  'New York': 'NYC',
+  'Los Angeles': 'LA',
+  'San Francisco': 'SF',
+  'Chicago': 'CH',
+  'Miami': 'MI',
+};
 
-class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
+void main() => runApp(const DropdownButtonApp());
 
-  static const String _title = 'Flutter Code Sample';
+class DropdownButtonApp extends StatelessWidget {
+  const DropdownButtonApp({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: _title,
       home: Scaffold(
-        appBar: AppBar(title: const Text(_title)),
-        body: const MyStatefulWidget(),
+        appBar: AppBar(title: const Text('DropdownButton Sample')),
+        body: const Center(child: DropdownButtonExample()),
       ),
     );
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({Key? key}) : super(key: key);
+class DropdownButtonExample extends StatefulWidget {
+  const DropdownButtonExample({Key? key}) : super(key: key);
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
 }
 
-class _MyStatefulWidgetState extends State<MyStatefulWidget> {
-  final List<String> items = <String>['1', '2', '3'];
-  String selectedItem = '1';
+class _DropdownButtonExampleState extends State<DropdownButtonExample> {
+  String selectedItem = cities.keys.first;
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 12.0),
-      child: DropdownButton<String>(
-        value: selectedItem,
-        onChanged: (String? string) => setState(() => selectedItem = string!),
-        selectedItemBuilder: (BuildContext context) {
-          return items.map<Widget>((String item) {
-            return Text(item);
-          }).toList();
-        },
-        items: items.map((String item) {
-          return DropdownMenuItem<String>(
-            value: item,
-            child: Text('Log $item'),
-          );
-        }).toList(),
+    return Center(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Text('Select a city:', style: Theme.of(context).textTheme.bodyLarge),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: DropdownButton<String>(
+              value: selectedItem,
+              onChanged: (String? value) {
+                // This is called when the user selects an item.
+                setState(() => selectedItem = value!);
+              },
+              selectedItemBuilder: (BuildContext context) {
+                return cities.values.map<Widget>((String item) {
+                  // This is the widget that will be shown when you select an item.
+                  // Here custom text style, alignment and layout size can be applied
+                  // to selected item string.
+                  return Container(
+                    alignment:Alignment.centerLeft,
+                    constraints: const BoxConstraints(minWidth: 100),
+                    child: Text(
+                      item,
+                      style: const TextStyle(color: Colors.blue, fontWeight: FontWeight.w600),
+                    ),
+                  );
+                }).toList();
+              },
+              items: cities.keys.map<DropdownMenuItem<String>>((String item) {
+                return DropdownMenuItem<String>(
+                  value: item,
+                  child: Text(item),
+                );
+              }).toList(),
+            ),
+          ),
+        ],
       ),
     );
   }

examples/api/lib/material/dropdown/dropdown_button.style.0.dart

@@ -6,34 +6,31 @@
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
+void main() => runApp(const DropdownButtonApp());
 
-class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
-
-  static const String _title = 'Flutter Code Sample';
+class DropdownButtonApp extends StatelessWidget {
+  const DropdownButtonApp({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: _title,
       home: Scaffold(
-        appBar: AppBar(title: const Text(_title)),
-        body: const MyStatefulWidget(),
+        appBar: AppBar(title: const Text('DropdownButton Sample')),
+        body: const DropdownButtonExample(),
       ),
     );
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({Key? key}) : super(key: key);
+class DropdownButtonExample extends StatefulWidget {
+  const DropdownButtonExample({Key? key}) : super(key: key);
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
 }
 
-class _MyStatefulWidgetState extends State<MyStatefulWidget> {
-  List<String> options = <String>['One', 'Two', 'Free', 'Four'];
+class _DropdownButtonExampleState extends State<DropdownButtonExample> {
+  List<String> options = <String>['One', 'Two', 'Three', 'Four'];
   String dropdownValue = 'One';
 
   @override
@@ -43,17 +40,24 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
       color: Colors.blue,
       child: DropdownButton<String>(
         value: dropdownValue,
-        onChanged: (String? newValue) {
+        onChanged: (String? value) {
+          // This is called when the user selects an item.
           setState(() {
-            dropdownValue = newValue!;
+            dropdownValue = value!;
           });
         },
         style: const TextStyle(color: Colors.blue),
         selectedItemBuilder: (BuildContext context) {
+          // This is the widget that will be shown when you select an item.
+          // Here custom text style, alignment and layout size can be applied
+          // to selected item string.
           return options.map((String value) {
-            return Text(
-              dropdownValue,
-              style: const TextStyle(color: Colors.white),
+            return Align(
+              alignment: Alignment.centerLeft,
+              child: Text(
+                dropdownValue,
+                style: const TextStyle(color: Colors.white),
+              ),
             );
           }).toList();
         },

examples/api/test/material/dropdown/dropdown_button.0_test.dart

@@ -0,0 +1,27 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/dropdown/dropdown_button.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Select an item from DropdownButton', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: example.DropdownButtonApp(),
+        ),
+      ),
+    );
+
+    expect(find.text('One'), findsOneWidget);
+
+    await tester.tap(find.text('One'));
+    await tester.pumpAndSettle();
+    await tester.tap(find.text('Two').last);
+    await tester.pumpAndSettle();
+    expect(find.text('Two'), findsOneWidget);
+  });
+}

examples/api/test/material/dropdown/dropdown_button.selected_item_builder.0_test.dart

@@ -0,0 +1,27 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/dropdown/dropdown_button.selected_item_builder.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Select an item from DropdownButton', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: example.DropdownButtonApp(),
+        ),
+      ),
+    );
+
+    expect(find.text('NYC'), findsOneWidget);
+
+    await tester.tap(find.text('NYC'));
+    await tester.pumpAndSettle();
+    await tester.tap(find.text('San Francisco').last);
+    await tester.pumpAndSettle();
+    expect(find.text('SF'), findsOneWidget);
+  });
+}

examples/api/test/material/dropdown/dropdown_button.style.0_test.dart

@@ -0,0 +1,28 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/dropdown/dropdown_button.style.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Select an item from DropdownButton', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: example.DropdownButtonApp(),
+        ),
+      ),
+    );
+
+    expect(find.text('One'), findsNWidgets(4));
+
+    await tester.tap(find.text('One').first);
+    await tester.pumpAndSettle();
+    expect(find.text('Two'), findsOneWidget);
+    await tester.tap(find.text('Two'));
+    await tester.pumpAndSettle();
+    expect(find.text('Two'), findsNWidgets(4));
+  });
+}