Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 22:09:06 +00:00
Code Issues Releases Wiki Activity

Refactor Simplistic_Editor (#1375)

Browse Source 
* refactor out FormattingToolbar and TextEditingDeltaHistoryView from main`

* replace togglebuttonstatemanager and texteditingdeltahistorymanager with appstatemanager

* fix up tests

* clean up

* Add ReplacementTextEditingController to AppState

* formatting

* `dart format`

Co-authored-by: Renzo Olivares <roliv@google.com>
Co-authored-by: Brett Morgan <brettmorgan@google.com>
This commit is contained in:
Renzo Olivares
2022-08-11 01:06:32 -07:00
committed by GitHub
parent e84e396a1f
commit c00e838c51
9 changed files with 526 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

407
simplistic_editor/lib/main.dart
View File

@@ -1,10 +1,11 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'app_state.dart';
import 'app_state_manager.dart';
import 'basic_text_field.dart';
import 'formatting_toolbar.dart';
import 'replacements.dart';
import 'text_editing_delta_history_manager.dart';
import 'toggle_buttons_state_manager.dart';
import 'text_editing_delta_history_view.dart';
void main() {
runApp(const MyApp());
@@ -15,14 +16,16 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Simplistic Editor',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
return AppStateWidget(
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Simplistic Editor',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
home: const MyHomePage(title: 'Simplistic Editor'),
),
home: const MyHomePage(title: 'Simplistic Editor'),
);
}
}
@@ -37,228 +40,20 @@ class MyHomePage extends StatefulWidget {
}
class _MyHomePageState extends State<MyHomePage> {
final ReplacementTextEditingController _replacementTextEditingController =
ReplacementTextEditingController(
text: 'The quick brown fox jumps over the lazy dog.',
);
late ReplacementTextEditingController _replacementTextEditingController;
final FocusNode _focusNode = FocusNode();
final Set<ToggleButtonsState> _isSelected = {};
final List<TextEditingDelta> _textEditingDeltaHistory = [];
void _updateTextEditingDeltaHistory(
List<TextEditingDelta> textEditingDeltas) {
for (final TextEditingDelta delta in textEditingDeltas) {
_textEditingDeltaHistory.add(delta);
}
setState(() {});
@override
void initState() {
super.initState();
_replacementTextEditingController = ReplacementTextEditingController();
}
List<Widget> _buildTextEditingDeltaHistoryViews(
List<TextEditingDelta> textEditingDeltas) {
List<Widget> textEditingDeltaViews = [];
for (final TextEditingDelta delta in textEditingDeltas) {
final TextEditingDeltaView deltaView;
if (delta is TextEditingDeltaInsertion) {
deltaView = TextEditingDeltaView(
deltaType: 'Insertion',
deltaText: delta.textInserted,
deltaRange: TextRange.collapsed(delta.insertionOffset),
newSelection: delta.selection,
newComposing: delta.composing,
);
} else if (delta is TextEditingDeltaDeletion) {
deltaView = TextEditingDeltaView(
deltaType: 'Deletion',
deltaText: delta.textDeleted,
deltaRange: delta.deletedRange,
newSelection: delta.selection,
newComposing: delta.composing,
);
} else if (delta is TextEditingDeltaReplacement) {
deltaView = TextEditingDeltaView(
deltaType: 'Replacement',
deltaText: delta.replacementText,
deltaRange: delta.replacedRange,
newSelection: delta.selection,
newComposing: delta.composing,
);
} else if (delta is TextEditingDeltaNonTextUpdate) {
deltaView = TextEditingDeltaView(
deltaType: 'NonTextUpdate',
deltaText: '',
deltaRange: TextRange.empty,
newSelection: delta.selection,
newComposing: delta.composing,
);
} else {
deltaView = const TextEditingDeltaView(
deltaType: 'Error',
deltaText: 'Error',
deltaRange: TextRange.empty,
newSelection: TextRange.empty,
newComposing: TextRange.empty,
);
}
textEditingDeltaViews.add(deltaView);
}
return textEditingDeltaViews.reversed.toList();
}
void _updateToggleButtonsStateOnSelectionChanged(TextSelection selection) {
// When the selection changes we want to check the replacements at the new
// selection. Enable/disable toggle buttons based on the replacements found
// at the new selection.
final List<TextStyle> replacementStyles =
_replacementTextEditingController.getReplacementsAtSelection(selection);
final Set<ToggleButtonsState> hasChanged = {};
if (replacementStyles.isEmpty) {
_isSelected.removeAll({
ToggleButtonsState.bold,
ToggleButtonsState.italic,
ToggleButtonsState.underline
});
}
for (final TextStyle style in replacementStyles) {
// See [_updateToggleButtonsStateOnButtonPressed] for how
// Bold, Italic and Underline are encoded into [style]
if (style.fontWeight != null &&
!hasChanged.contains(ToggleButtonsState.bold)) {
_isSelected.add(ToggleButtonsState.bold);
hasChanged.add(ToggleButtonsState.bold);
}
if (style.fontStyle != null &&
!hasChanged.contains(ToggleButtonsState.italic)) {
_isSelected.add(ToggleButtonsState.italic);
hasChanged.add(ToggleButtonsState.italic);
}
if (style.decoration != null &&
!hasChanged.contains(ToggleButtonsState.underline)) {
_isSelected.add(ToggleButtonsState.underline);
hasChanged.add(ToggleButtonsState.underline);
}
}
for (final TextStyle style in replacementStyles) {
if (style.fontWeight == null &&
!hasChanged.contains(ToggleButtonsState.bold)) {
_isSelected.remove(ToggleButtonsState.bold);
hasChanged.add(ToggleButtonsState.bold);
}
if (style.fontStyle == null &&
!hasChanged.contains(ToggleButtonsState.italic)) {
_isSelected.remove(ToggleButtonsState.italic);
hasChanged.add(ToggleButtonsState.italic);
}
if (style.decoration == null &&
!hasChanged.contains(ToggleButtonsState.underline)) {
_isSelected.remove(ToggleButtonsState.underline);
hasChanged.add(ToggleButtonsState.underline);
}
}
setState(() {});
}
void _updateToggleButtonsStateOnButtonPressed(int index) {
Map<int, TextStyle> attributeMap = const <int, TextStyle>{
0: TextStyle(fontWeight: FontWeight.bold),
1: TextStyle(fontStyle: FontStyle.italic),
2: TextStyle(decoration: TextDecoration.underline),
};
final TextRange replacementRange = TextRange(
start: _replacementTextEditingController.selection.start,
end: _replacementTextEditingController.selection.end,
);
final targetToggleButtonState = ToggleButtonsState.values[index];
if (_isSelected.contains(targetToggleButtonState)) {
_isSelected.remove(targetToggleButtonState);
} else {
_isSelected.add(targetToggleButtonState);
}
if (_isSelected.contains(targetToggleButtonState)) {
_replacementTextEditingController.applyReplacement(
TextEditingInlineSpanReplacement(
replacementRange,
(string, range) => TextSpan(text: string, style: attributeMap[index]),
true,
),
);
setState(() {});
} else {
_replacementTextEditingController.disableExpand(attributeMap[index]!);
_replacementTextEditingController.removeReplacementsAtRange(
replacementRange, attributeMap[index]);
setState(() {});
}
}
Widget _buildTextEditingDeltaViewHeading(String text) {
return Text(
text,
style: const TextStyle(
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
),
);
}
Widget _buildTextEditingDeltaViewHeader() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 35.0, vertical: 10.0),
child: Row(
children: [
Expanded(
child: Tooltip(
message: 'The type of text input that is occurring.'
' Check out the documentation for TextEditingDelta for more information.',
child: _buildTextEditingDeltaViewHeading('Delta Type'),
),
),
Expanded(
child: Tooltip(
message: 'The text that is being inserted or deleted',
child: _buildTextEditingDeltaViewHeading('Delta Text'),
),
),
Expanded(
child: Tooltip(
message:
'The offset in the text where the text input is occurring.',
child: _buildTextEditingDeltaViewHeading('Delta Offset'),
),
),
Expanded(
child: Tooltip(
message:
'The new text selection range after the text input has occurred.',
child: _buildTextEditingDeltaViewHeading('New Selection'),
),
),
Expanded(
child: Tooltip(
message:
'The new composing range after the text input has occurred.',
child: _buildTextEditingDeltaViewHeading('New Composing'),
),
),
],
),
);
@override
void didChangeDependencies() {
super.didChangeDependencies();
_replacementTextEditingController =
AppStateManager.of(context).appState.replacementsController;
}
static Route<Object?> _aboutDialogBuilder(
@@ -297,151 +92,29 @@ class _MyHomePageState extends State<MyHomePage> {
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: ToggleButtonsStateManager(
isToggleButtonsSelected: _isSelected,
updateToggleButtonsStateOnButtonPressed:
_updateToggleButtonsStateOnButtonPressed,
updateToggleButtonStateOnSelectionChanged:
_updateToggleButtonsStateOnSelectionChanged,
child: TextEditingDeltaHistoryManager(
history: _textEditingDeltaHistory,
updateHistoryOnInput: _updateTextEditingDeltaHistory,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Builder(builder: (innerContext) {
final ToggleButtonsStateManager manager =
ToggleButtonsStateManager.of(innerContext);
return ToggleButtons(
borderRadius:
const BorderRadius.all(Radius.circular(4.0)),
isSelected: [
manager.toggleButtonsState
.contains(ToggleButtonsState.bold),
manager.toggleButtonsState
.contains(ToggleButtonsState.italic),
manager.toggleButtonsState
.contains(ToggleButtonsState.underline),
],
onPressed: (index) => manager
.updateToggleButtonsOnButtonPressed(index),
children: const [
Icon(Icons.format_bold),
Icon(Icons.format_italic),
Icon(Icons.format_underline),
],
);
}),
],
child: Column(
children: [
const FormattingToolbar(),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 35.0),
child: BasicTextField(
controller: _replacementTextEditingController,
style: const TextStyle(
fontSize: 18.0,
color: Colors.black,
),
focusNode: _focusNode,
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 35.0),
child: BasicTextField(
controller: _replacementTextEditingController,
style: const TextStyle(
fontSize: 18.0, color: Colors.black),
focusNode: _focusNode,
),
),
),
Expanded(
child: Column(
children: [
_buildTextEditingDeltaViewHeader(),
Expanded(
child: Builder(
builder: (innerContext) {
final TextEditingDeltaHistoryManager manager =
TextEditingDeltaHistoryManager.of(
innerContext);
return ListView.separated(
padding: const EdgeInsets.symmetric(
horizontal: 35.0),
itemBuilder: (context, index) {
return _buildTextEditingDeltaHistoryViews(
manager.textEditingDeltaHistory)[index];
},
itemCount:
manager.textEditingDeltaHistory.length,
separatorBuilder: (context, index) {
return const SizedBox(height: 2.0);
},
);
},
),
),
const SizedBox(height: 10),
],
),
),
],
),
),
),
const Expanded(
child: TextEditingDeltaHistoryView(),
),
],
),
),
),
);
}
}
class TextEditingDeltaView extends StatelessWidget {
const TextEditingDeltaView({
super.key,
required this.deltaType,
required this.deltaText,
required this.deltaRange,
required this.newSelection,
required this.newComposing,
});
final String deltaType;
final String deltaText;
final TextRange deltaRange;
final TextRange newSelection;
final TextRange newComposing;
@override
Widget build(BuildContext context) {
late final Color rowColor;
switch (deltaType) {
case 'Insertion':
rowColor = Colors.greenAccent.shade100;
break;
case 'Deletion':
rowColor = Colors.redAccent.shade100;
break;
case 'Replacement':
rowColor = Colors.yellowAccent.shade100;
break;
case 'NonTextUpdate':
rowColor = Colors.blueAccent.shade100;
break;
default:
rowColor = Colors.white;
}
return Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(4.0)),
color: rowColor,
),
padding: const EdgeInsets.only(top: 4.0, bottom: 4.0, left: 8.0),
child: Row(
children: [
Expanded(child: Text(deltaType)),
Expanded(child: Text(deltaText)),
Expanded(child: Text('(${deltaRange.start}, ${deltaRange.end})')),
Expanded(child: Text('(${newSelection.start}, ${newSelection.end})')),
Expanded(child: Text('(${newComposing.start}, ${newComposing.end})')),
],
),
);
}
}