I want to have an additional button in the text selection popup buttons shows up on tap and holding the text.
Selection text will be inside a text widget or any other widget but NOT an Editable field like an input form field. I tried various things but neither of them showed a mismatch lint/syntax error or the button itself.
End Goal:
I want to Select the text from a Text Widget (Not a FormField) and have an additional button to perform an action.
I tried:
https://zenn.dev/taki/articles/9feff78e2b2503
plus more variations I also tried SelectableRegion, still not working.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorSchemeSeed: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String? selectedText;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Selection Area'),
),
body: Center(
// I tried SelectableRegion as well, still not working
child: SelectionArea(
onSelectionChanged: (final value) {
print(value?.plainText);
setState(() {
selectedText = value?.plainText;
});
},
contextMenuBuilder: (context, selectableRegionState) {
final extraButton = ContextMenuButtonItem(
label: 'Extra Button',
onPressed: () async {
if (selectedText == null) return;
});
return AdaptiveTextSelectionToolbar.buttonItems(buttonItems: [
extraButton,
...selectableRegionState.contextMenuButtonItems
], anchors: selectableRegionState.contextMenuAnchors);
},
child: const Text(
'!!! Select Part of Me !!!',
) // This could be any widget tree, as I'm not selecting from a direct string,
),
));
}
}
Try SelectableText
widget to select your text
2