Skip to content

F
Front-End
Unverified Commit 9489b64c authored by Taha Tesser's avatar Taha Tesser Committed by GitHub
Browse files
Options

`DropdownButton`: Update `selectedItemBuilder` example to show case item... 

`DropdownButton`: Update `selectedItemBuilder` example to show case item alignment and update DropdownButton examples (#102748)
parent cd6b2a35
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 63 deletions
examples/api/lib/material/dropdown/dropdown_button.0.dart
View file @ 9489b64c
...@@ -6,36 +6,35 @@ ...@@ -6,36 +6,35 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
void main() => runApp(const MyApp()); const List<String> list = <String>['One', 'Two', 'Three', 'Four'];
class MyApp extends StatelessWidget { void main() => runApp(const DropdownButtonApp());
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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: _title,
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text(_title)), appBar: AppBar(title: const Text('DropdownButton Sample')),
body: const Center( body: const Center(
child: MyStatefulWidget(), child: DropdownButtonExample(),
), ),
), ),
); );
} }
} }
class MyStatefulWidget extends StatefulWidget { class DropdownButtonExample extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key); const DropdownButtonExample({Key? key}) : super(key: key);
@override @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
} }
class _MyStatefulWidgetState extends State<MyStatefulWidget> { class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownValue = 'One'; String dropdownValue = list.first;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
...@@ -48,13 +47,13 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> { ...@@ -48,13 +47,13 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
height: 2, height: 2,
color: Colors.deepPurpleAccent, color: Colors.deepPurpleAccent,
), ),
onChanged: (String? newValue) { onChanged: (String? value) {
// This is called when the user selects an item.
setState(() { setState(() {
dropdownValue = newValue!; dropdownValue = value!;
}); });
}, },
items: <String>['One', 'Two', 'Free', 'Four'] items: list.map<DropdownMenuItem<String>>((String value) {
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>( return DropdownMenuItem<String>(
value: value, value: value,
child: Text(value), child: Text(value),
......
examples/api/lib/material/dropdown/dropdown_button.selected_item_builder.0.dart
View file @ 9489b64c
...@@ -6,54 +6,79 @@ ...@@ -6,54 +6,79 @@
import 'package:flutter/material.dart'; 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 { void main() => runApp(const DropdownButtonApp());
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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: _title,
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text(_title)), appBar: AppBar(title: const Text('DropdownButton Sample')),
body: const MyStatefulWidget(), body: const Center(child: DropdownButtonExample()),
), ),
); );
} }
} }
class MyStatefulWidget extends StatefulWidget { class DropdownButtonExample extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key); const DropdownButtonExample({Key? key}) : super(key: key);
@override @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
} }
class _MyStatefulWidgetState extends State<MyStatefulWidget> { class _DropdownButtonExampleState extends State<DropdownButtonExample> {
final List<String> items = <String>['1', '2', '3']; String selectedItem = cities.keys.first;
String selectedItem = '1';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return Center(
padding: const EdgeInsets.symmetric(horizontal: 12.0), child: Row(
child: DropdownButton<String>( mainAxisAlignment: MainAxisAlignment.center,
value: selectedItem, children: <Widget>[
onChanged: (String? string) => setState(() => selectedItem = string!), Text('Select a city:', style: Theme.of(context).textTheme.bodyLarge),
selectedItemBuilder: (BuildContext context) { Padding(
return items.map<Widget>((String item) { padding: const EdgeInsets.symmetric(horizontal: 8.0),
return Text(item); child: DropdownButton<String>(
}).toList(); value: selectedItem,
}, onChanged: (String? value) {
items: items.map((String item) { // This is called when the user selects an item.
return DropdownMenuItem<String>( setState(() => selectedItem = value!);
value: item, },
child: Text('Log $item'), selectedItemBuilder: (BuildContext context) {
); return cities.values.map<Widget>((String item) {
}).toList(), // 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
View file @ 9489b64c
...@@ -6,34 +6,31 @@ ...@@ -6,34 +6,31 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
void main() => runApp(const MyApp()); void main() => runApp(const DropdownButtonApp());
class MyApp extends StatelessWidget { class DropdownButtonApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key); const DropdownButtonApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: _title,
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text(_title)), appBar: AppBar(title: const Text('DropdownButton Sample')),
body: const MyStatefulWidget(), body: const DropdownButtonExample(),
), ),
); );
} }
} }
class MyStatefulWidget extends StatefulWidget { class DropdownButtonExample extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key); const DropdownButtonExample({Key? key}) : super(key: key);
@override @override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
} }
class _MyStatefulWidgetState extends State<MyStatefulWidget> { class _DropdownButtonExampleState extends State<DropdownButtonExample> {
List<String> options = <String>['One', 'Two', 'Free', 'Four']; List<String> options = <String>['One', 'Two', 'Three', 'Four'];
String dropdownValue = 'One'; String dropdownValue = 'One';
@override @override
...@@ -43,17 +40,24 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> { ...@@ -43,17 +40,24 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
color: Colors.blue, color: Colors.blue,
child: DropdownButton<String>( child: DropdownButton<String>(
value: dropdownValue, value: dropdownValue,
onChanged: (String? newValue) { onChanged: (String? value) {
// This is called when the user selects an item.
setState(() { setState(() {
dropdownValue = newValue!; dropdownValue = value!;
}); });
}, },
style: const TextStyle(color: Colors.blue), style: const TextStyle(color: Colors.blue),
selectedItemBuilder: (BuildContext context) { 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 options.map((String value) {
return Text( return Align(
dropdownValue, alignment: Alignment.centerLeft,
style: const TextStyle(color: Colors.white), child: Text(
dropdownValue,
style: const TextStyle(color: Colors.white),
),
); );
}).toList(); }).toList();
}, },
......
examples/api/test/material/dropdown/dropdown_button.0_test.dart 0 → 100644
View file @ 9489b64c
// 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 → 100644
View file @ 9489b64c
// 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 → 100644
View file @ 9489b64c
// 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));
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab