Skip to content

Commit

Permalink
[flutter_web] InputChip
Browse files Browse the repository at this point in the history
  • Loading branch information
chen56 committed Jun 13, 2024
1 parent 29aabab commit 973e315
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 75 deletions.
2 changes: 2 additions & 0 deletions notes/flutter_web/lib/assets.g.dart
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,12 @@ mixin AssetsMixin {
final Asset lib_routes_notes_cheatsheets_widgets__examples_LayoutCore_ContainerCell_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/LayoutCore_ContainerCell.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_AppBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_AppBar.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_SearchAnchor_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_SearchAnchor.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_FilterChip_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_FilterChip.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_FloatingActionButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_FloatingActionButton.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_CheckboxListTile_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_CheckboxListTile.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_NavigationBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_NavigationBar.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Spacer_Spacer_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Spacer_Spacer.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_InputChip_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_InputChip.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_NavigationRail_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_NavigationRail.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_SegmentButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_SegmentButton.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_IconButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_IconButton.dart');
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
import 'package:you_flutter/state.dart';

main() {
runApp(MaterialApp(home: Scaffold(body: Form_FilterChip())));
}

// ignore: camel_case_types
class Form_FilterChip extends StatelessWidget {
Form_FilterChip({super.key});

final Set<String> selected = <String>{}.signal();

@override
Widget build(BuildContext context) {
return Watch(
builder: (context) {
return Column(
children: <Widget>[
Wrap(
children: [
for (var t in TargetPlatform.values)
FilterChip(
label: Text(t.name),
selected: selected.contains(t.name),
onSelected: (bool value) {
if (value) {
selected.add(t.name);
} else {
selected.remove(t.name);
}
},
)
],
),
FilledButton(onPressed: () => selected.clear(), child: const Text("Reset")),
],
);
},
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import 'package:flutter/material.dart';
import 'package:you_flutter/state.dart';

main() {
runApp(MaterialApp(home: Scaffold(body: Form_InputChip())));
}

// ignore: camel_case_types
class Form_InputChip extends StatefulWidget {
Form_InputChip({super.key});

@override
State<StatefulWidget> createState() {
return _State();
}
}

class _State extends State<Form_InputChip> {
final TextEditingController controller = TextEditingController();
final List<String> tags = <String>[].signal();

@override
void dispose() {
controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Watch(
watchListenable: controller,
builder: (context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: controller,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.add),
hintText: 'Write a tag, enter to add',
),
onSubmitted: (_) {
if (controller.text.isNotEmpty) {
if (!tags.contains(controller.text)) {
tags.add(controller.text);
}
controller.clear(); // 清空TextField
}
},
),
Wrap(
spacing: 8.0,
children: tags.map((tag) {
return InputChip(
avatar: const Icon(Icons.tag),
label: Text(tag),
onDeleted: () => tags.remove(tag),
deleteIcon: const Icon(Icons.cancel),
);
}).toList(),
)
],
);
},
);
}
}
79 changes: 4 additions & 75 deletions notes/flutter_web/lib/routes/notes/cheatsheets/widgets/page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_Chec
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_CheckboxListTile.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_Chip.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_ChoiceChip.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_FilterChip.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_FloatingActionButton.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_IconButton.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_InputChip.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_SearchAnchor.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_SegmentButton.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/LayoutCore_ContainerCell.dart';
Expand Down Expand Up @@ -65,8 +67,8 @@ void build(BuildContext context, Cell print) {
FlutterExample(title: "Chip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_Chip_dart, child: Form_Chip()),
FlutterExample(title: "ActionChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_ActionChip_dart, child: Form_ActionChip()),
FlutterExample(title: "ChoiceChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_ChoiceChip_dart, child: Form_ChoiceChip()),
FlutterExample(title: "FilterChip", child: buttonAndInput.filterChip()),
FlutterExample(title: "InputChip", child: buttonAndInput.inputChip()),
FlutterExample(title: "FilterChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_FilterChip_dart, child: Form_FilterChip()),
FlutterExample(title: "InputChip", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_InputChip_dart, child: Form_InputChip()),
FlutterExample(title: "datePicker", child: buttonAndInput.datePicker()),
FlutterExample(title: "dateRangePicker", child: buttonAndInput.dateRangePicker()),
FlutterExample(title: "timePicker", child: buttonAndInput.timePicker()),
Expand Down Expand Up @@ -98,80 +100,7 @@ void build(BuildContext context, Cell print) {

class ButtonAndInput {

Widget filterChip() {
final Set<String> selected = <String>{}.signal();
return Watch(
builder: (context) {
return Column(
children: <Widget>[
Wrap(
children: [
for (var t in TargetPlatform.values)
FilterChip(
label: Text(t.name),
selected: selected.contains(t.name),
onSelected: (bool value) {
if (value) {
selected.add(t.name);
} else {
selected.remove(t.name);
}
},
)
],
),
FilledButton(onPressed: () => selected.clear(), child: const Text("Reset")),
],
);
},
);
}


Widget inputChip() {
final TextEditingController controller = TextEditingController();
final List<String> tags = <String>[].signal();

return Watch(
watchListenable: controller,
onDispose: () {
controller.dispose();
},
builder: (context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: controller,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.add),
hintText: 'Write a tag, enter to add',
),
onSubmitted: (_) {
if (controller.text.isNotEmpty) {
if (!tags.contains(controller.text)) {
tags.add(controller.text);
}
controller.clear(); // 清空TextField
}
},
),
Wrap(
spacing: 8.0,
children: tags.map((tag) {
return InputChip(
avatar: const Icon(Icons.tag),
label: Text(tag),
onDeleted: () => tags.remove(tag),
deleteIcon: const Icon(Icons.cancel),
);
}).toList(),
)
],
);
},
);
}

Widget datePicker() {
final Value<DateTime?> date = (null as DateTime?).signal();
Expand Down

0 comments on commit 973e315

Please sign in to comment.