From 9489b64cbb4d6702a1c0a9b70e86712758587e4f Mon Sep 17 00:00:00 2001 From: Taha Tesser Date: Fri, 6 May 2022 10:14:08 +0300 Subject: [PATCH] `DropdownButton`: Update `selectedItemBuilder` example to show case item alignment and update DropdownButton examples (#102748) --- .../material/dropdown/dropdown_button.0.dart | 31 ++++--- ...opdown_button.selected_item_builder.0.dart | 83 ++++++++++++------- .../dropdown/dropdown_button.style.0.dart | 40 +++++---- .../dropdown/dropdown_button.0_test.dart | 27 ++++++ ...n_button.selected_item_builder.0_test.dart | 27 ++++++ .../dropdown_button.style.0_test.dart | 28 +++++++ 6 files changed, 173 insertions(+), 63 deletions(-) create mode 100644 examples/api/test/material/dropdown/dropdown_button.0_test.dart create mode 100644 examples/api/test/material/dropdown/dropdown_button.selected_item_builder.0_test.dart create mode 100644 examples/api/test/material/dropdown/dropdown_button.style.0_test.dart diff --git a/examples/api/lib/material/dropdown/dropdown_button.0.dart b/examples/api/lib/material/dropdown/dropdown_button.0.dart index fcf87e5cbc22..7f1377678277 100644 --- a/examples/api/lib/material/dropdown/dropdown_button.0.dart +++ b/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 list = ['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 createState() => _MyStatefulWidgetState(); + State createState() => _DropdownButtonExampleState(); } -class _MyStatefulWidgetState extends State { - String dropdownValue = 'One'; +class _DropdownButtonExampleState extends State { + String dropdownValue = list.first; @override Widget build(BuildContext context) { @@ -48,13 +47,13 @@ class _MyStatefulWidgetState extends State { 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: ['One', 'Two', 'Free', 'Four'] - .map>((String value) { + items: list.map>((String value) { return DropdownMenuItem( value: value, child: Text(value), diff --git a/examples/api/lib/material/dropdown/dropdown_button.selected_item_builder.0.dart b/examples/api/lib/material/dropdown/dropdown_button.selected_item_builder.0.dart index dbffe1db7932..c99ca589070d 100644 --- a/examples/api/lib/material/dropdown/dropdown_button.selected_item_builder.0.dart +++ b/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 cities = { + '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 createState() => _MyStatefulWidgetState(); + State createState() => _DropdownButtonExampleState(); } -class _MyStatefulWidgetState extends State { - final List items = ['1', '2', '3']; - String selectedItem = '1'; +class _DropdownButtonExampleState extends State { + String selectedItem = cities.keys.first; @override Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 12.0), - child: DropdownButton( - value: selectedItem, - onChanged: (String? string) => setState(() => selectedItem = string!), - selectedItemBuilder: (BuildContext context) { - return items.map((String item) { - return Text(item); - }).toList(); - }, - items: items.map((String item) { - return DropdownMenuItem( - value: item, - child: Text('Log $item'), - ); - }).toList(), + return Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text('Select a city:', style: Theme.of(context).textTheme.bodyLarge), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8.0), + child: DropdownButton( + value: selectedItem, + onChanged: (String? value) { + // This is called when the user selects an item. + setState(() => selectedItem = value!); + }, + selectedItemBuilder: (BuildContext context) { + return cities.values.map((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>((String item) { + return DropdownMenuItem( + value: item, + child: Text(item), + ); + }).toList(), + ), + ), + ], ), ); } diff --git a/examples/api/lib/material/dropdown/dropdown_button.style.0.dart b/examples/api/lib/material/dropdown/dropdown_button.style.0.dart index a54469528789..55d1a9887bea 100644 --- a/examples/api/lib/material/dropdown/dropdown_button.style.0.dart +++ b/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 createState() => _MyStatefulWidgetState(); + State createState() => _DropdownButtonExampleState(); } -class _MyStatefulWidgetState extends State { - List options = ['One', 'Two', 'Free', 'Four']; +class _DropdownButtonExampleState extends State { + List options = ['One', 'Two', 'Three', 'Four']; String dropdownValue = 'One'; @override @@ -43,17 +40,24 @@ class _MyStatefulWidgetState extends State { color: Colors.blue, child: DropdownButton( 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(); }, diff --git a/examples/api/test/material/dropdown/dropdown_button.0_test.dart b/examples/api/test/material/dropdown/dropdown_button.0_test.dart new file mode 100644 index 000000000000..9ceca884dbef --- /dev/null +++ b/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); + }); +} diff --git a/examples/api/test/material/dropdown/dropdown_button.selected_item_builder.0_test.dart b/examples/api/test/material/dropdown/dropdown_button.selected_item_builder.0_test.dart new file mode 100644 index 000000000000..b046d848727f --- /dev/null +++ b/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); + }); +} diff --git a/examples/api/test/material/dropdown/dropdown_button.style.0_test.dart b/examples/api/test/material/dropdown/dropdown_button.style.0_test.dart new file mode 100644 index 000000000000..a7b813549caf --- /dev/null +++ b/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)); + }); +}