Skip to content

SelectionArea Didn’t Match The Expected Behavior with WidgetSpan #111021

Description

@CarGuo

SelectionArea didn’t match the expected behavior with WidgetSpan, this issue can be reproduce in the master and stable.

Steps to Reproduce

  1. Use Code sample , the case is SelectionArea with WidgetSpan
  2. Run in Android or iOS Platform
  3. Drag start handle or Click SelectAll in Toolbar

Expected results:

  • Text select in order when drag handle
  • When click SelectAll, start and end handle show in the right way.

Actual results:

  • 1.Drag Handle

Select not in order when drag handle like gif below:

333333 55555555
  • 2.Click SelectAll

When click SelectAll, start and end handle not show in the right way, like image below:

image-20220906155317318 image-20220905180955137

I found that when _additions sort by compareOrder function, Text in WidgetSpan is difficult to calculate the vertical height consistency in _compareVertically .

image

a is normal Text and b is WidgetSpan Text .

image

So WidgetSpan alway the first or last in selectables List.

Code sample
import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: RichTextDemoPage2(),
        ),
      ),
    );
  }
}



class RichTextDemoPage2 extends StatefulWidget {
  @override
  _RichTextDemoState2 createState() => _RichTextDemoState2();
}

class _RichTextDemoState2 extends State<RichTextDemoPage2> {
  double size = 50;

  @override
  Widget build(BuildContext mainContext) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("RichTextDemoPage"),
        actions: <Widget>[
          IconButton(
            onPressed: () {
              setState(() {
                size += 10;
              });
            },
            icon: const Icon(Icons.add_circle_outline),
          ),
          IconButton(
            onPressed: () {
              setState(() {
                size -= 10;
              });
            },
            icon: const Icon(Icons.remove_circle_outline),
          )
        ],
      ),
      body: SelectionArea(
        child:  Container(
          margin: const EdgeInsets.all(10),
          child: Center(
            child: Text.rich(
              TextSpan(
                children: <InlineSpan>[
                 const TextSpan(text: 'Flutter is'),
                 const WidgetSpan(
                      baseline: TextBaseline.alphabetic,
                      /// change alignment to next case
                      /// alignment: PlaceholderAlignment.bottom,
                      alignment: PlaceholderAlignment.middle,
                      child:  SizedBox(
                        width: 120,
                        height: 50,
                        child:  Card(
                            color: Colors.yellowAccent,
                            child: Center(child: Text('Hello World!'))),
                      )),
                WidgetSpan(
                      child: SizedBox(
                    width: size > 0 ? size : 0,
                    height: size > 0 ? size : 0,
                    child:  Image.network(
                      "https://avatars.githubusercontent.com/u/10770362?s=40&v=4",
                      fit: BoxFit.cover,
                    ),
                  )),
                 const TextSpan(text: 'the best!'),
                 const WidgetSpan(
                    child: SelectionContainer.disabled(
                      child: Text(' not copy'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Logs
guoshuyu@guoshuyudeMacBook-Pro-2 flutter % flutter doctor 
Waiting for another flutter command to release the startup lock...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.4.0-19.0.pre.86, on macOS 12.5.1 21G83
    darwin-arm64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Android Studio (version 2021.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.f: selectionSelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIsfound in release: 3.3Found to occur in 3.3found in release: 3.4Found to occur in 3.4frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work on

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions