Skip to content

Commit

Permalink
[flutter_web] Form_Checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
chen56 committed Jun 13, 2024
1 parent 5bc6a60 commit ab99429
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 72 deletions.
10 changes: 6 additions & 4 deletions notes/flutter_web/lib/assets.g.dart
Original file line number Diff line number Diff line change
Expand Up @@ -99,21 +99,23 @@ mixin AssetsMixin {
final Asset lib_routes_notes_Improve_app_event_listener_lifeycle_page_dart = Asset('lib/routes/notes/Improve_app/event&listener&lifeycle/page.dart');
final Asset lib_routes_notes_Improve_app_i18n_page_dart = Asset('lib/routes/notes/Improve_app/i18n/page.dart');
final Asset lib_routes_notes_pure_dart_exception_page_dart = Asset('lib/routes/notes/pure_dart/exception/page.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_ButtonStyleButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_ButtonStyleButton.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_BottomAppBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_BottomAppBar.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_Menu_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_Menu.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Input_FloatingActionButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Input_FloatingActionButton.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_TabBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_TabBar.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_NavigationDrawer_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_NavigationDrawer.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Spacer_Placeholder_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Spacer_Placeholder.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Input_SearchAnchor_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Input_SearchAnchor.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Form_Checkbox_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_Checkbox.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Navigation_SliverAppBar_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Navigation_SliverAppBar.dart');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Input_IconButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Input_IconButton.dart');
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_Input_ButtonStyleButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Input_ButtonStyleButton.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_FloatingActionButton_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Form_FloatingActionButton.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_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');
final Asset lib_routes_notes_cheatsheets_widgets__examples_Spacer_Divider_dart = Asset('lib/routes/notes/cheatsheets/widgets/_examples/Spacer_Divider.dart');
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
import 'package:you_flutter/state.dart';

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

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

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

class _State extends State<Form_Checkbox> {
final Value<bool?> checkbox1 = (null as bool?).signal();
final Value<bool> checkbox2 = false.signal();

@override
Widget build(BuildContext context) {
return Watch(
builder: (context) {
return Column(
children: <Widget>[
Row(
children: [
const Text('tristate: true'),
Checkbox(tristate: true, checkColor: Colors.white, value: checkbox1.value, onChanged: (value) => checkbox1.value = value),
],
),
Row(
children: [
const Text('tristate: false'),
Checkbox(tristate: false, checkColor: Colors.white, value: checkbox2.value, onChanged: (value) => checkbox2.value = value!),
],
),
],
);
},
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import 'package:flutter/material.dart';
import 'package:you_flutter/state.dart';

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

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

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

class _State extends State<Form_SegmentButton> {
final Value<ThemeMode> themeMode = ThemeMode.system.signal();
final Set<TargetPlatform> targetPlatforms = <TargetPlatform>{TargetPlatform.macOS, TargetPlatform.linux}.signal();

@override
Widget build(BuildContext context) {
return Watch(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SegmentedButton<ThemeMode>(
multiSelectionEnabled: false,
segments: const <ButtonSegment<ThemeMode>>[
ButtonSegment<ThemeMode>(value: ThemeMode.light, label: Text('Light'), icon: Icon(Icons.sunny)),
ButtonSegment<ThemeMode>(value: ThemeMode.system, label: Text('System'), icon: Icon(Icons.brightness_auto)),
ButtonSegment<ThemeMode>(value: ThemeMode.dark, label: Text('Dark'), icon: Icon(Icons.dark_mode)),
],
selected: <ThemeMode>{themeMode.value},
onSelectionChanged: (newSelection) {
themeMode.value = newSelection.first;
},
),
const SizedBox(height: 10),
SegmentedButton<TargetPlatform>(
segments: const <ButtonSegment<TargetPlatform>>[
ButtonSegment<TargetPlatform>(value: TargetPlatform.android, label: Text('android')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.fuchsia, label: Text('fuchsia')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.iOS, label: Text('iOS')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.linux, label: Text('linux')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.macOS, label: Text('macOS')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.windows, label: Text('windows')),
],
selected: targetPlatforms,
onSelectionChanged: (newSelection) {
targetPlatforms.clear();
targetPlatforms.addAll(newSelection);
},
multiSelectionEnabled: true,
),
],
);
});
}
}
72 changes: 4 additions & 68 deletions notes/flutter_web/lib/routes/notes/cheatsheets/widgets/page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_web/app.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_ButtonStyleButton.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Form_Checkbox.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_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';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Navigation_AppBar.dart';
import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Navigation_BottomAppBar.dart';
Expand Down Expand Up @@ -53,8 +55,8 @@ void build(BuildContext context, Cell print) {
FlutterExample(title: "FloatingActionButton", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_FloatingActionButton_dart, child: const Form_FloatingActionButton()),
FlutterExample(title: "IconButton", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_IconButton_dart, child: const Form_IconButton()),
FlutterExample(title: "SearchAnchor", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_SearchAnchor_dart, child: const Form_SearchAnchor()),
FlutterExample(title: "segmentButton", child: buttonAndInput.segmentButtonCell()),
FlutterExample(title: "Checkbox", child: buttonAndInput.checkbox()),
FlutterExample(title: "SegmentButton", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_SegmentButton_dart, child: const Form_SegmentButton()),
FlutterExample(title: "Checkbox", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Form_Checkbox_dart, child: const Form_Checkbox()),
FlutterExample(title: "CheckboxListTile", child: buttonAndInput.checkboxListTile()),
FlutterExample(title: "Chip", child: buttonAndInput.chip()),
FlutterExample(title: "ActionChip", child: buttonAndInput.actionChip()),
Expand Down Expand Up @@ -91,47 +93,6 @@ void build(BuildContext context, Cell print) {
}

class ButtonAndInput {
Widget segmentButtonCell() {
Value<ThemeMode> themeMode = ThemeMode.system.signal();
Set<TargetPlatform> targetPlatforms = <TargetPlatform>{TargetPlatform.macOS, TargetPlatform.linux}.signal();

return Watch(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SegmentedButton<ThemeMode>(
multiSelectionEnabled: false,
segments: const <ButtonSegment<ThemeMode>>[
ButtonSegment<ThemeMode>(value: ThemeMode.light, label: Text('Light'), icon: Icon(Icons.sunny)),
ButtonSegment<ThemeMode>(value: ThemeMode.system, label: Text('System'), icon: Icon(Icons.brightness_auto)),
ButtonSegment<ThemeMode>(value: ThemeMode.dark, label: Text('Dark'), icon: Icon(Icons.dark_mode)),
],
selected: <ThemeMode>{themeMode.value},
onSelectionChanged: (newSelection) {
themeMode.value = newSelection.first;
},
),
const SizedBox(height: 10),
SegmentedButton<TargetPlatform>(
segments: const <ButtonSegment<TargetPlatform>>[
ButtonSegment<TargetPlatform>(value: TargetPlatform.android, label: Text('android')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.fuchsia, label: Text('fuchsia')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.iOS, label: Text('iOS')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.linux, label: Text('linux')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.macOS, label: Text('macOS')),
ButtonSegment<TargetPlatform>(value: TargetPlatform.windows, label: Text('windows')),
],
selected: targetPlatforms,
onSelectionChanged: (newSelection) {
targetPlatforms.clear();
targetPlatforms.addAll(newSelection);
},
multiSelectionEnabled: true,
),
],
);
});
}

Widget checkboxListTile() {
final Value<bool?> checkboxListTile1 = (null as bool?).signal();
Expand All @@ -148,31 +109,6 @@ class ButtonAndInput {
);
}

Widget checkbox() {
final Value<bool?> checkbox1 = (null as bool?).signal();
final Value<bool> checkbox2 = false.signal();
return Watch(
builder: (context) {
return Column(
children: <Widget>[
Row(
children: [
const Text('tristate: true'),
Checkbox(tristate: true, checkColor: Colors.white, value: checkbox1.value, onChanged: (value) => checkbox1.value = value),
],
),
Row(
children: [
const Text('tristate: false'),
Checkbox(tristate: false, checkColor: Colors.white, value: checkbox2.value, onChanged: (value) => checkbox2.value = value!),
],
),
],
);
},
);
}

Widget chip() {
final Set<TargetPlatform> targets = Set.of(TargetPlatform.values).signal();

Expand Down

0 comments on commit ab99429

Please sign in to comment.