mirror of
https://github.com/flutter/samples.git
synced 2025-11-09 14:28:51 +00:00
Making ToggleButtonState more obvious (#1286)
This commit is contained in:
@@ -7,7 +7,7 @@ import 'package:flutter/services.dart';
|
|||||||
|
|
||||||
import 'replacements.dart';
|
import 'replacements.dart';
|
||||||
import 'text_editing_delta_history_manager.dart';
|
import 'text_editing_delta_history_manager.dart';
|
||||||
import 'toggle_button_state_manager.dart';
|
import 'toggle_buttons_state_manager.dart';
|
||||||
|
|
||||||
/// Signature for the callback that reports when the user changes the selection
|
/// Signature for the callback that reports when the user changes the selection
|
||||||
/// (including the cursor location).
|
/// (including the cursor location).
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import 'package:flutter/services.dart';
|
|||||||
import 'basic_text_field.dart';
|
import 'basic_text_field.dart';
|
||||||
import 'replacements.dart';
|
import 'replacements.dart';
|
||||||
import 'text_editing_delta_history_manager.dart';
|
import 'text_editing_delta_history_manager.dart';
|
||||||
import 'toggle_button_state_manager.dart';
|
import 'toggle_buttons_state_manager.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
runApp(const MyApp());
|
runApp(const MyApp());
|
||||||
@@ -42,7 +42,7 @@ class _MyHomePageState extends State<MyHomePage> {
|
|||||||
text: 'The quick brown fox jumps over the lazy dog.',
|
text: 'The quick brown fox jumps over the lazy dog.',
|
||||||
);
|
);
|
||||||
final FocusNode _focusNode = FocusNode();
|
final FocusNode _focusNode = FocusNode();
|
||||||
final List<bool> _isSelected = [false, false, false];
|
final Set<ToggleButtonsState> _isSelected = {};
|
||||||
final List<TextEditingDelta> _textEditingDeltaHistory = [];
|
final List<TextEditingDelta> _textEditingDeltaHistory = [];
|
||||||
|
|
||||||
void _updateTextEditingDeltaHistory(
|
void _updateTextEditingDeltaHistory(
|
||||||
@@ -115,43 +115,55 @@ class _MyHomePageState extends State<MyHomePage> {
|
|||||||
// at the new selection.
|
// at the new selection.
|
||||||
final List<TextStyle> replacementStyles =
|
final List<TextStyle> replacementStyles =
|
||||||
_replacementTextEditingController.getReplacementsAtSelection(selection);
|
_replacementTextEditingController.getReplacementsAtSelection(selection);
|
||||||
final List<bool> hasChanged = [false, false, false];
|
final Set<ToggleButtonsState> hasChanged = {};
|
||||||
|
|
||||||
if (replacementStyles.isEmpty) {
|
if (replacementStyles.isEmpty) {
|
||||||
_isSelected.fillRange(0, _isSelected.length, false);
|
_isSelected.removeAll({
|
||||||
|
ToggleButtonsState.bold,
|
||||||
|
ToggleButtonsState.italic,
|
||||||
|
ToggleButtonsState.underline
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
for (final TextStyle style in replacementStyles) {
|
for (final TextStyle style in replacementStyles) {
|
||||||
if (style.fontWeight != null && !hasChanged[0]) {
|
// See [_updateToggleButtonsStateOnButtonPressed] for how
|
||||||
_isSelected[0] = true;
|
// Bold, Italic and Underline are encoded into [style]
|
||||||
hasChanged[0] = true;
|
if (style.fontWeight != null &&
|
||||||
|
!hasChanged.contains(ToggleButtonsState.bold)) {
|
||||||
|
_isSelected.add(ToggleButtonsState.bold);
|
||||||
|
hasChanged.add(ToggleButtonsState.bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (style.fontStyle != null && !hasChanged[1]) {
|
if (style.fontStyle != null &&
|
||||||
_isSelected[1] = true;
|
!hasChanged.contains(ToggleButtonsState.italic)) {
|
||||||
hasChanged[1] = true;
|
_isSelected.add(ToggleButtonsState.italic);
|
||||||
|
hasChanged.add(ToggleButtonsState.italic);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (style.decoration != null && !hasChanged[2]) {
|
if (style.decoration != null &&
|
||||||
_isSelected[2] = true;
|
!hasChanged.contains(ToggleButtonsState.underline)) {
|
||||||
hasChanged[2] = true;
|
_isSelected.add(ToggleButtonsState.underline);
|
||||||
|
hasChanged.add(ToggleButtonsState.underline);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (final TextStyle style in replacementStyles) {
|
for (final TextStyle style in replacementStyles) {
|
||||||
if (style.fontWeight == null && !hasChanged[0]) {
|
if (style.fontWeight == null &&
|
||||||
_isSelected[0] = false;
|
!hasChanged.contains(ToggleButtonsState.bold)) {
|
||||||
hasChanged[0] = true;
|
_isSelected.remove(ToggleButtonsState.bold);
|
||||||
|
hasChanged.add(ToggleButtonsState.bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (style.fontStyle == null && !hasChanged[1]) {
|
if (style.fontStyle == null &&
|
||||||
_isSelected[1] = false;
|
!hasChanged.contains(ToggleButtonsState.italic)) {
|
||||||
hasChanged[1] = true;
|
_isSelected.remove(ToggleButtonsState.italic);
|
||||||
|
hasChanged.add(ToggleButtonsState.italic);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (style.decoration == null && !hasChanged[2]) {
|
if (style.decoration == null &&
|
||||||
_isSelected[2] = false;
|
!hasChanged.contains(ToggleButtonsState.underline)) {
|
||||||
hasChanged[2] = true;
|
_isSelected.remove(ToggleButtonsState.underline);
|
||||||
|
hasChanged.add(ToggleButtonsState.underline);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -170,8 +182,15 @@ class _MyHomePageState extends State<MyHomePage> {
|
|||||||
end: _replacementTextEditingController.selection.end,
|
end: _replacementTextEditingController.selection.end,
|
||||||
);
|
);
|
||||||
|
|
||||||
_isSelected[index] = !_isSelected[index];
|
final targetToggleButtonState = ToggleButtonsState.values[index];
|
||||||
if (_isSelected[index]) {
|
|
||||||
|
if (_isSelected.contains(targetToggleButtonState)) {
|
||||||
|
_isSelected.remove(targetToggleButtonState);
|
||||||
|
} else {
|
||||||
|
_isSelected.add(targetToggleButtonState);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_isSelected.contains(targetToggleButtonState)) {
|
||||||
_replacementTextEditingController.applyReplacement(
|
_replacementTextEditingController.applyReplacement(
|
||||||
TextEditingInlineSpanReplacement(
|
TextEditingInlineSpanReplacement(
|
||||||
replacementRange,
|
replacementRange,
|
||||||
@@ -304,7 +323,14 @@ class _MyHomePageState extends State<MyHomePage> {
|
|||||||
return ToggleButtons(
|
return ToggleButtons(
|
||||||
borderRadius:
|
borderRadius:
|
||||||
const BorderRadius.all(Radius.circular(4.0)),
|
const BorderRadius.all(Radius.circular(4.0)),
|
||||||
isSelected: manager.toggleButtonsState,
|
isSelected: [
|
||||||
|
manager.toggleButtonsState
|
||||||
|
.contains(ToggleButtonsState.bold),
|
||||||
|
manager.toggleButtonsState
|
||||||
|
.contains(ToggleButtonsState.italic),
|
||||||
|
manager.toggleButtonsState
|
||||||
|
.contains(ToggleButtonsState.underline),
|
||||||
|
],
|
||||||
onPressed: (index) => manager
|
onPressed: (index) => manager
|
||||||
.updateToggleButtonsOnButtonPressed(index),
|
.updateToggleButtonsOnButtonPressed(index),
|
||||||
children: const [
|
children: const [
|
||||||
|
|||||||
@@ -10,11 +10,18 @@ typedef UpdateToggleButtonsStateOnSelectionChangedCallback = void Function(
|
|||||||
typedef UpdateToggleButtonsStateOnButtonPressedCallback = void Function(
|
typedef UpdateToggleButtonsStateOnButtonPressedCallback = void Function(
|
||||||
int index);
|
int index);
|
||||||
|
|
||||||
|
/// The toggle buttons that can be selected.
|
||||||
|
enum ToggleButtonsState {
|
||||||
|
bold,
|
||||||
|
italic,
|
||||||
|
underline,
|
||||||
|
}
|
||||||
|
|
||||||
class ToggleButtonsStateManager extends InheritedWidget {
|
class ToggleButtonsStateManager extends InheritedWidget {
|
||||||
const ToggleButtonsStateManager({
|
const ToggleButtonsStateManager({
|
||||||
super.key,
|
super.key,
|
||||||
required super.child,
|
required super.child,
|
||||||
required List<bool> isToggleButtonsSelected,
|
required Set<ToggleButtonsState> isToggleButtonsSelected,
|
||||||
required UpdateToggleButtonsStateOnButtonPressedCallback
|
required UpdateToggleButtonsStateOnButtonPressedCallback
|
||||||
updateToggleButtonsStateOnButtonPressed,
|
updateToggleButtonsStateOnButtonPressed,
|
||||||
required UpdateToggleButtonsStateOnSelectionChangedCallback
|
required UpdateToggleButtonsStateOnSelectionChangedCallback
|
||||||
@@ -32,13 +39,13 @@ class ToggleButtonsStateManager extends InheritedWidget {
|
|||||||
return result!;
|
return result!;
|
||||||
}
|
}
|
||||||
|
|
||||||
final List<bool> _isToggleButtonsSelected;
|
final Set<ToggleButtonsState> _isToggleButtonsSelected;
|
||||||
final UpdateToggleButtonsStateOnButtonPressedCallback
|
final UpdateToggleButtonsStateOnButtonPressedCallback
|
||||||
_updateToggleButtonsStateOnButtonPressed;
|
_updateToggleButtonsStateOnButtonPressed;
|
||||||
final UpdateToggleButtonsStateOnSelectionChangedCallback
|
final UpdateToggleButtonsStateOnSelectionChangedCallback
|
||||||
_updateToggleButtonStateOnSelectionChanged;
|
_updateToggleButtonStateOnSelectionChanged;
|
||||||
|
|
||||||
List<bool> get toggleButtonsState => _isToggleButtonsSelected;
|
Set<ToggleButtonsState> get toggleButtonsState => _isToggleButtonsSelected;
|
||||||
UpdateToggleButtonsStateOnButtonPressedCallback
|
UpdateToggleButtonsStateOnButtonPressedCallback
|
||||||
get updateToggleButtonsOnButtonPressed =>
|
get updateToggleButtonsOnButtonPressed =>
|
||||||
_updateToggleButtonsStateOnButtonPressed;
|
_updateToggleButtonsStateOnButtonPressed;
|
||||||
Reference in New Issue
Block a user