mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
5ecf10052f
This pull request aims to improve code readability, based on feedback gathered in a recent design doc.
<br>
There are two factors that hugely impact how easy it is to understand a piece of code: **verbosity** and **complexity**.
Reducing **verbosity** is important, because boilerplate makes a project more difficult to navigate. It also has a tendency to make one's eyes gloss over, and subtle typos/bugs become more likely to slip through.
Reducing **complexity** makes the code more accessible to more people. This is especially important for open-source projects like Flutter, where the code is read by those who make contributions, as well as others who read through source code as they debug their own projects.
<hr>
<br>
The following examples show how pattern-matching might affect these two factors:
<details> <summary><h3>Example 1 (GOOD)</h3> [click to expand]</summary>
```dart
if (ancestor case InheritedElement(:final InheritedTheme widget)) {
themes.add(widget);
}
```
Without using patterns, this might expand to
```dart
if (ancestor is InheritedElement) {
final InheritedWidget widget = ancestor.widget;
if (widget is InheritedTheme) {
themes.add(widget);
}
}
```
Had `ancestor` been a non-local variable, it would need to be "converted" as well:
```dart
final Element ancestor = this.ancestor;
if (ancestor is InheritedElement) {
final InheritedWidget inheritedWidget = ancestor.widget;
if (widget is InheritedTheme) {
themes.add(theme);
}
}
```
</details>
<details> <summary><h3>Example 2 (BAD) </h3> [click to expand]</summary>
```dart
if (widget case PreferredSizeWidget(preferredSize: Size(:final double height))) {
return height;
}
```
Assuming `widget` is a non-local variable, this would expand to:
```dart
final Widget widget = this.widget;
if (widget is PreferredSizeWidget) {
return widget.preferredSize.height;
}
```
<br>
</details>
In both of the examples above, an `if-case` statement simultaneously verifies that an object meets the specified criteria and performs a variable assignment accordingly.
But there are some differences: Example 2 uses a more deeply-nested pattern than Example 1 but makes fewer useful checks.
**Example 1:**
- checks that `ancestor` is an `InheritedElement`
- checks that the inherited element's `widget` is an `InheritedTheme`
**Example 2:**
- checks that `widget` is a `PreferredSizeWidget`
(every `PreferredSizeWidget` has a `size` field, and every `Size` has a `height` field)
<br>
<hr>
I feel hesitant to try presenting a set of cut-and-dry rules as to which scenarios should/shouldn't use pattern-matching, since there are an abundance of different types of patterns, and an abundance of different places where they might be used.
But hopefully the conversations we've had recently will help us converge toward a common intuition of how pattern-matching can best be utilized for improved readability.
<br><br>
- resolves https://github.com/flutter/flutter/issues/152313
- Design Doc: [flutter.dev/go/dart-patterns](https://flutter.dev/go/dart-patterns)
|
||
|---|---|---|
| .. | ||
| actions | ||
| animated_grid | ||
| animated_list | ||
| animated_size | ||
| animated_switcher | ||
| app | ||
| app_lifecycle_listener | ||
| async | ||
| autocomplete | ||
| autofill | ||
| basic | ||
| binding | ||
| color_filter | ||
| dismissible | ||
| drag_target | ||
| draggable_scrollable_sheet | ||
| editable_text | ||
| focus_manager | ||
| focus_scope | ||
| focus_traversal | ||
| form | ||
| framework | ||
| gesture_detector | ||
| hardware_keyboard | ||
| heroes | ||
| image | ||
| implicit_animations | ||
| inherited_model | ||
| inherited_notifier | ||
| inherited_theme | ||
| interactive_viewer | ||
| layout_builder | ||
| magnifier | ||
| media_query | ||
| navigator | ||
| navigator_pop_handler | ||
| nested_scroll_view | ||
| notification_listener | ||
| overflow_bar | ||
| overlay | ||
| overscroll_indicator | ||
| page | ||
| page_storage | ||
| page_view | ||
| pop_scope | ||
| preferred_size | ||
| restoration | ||
| restoration_properties | ||
| routes | ||
| scroll_end_notification | ||
| scroll_notification_observer | ||
| scroll_position | ||
| scroll_view | ||
| scrollbar | ||
| shared_app_data | ||
| shortcuts | ||
| single_child_scroll_view | ||
| sliver | ||
| sliver_fill | ||
| slotted_render_object_widget | ||
| system_context_menu | ||
| table | ||
| tap_region | ||
| text | ||
| text_magnifier | ||
| transitions | ||
| tween_animation_builder | ||
| undo_history | ||
| value_listenable_builder | ||
| widget_state | ||