I installed speech balloon package for Flutter. I made the design in the image myself with the Column and Row widgets to tell you what I want. What I want is for this message bubble to appear at the clicked point when the button is clicked (the SpeechBalloon widget has an offset parameter) and disappear after a while or when I click it again. For this the bubble needs to appear in a new layer, like the Stack widget. But I don't know how to do this. I will be very happy if you can help.
Actually, there will be Text widgets and TextButton widgets in the Wrap widget. That's why the message bubble needs to be on a top layer.
Wrap(
children: [
for (var i = 0; i < newItems.length; i++)
(unknownWords.containsKey(newItems[i]))
? GestureDetector(
onTap: (){
SpeechBalloon("Mean of word: ${unknownWords[newItems[i]]}"),
//This algorithm definitely works, I tried it before with the easy_loading package. But I want it to be displayed below the clicked point.
},
child: Text(
word.split(" ")[i] + " ",
style: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.bold,
backgroundColor: Colors.yellow.shade900,
),
),
)
: Text(
word.split(" ")[i] + ' ',
style: TextStyle(fontSize: fontSize),
),
],
);
Related
How to achieve this effect with Flutter? Preferably with something like animatedContainer, but not necessarily.
Solution 1:
Look at this package: animated_text_kit
https://pub.dev/packages/animated_text_kit
See the Wavy pattern...
return DefaultTextStyle(
style: const TextStyle(
fontSize: 20.0,
),
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText('Hello World'),
WavyAnimatedText('Look at the waves'),
],
isRepeatingAnimation: true,
onTap: () {
print("Tap Event");
},
),
);
Solution 2:
There are several more general packages that provide out of the box and ready to use Loading animations... (but not necessarily the exact same animation from your link)
Links:
https://pub.dev/packages/flutter_easyloading
Flutter loading text animation
Flutter loading text animation
I'm looking for a way to add multiple tap gestures to a block of text.
The block of text may consist of a hyperlink. The goal is that if a user taps on the link, navigate to that web page. If they tap anywhere else on the block of text, navigate to a detail view.
I am using Linkable to detect the links. That portion works as expected, but the other tap does not.
Here is what I have tried:
return InkWell(
onTap: () {
AutoRouter.of(context).push(
// Detailed Page
);
}
},
child: Container(
padding: const EdgeInsets.all(16.0),
child: Linkable(
text: myText,
textColor: Colors.black,
linkColor: Colors.blue,
),
),
);
You can use the RichText widget to break your texts into TextSpans. Add the following code to the TextSpan you want to make clickable.
TextSpan(
text: "Clickable text.",
style: TextStyle(
color: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () {
doStuff();
},
),
I am trying to align these text widgets vertically so that they are perfectly centered between the two lines. However, flutter sees the size of the text widget to be as big as the red rectangle behind the text (Background color of text only for illustration purposes) because of the decender line. However, this results in the text looking a bit offcentered. Is there a way to align the text using the baseline and not the decender?
Play with the text height (line-height)
Text('Hey There',
style: TextStyle(height: 5, fontSize: 10),
)
You can try Align widget just wrap your text with Align and provide your alignment
Wrap it in a center widget
Center(
child: Text(
"PAYMENT",
style: TextStyle(
backgroundColor: Colors.blue,
fontSize: 20,
),
textAlign: TextAlign.center,
),
)
Dartpad:
https://dartpad.dev/flutter?null_safety=true&id=3b0bf085892c1867012f5dd00713ccf7
I think what your looking for is to use the "CrossAxisAlignment" attribute in the Column widget.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Delivery'),
Text('Payment'),
Text('Total'),
],
)
I want to create a simple animation.
When I click one of this elements, the selected item must grow larger maybe with an animation, and the others they will have to decrease.
I use a GestureDetector()
GestureDetector(
onTap: () => {},
child: Column(children: <Widget>[
Image(
image: AssetImage('images/one.png'),
height: 80,
),
Text(
"One",
textAlign: TextAlign.center,
style: TextStyle(
color: kBlueColor,
fontWeight: FontWeight.bold,
fontSize: 30),
),
]),
),
Check out this tutorial on animation.
You are going to want to create an animation controller. The animation controller will let you play an animation. You will also want to use the transform widget. This will allow the picture that you are using to expand or move when the animation controller is activated. Also check out this tutorial. It's from flutter Europe and it goes in depth on animations.
I am using Flutter programming. I need to display a title and a button next to the title. If the text length is less button also should display next to the text. If text length is more i want to fix the text length as maximum 200px and need to show the button next to the title.
I am using the below code. And working fine with the less text length.
Problem is: If text length is more, then my button is moving out of screen. You can see the behaviour in the below attached image.
Row(
children: <Widget>[
Container(
child: RichText(
overflow: TextOverflow.ellipsis,
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.white), text: model.title),
),
),
Text("My Button"),
],
)
You can put maximum characters
text.substring(0,150)
I think there's no maxLength property for RichText and Text widget. If you are using RichText class, you'll have maxLines property that can be used. I tried to recreated your case and wrapped RichText widget with Flexible widget that lets the child widget to use only the minimum available space. But I wasn't able to replicate the error you mentioned. The long text I used gets ellipsis and the button doesn't go out of the screen. Note that I also used maxLines property which if you set to 2, will wrap the long text in new line without moving away the button and the long text will be shown as ellipsis. Sample working code below:
body: Center(
child: Row(
children: <Widget>[
Container(
child: Flexible(
child: RichText(
maxLines: 2,
overflow: TextOverflow.ellipsis,
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.white), text: 'I am using Flutter programming. I need to display a title and a button next to the title. If the text length is less button also should display next to the text. If text length is more i want to fix the text length as maximum 200px and need to show the button next to the title.'),
),
)
),
Text("My Button"),
],
)
)
If you set maxLines to 1, the long text will wrap in ellipsis.
Hope this helps.
String addressText = userAddress.address.toString();
if(addressText.length > 22)
addressText = addressText.substring(0,22);
You can check length and split string if exceeds max length.
you can use Expanded or give fixed width to container of rich text, like this with Expanded widget:-
Row(
children: <Widget>[
Expanded(
child: RichText(
overflow: TextOverflow.ellipsis,
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.white), text: model.title),
),
),
Text("My Button"),
],
)