• Mouad Debbar's avatar
    [web] Pass creation params to the platform view factory (#128146) · b0188cd1
    Mouad Debbar authored
    This concludes step 1 of the `HtmlElementView` improvements. It's now possible to pass creation params to platform view factories directly from `HtmlElementView`.
    
    Here's a sample app using a single factory to render platform views in different colors:
    
    <details>
      <summary>Code sample</summary>
      
      ```dart
    import 'dart:js_interop';
    import 'dart:ui_web' as ui_web;
    import 'package:flutter/material.dart';
    import 'package:web/web.dart' as web;
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Platform View Demo',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Platform View Demo'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  BoxWrapper('red'),
                  BoxWrapper(null),
                  BoxWrapper('blue'),
                ],
              ),
            ),
          ),
        );
      }
    }
    
    bool isRegistered = false;
    
    class BoxWrapper extends StatelessWidget {
      const BoxWrapper(this.cssColor);
    
      final String? cssColor;
    
      void register() {
        if (isRegistered) return;
        isRegistered = true;
    
        ui_web.platformViewRegistry.registerViewFactory('my-platform-view', (
          id, {
          Object? params,
        }) {
          params as String?;
    
          final element = web.document.createElement('div'.toJS) as web.HTMLElement;
          element.textContent = 'Platform View'.toJS;
          element.style
            ..lineHeight = '100px'.toJS
            ..fontSize = '24px'.toJS
            ..backgroundColor = (params ?? 'pink').toJS
            ..textAlign = 'center'.toJS;
          return element;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        register();
        return SizedBox(
          width: 200,
          height: 100,
          child: Card(
            child: HtmlElementView(
              viewType: 'my-platform-view',
              creationParams: cssColor,
            ),
          ),
        );
      }
    }
      ```
    </details>
    
    ![image](https://github.com/flutter/flutter/assets/1278212/4b62ed8b-2314-49d6-9b4a-5da849bf2a48)
    
    Depends on https://github.com/flutter/engine/pull/42255
    
    Part of https://github.com/flutter/flutter/issues/127030
    b0188cd1
Name
Last commit
Last update
..
_platform_selectable_region_context_menu_io.dart Loading commit data...
_platform_selectable_region_context_menu_web.dart Loading commit data...
actions.dart Loading commit data...
animated_cross_fade.dart Loading commit data...
animated_scroll_view.dart Loading commit data...
animated_size.dart Loading commit data...
animated_switcher.dart Loading commit data...
annotated_region.dart Loading commit data...
app.dart Loading commit data...
app_lifecycle_listener.dart Loading commit data...
async.dart Loading commit data...
autocomplete.dart Loading commit data...
autofill.dart Loading commit data...
automatic_keep_alive.dart Loading commit data...
banner.dart Loading commit data...
basic.dart Loading commit data...
binding.dart Loading commit data...
bottom_navigation_bar_item.dart Loading commit data...
color_filter.dart Loading commit data...
constants.dart Loading commit data...
container.dart Loading commit data...
context_menu_button_item.dart Loading commit data...
context_menu_controller.dart Loading commit data...
debug.dart Loading commit data...
default_selection_style.dart Loading commit data...
default_text_editing_shortcuts.dart Loading commit data...
desktop_text_selection_toolbar_layout_delegate.dart Loading commit data...
dismissible.dart Loading commit data...
display_feature_sub_screen.dart Loading commit data...
disposable_build_context.dart Loading commit data...
drag_target.dart Loading commit data...
draggable_scrollable_sheet.dart Loading commit data...
dual_transition_builder.dart Loading commit data...
editable_text.dart Loading commit data...
fade_in_image.dart Loading commit data...
focus_manager.dart Loading commit data...
focus_scope.dart Loading commit data...
focus_traversal.dart Loading commit data...
form.dart Loading commit data...
framework.dart Loading commit data...
gesture_detector.dart Loading commit data...
grid_paper.dart Loading commit data...
heroes.dart Loading commit data...
icon.dart Loading commit data...
icon_data.dart Loading commit data...
icon_theme.dart Loading commit data...
icon_theme_data.dart Loading commit data...
image.dart Loading commit data...
image_filter.dart Loading commit data...
image_icon.dart Loading commit data...
implicit_animations.dart Loading commit data...
inherited_model.dart Loading commit data...
inherited_notifier.dart Loading commit data...
inherited_theme.dart Loading commit data...
interactive_viewer.dart Loading commit data...
keyboard_listener.dart Loading commit data...
layout_builder.dart Loading commit data...
list_wheel_scroll_view.dart Loading commit data...
localizations.dart Loading commit data...
lookup_boundary.dart Loading commit data...
magnifier.dart Loading commit data...
media_query.dart Loading commit data...
modal_barrier.dart Loading commit data...
navigation_toolbar.dart Loading commit data...
navigator.dart Loading commit data...
nested_scroll_view.dart Loading commit data...
notification_listener.dart Loading commit data...
orientation_builder.dart Loading commit data...
overflow_bar.dart Loading commit data...
overlay.dart Loading commit data...
overscroll_indicator.dart Loading commit data...
page_storage.dart Loading commit data...
page_view.dart Loading commit data...
pages.dart Loading commit data...
performance_overlay.dart Loading commit data...
placeholder.dart Loading commit data...
platform_menu_bar.dart Loading commit data...
platform_selectable_region_context_menu.dart Loading commit data...
platform_view.dart Loading commit data...
preferred_size.dart Loading commit data...
primary_scroll_controller.dart Loading commit data...
raw_keyboard_listener.dart Loading commit data...
reorderable_list.dart Loading commit data...
restoration.dart Loading commit data...
restoration_properties.dart Loading commit data...
router.dart Loading commit data...
routes.dart Loading commit data...
safe_area.dart Loading commit data...
scroll_activity.dart Loading commit data...
scroll_aware_image_provider.dart Loading commit data...
scroll_configuration.dart Loading commit data...
scroll_context.dart Loading commit data...
scroll_controller.dart Loading commit data...
scroll_delegate.dart Loading commit data...
scroll_metrics.dart Loading commit data...
scroll_notification.dart Loading commit data...
scroll_notification_observer.dart Loading commit data...
scroll_physics.dart Loading commit data...
scroll_position.dart Loading commit data...
scroll_position_with_single_context.dart Loading commit data...
scroll_simulation.dart Loading commit data...
scroll_view.dart Loading commit data...
scrollable.dart Loading commit data...
scrollable_helpers.dart Loading commit data...
scrollbar.dart Loading commit data...
selectable_region.dart Loading commit data...
selection_container.dart Loading commit data...
semantics_debugger.dart Loading commit data...
service_extensions.dart Loading commit data...
shared_app_data.dart Loading commit data...
shortcuts.dart Loading commit data...
single_child_scroll_view.dart Loading commit data...
size_changed_layout_notifier.dart Loading commit data...
sliver.dart Loading commit data...
sliver_fill.dart Loading commit data...
sliver_layout_builder.dart Loading commit data...
sliver_persistent_header.dart Loading commit data...
sliver_prototype_extent_list.dart Loading commit data...
slotted_render_object_widget.dart Loading commit data...
snapshot_widget.dart Loading commit data...
spacer.dart Loading commit data...
spell_check.dart Loading commit data...
status_transitions.dart Loading commit data...
table.dart Loading commit data...
tap_and_drag_gestures.dart Loading commit data...
tap_region.dart Loading commit data...
text.dart Loading commit data...
text_editing_intents.dart Loading commit data...
text_selection.dart Loading commit data...
text_selection_toolbar_anchors.dart Loading commit data...
text_selection_toolbar_layout_delegate.dart Loading commit data...
texture.dart Loading commit data...
ticker_provider.dart Loading commit data...
title.dart Loading commit data...
transitions.dart Loading commit data...
tween_animation_builder.dart Loading commit data...
two_dimensional_scroll_view.dart Loading commit data...
two_dimensional_viewport.dart Loading commit data...
undo_history.dart Loading commit data...
unique_widget.dart Loading commit data...
value_listenable_builder.dart Loading commit data...
view.dart Loading commit data...
viewport.dart Loading commit data...
visibility.dart Loading commit data...
widget_inspector.dart Loading commit data...
widget_span.dart Loading commit data...
will_pop_scope.dart Loading commit data...
window.dart Loading commit data...