I have a line that has three buttons inside it. I know that I can use RichText with Gesture Recogniser to make them clickable like HTML <a href=""> tag. But I am new to flutter and don't know how can I achieve that behaviour.
Also is there any better option to do similar thing?
Also I don't want to open an External Link. Just navigate to another page.
I have attached a picture containing what I want to do. Picture of what I want to do
import 'package:flutter/gestures.dart';
and the widget
RichText(
text: TextSpan(
children: [
TextSpan(
text: "By Clicking Sign up you are agree to the ",
),
TextSpan(
text: "Privacy Policy ",
style: TextStyle(
color: Colors.lightGreen,
),
recognizer: new TapGestureRecognizer()
..onTap = () => print("Privacy Policy"),
),
TextSpan(text: "and our "),
TextSpan(
text: "Terms and Conditions ",
style: TextStyle(
color: Colors.lightGreen,
),
recognizer: new TapGestureRecognizer()
..onTap = () => print("Terms and Conditions"),
),
TextSpan(text: "and "),
TextSpan(
text: "Cookie Statement",
style: TextStyle(
color: Colors.lightGreen,
),
recognizer: new TapGestureRecognizer()
..onTap = () => print("Cookie Statement"),
),
TextSpan(text: "."),
],
),
),
does it help?
you can wrap the Text widget with GestureDetector()
GestureDetector(
child: Text(
'Clickable text'
),
onTap: () {
//go to destination page
},
)
In case if you're opening to an external link you can check URL launcher to open websites
Related
I want to add a TextButton in the middle of a paragraph in a Text widget. Similarly when writing a paragraph and want to add a button to let users route to that screen to get the desired information about something. How could I do that?
Thank you
you can use RichText to make your works clickable.
you can use like this :
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'By clicking Sign Up, you agree to our '),
TextSpan(
text: 'Terms of Service',
recognizer: TapGestureRecognizer()
..onTap = () {
print('Terms of Service"');
}),
TextSpan(text: ' and that you have read our '),
TextSpan(
text: 'Privacy Policy',
recognizer: TapGestureRecognizer()
..onTap = () {
print('Privacy Policy"');
}),
],
),
),
I read different posts on how to make parts of a text clickable. What I did not found and that I need in my case, is that the clickable part of text is set dinamically because I have different translations for each language, so the clickable word can be in different parts of the sentence. I have some files with all the texts that my application uses and those texts contains placeholders, So I want something more or less like this:
title: RichText(
text: TextSpan(
style: Theme.of(context)
.textTheme
.bodyText1
?.copyWith(fontSize: 14.0),
children: <TextSpan>[
TextSpan(
text: labels.label1(new TextSpan(
text: labels.placeholder_value,
style: new TextStyle(color: Colors.blue),
recognizer: new TapGestureRecognizer()
..onTap = () async {
func(context);
},
)
]
),
)
This piece of code of course doesn't work, it is only to show better what I need...I want the TextSpan with blue color and TapGestureRecognizer to be passed as a parameter to label1
I am trying to do a stateless widget for inline text links.
I am using this answer here https://stackoverflow.com/a/55607224/3808307 to create the links
RichText(
text: TextSpan(
children: [
TextSpan(text: 'This is a going to be a Text which has '),
TextSpan(
text: 'single tap',
style: style,
recognizer: TapGestureRecognizer()
..onTap = () {
// single tapped
},
),
TextSpan(text: ' along with '),
TextSpan(
text: 'double tap',
style: style,
recognizer: DoubleTapGestureRecognizer()
..onDoubleTap = () {
// double tapped
},
),
TextSpan(text: ' and '),
TextSpan(
text: 'long press',
style: style,
recognizer: LongPressGestureRecognizer()
..onLongPress = () {
// long pressed
},
),
],
),
)
, but I would like to have a TextSpan that I can import, and already has the styling applied, passing it a text that would act as label and a function.
Do I need a stateful widget for this, or can I just use a stateless widget?
You can use a stateless widget without a problem.
In the case that you need to change the style of the text when you press the links you will need to use a stateful widget.
I am using something like this to have links in text inside a paragraph
RichText(
text: TextSpan(
children: [
TextSpan(text: 'This is a going to be a Text which has '),
TextSpan(
text: 'single tap',
style: style,
recognizer: TapGestureRecognizer()
..onTap = () {
// single tapped
},
),
],
),
)
Now, it works fine, but I cannot have a hand cursor when rolling over the text?
I was looking on how to do it and found this
MouseRegion(
cursor: SystemMouseCursors.click,
child: Container(
height: 30,
width: 30,
color: Colors.red,
),
),
but is not possible to wrap one of the TextSpans in a Container and MouseRegion.
You can create a custom WidgetSpan like this:
class MouseRegionSpan extends WidgetSpan {
MouseRegionSpan({
#required MouseCursor mouseCursor,
#required InlineSpan inlineSpan,
}) : super(
child: MouseRegion(
cursor: mouseCursor,
child: Text.rich(
inlineSpan,
),
),
);
}
and wrap your TextSpan with it:
MouseRegionSpan(
mouseCursor: SystemMouseCursors.click,
inlineSpan: TextSpan(
text: 'single tap',
style: style,
recognizer: TapGestureRecognizer()
..onTap = () {
// single tapped
},
),
),
Recently, this feature has been added to TextSpans.
As of Flutter 5647407 on master (probably going to be in the 2.1.0 release), the mouse cursor is clickable (hand cursor) by default. So you do not need to take any action other than upgrading Flutter.
Manually specifying
You can manually specify the mouseCursor property:
TextSpan(
text: 'single tap',
style: style,
mouseCursor: MaterialStateMouseCursor.clickable,
recognizer: TapGestureRecognizer()
..onTap = () {
// single tapped
},
),
Furthermore, there are now onEnter and onExit callbacks for responding to the mouse entering and leaving the text span.
Default SystemMouseCursors.click
If you take a look at the commit, you will notice that the default is now SystemMouseCursors.click when you specify a recognizer.
I building an application in Flutter and I am in a situation where I got RichText widget with many TextSpan widgets and I need to have two gesture recognizers, one is on double tap and the other is on long press, so how do I do this if it is possible?
Can't you just wrap the entire Text Span in the gesture detector widget? https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
Each textSpan comes with its own text and children property for which you can use the recognizer property and implement different taps as needed.
Consider below example:
Container(
color: Colors.black,
padding: EdgeInsets.all(10),
child: Center(
child: RichText(
text: TextSpan( // <-- 1
text: 'This is a text from first textspan. ',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
fontWeight: FontWeight.bold),
children: <TextSpan>[ // <-- 2
TextSpan(
text: ' This is a text from second textspan ',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold),
recognizer: LongPressGestureRecognizer()
..onLongPress = () {
print('Long pressed');
},
children: <
TextSpan>[ // <-- 3 (children of 2 textspan
TextSpan(
text: ' This is a another text from second textspan',
recognizer: DoubleTapGestureRecognizer()
..onDoubleTap = () {
print('double tapped');
}
)
]
),
]
),
)
)
)
The children: <TextSpan>[] commented as 2 has a text property and corresponding recognizer in which I used LongPressGestureRecognizer(). The same textSpan (2), has children property which again can have a sub text span with a text and corresponding recognizer in which I used DoubleTapGestureRecognizer().
So the output will be : You can long press on This is a text from second textspan and you can double tap on This is another text from second textspan.
Hope this answers your question.