Related
I'm trying to show a widget onFinished countdown timer but I can't seem to make it work.
I've added var reqPIN = false;
And here is my code:
children [
Countdown(
seconds: 3,
build: (_, double time) =>
RichText(
text: TextSpan(
text: 'Reset PIN in ',
style: TextStyle(
color: Theme.of(context).inputDecorationTheme.labelStyle?.color
),
children: <TextSpan>[
TextSpan(
text: time.toString(),
style: TextStyle(
color: Color(0xFF2481CF),
fontWeight: FontWeight.bold
)),
TextSpan(text: ' sec',
style: TextStyle(
color: Theme.of(context).inputDecorationTheme.labelStyle?.color
))
]
),
),
onFinished: () {
setState(() {
reqPIN = true;
});
},
),
SizedBox(
child: Visibility(
visible: reqPIN,
child: Text('Resend PIN',
style: TextStyle(
color: Colors.black
),),
),
)
]
Is there any solution?
onlySelectedBorderPinPut() is not getting called on setState...
to fix this, you can wrap your RichText with a Column, and add your Resend button there, you won't need to have a reqPin bool for managing the state, simply handle it with the remaining time like below
Countdown(
seconds: 3,
build: (_, double time) => Column(
children: [
RichText(
...
),
Visibility(
visible: time == 0,
child: SizedBox(
child: Text('Resend PIN',
style: TextStyle(color: Colors.black
)
),
),
),
],
),
),
Try this one.
if (reqPIN)
SizedBox(
child: Text('Resend PIN', style: TextStyle(color: Colors.black)),
),
How can I tap on the second Text Span area even if it has rich text property? I am new to flutter driver and I found out rich text not supported...
Padding(
padding: const EdgeInsets.only(top: 16.0, bottom: 24.0),
child: Text.rich(
TextSpan(
text: s.refill_description,
style: primaryTextTheme.textSmall,
children: [
if (user.paymentDetails?.type == LegalEntityType.private)
TextSpan(
text: s.withdraw_label,
style: primaryTextTheme.textSmall.copyWith(color: FlAppStyles.linkTextColor),
recognizer: TapGestureRecognizer()..onTap = () => showRefundScreen(context),
)
You can do it like this
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Single tap',
style: TextStyle(color: Colors.red[300]),
recognizer: TapGestureRecognizer()..onTap = () {
// Single tapped.
},
),
],
),
)
I am trying to create a Custom dialog when the text is clicked. but dialog is not creating.
below adding the Dialog box implementation code
child: new Center(
child: new RichText(
text: new TextSpan(
children: [
new TextSpan(
text: 'Accept the ',
style: new TextStyle(color: Colors.black),
),
new TextSpan(
text: 'Terms & Conditions',
style: new TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold),
recognizer: new TapGestureRecognizer()
..onTap = () {
CustomDialogBox(
title: "Custom Dialog Demo",
descriptions: "Hii all this is a custom dialog in flutter and you will be use in your flutter applications",
text: "Yes",
);
},
),
],
),
),
),
adding Custom Dialog Code. creating as new widget in new dart page and importing in the application.
we need it as a widget which we can use many times in the app.
so creating in a new dart page.
class CustomDialogBox extends StatefulWidget {
final String title, descriptions, text;
final Image img;
const CustomDialogBox({Key key, this.title, this.descriptions, this.text, this.img}) : super(key: key);
#override
_CustomDialogBoxState createState() => _CustomDialogBoxState();
}
class _CustomDialogBoxState extends State<CustomDialogBox> {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Constants.padding),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
}
contentBox(context){
return Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: Constants.padding,top: Constants.avatarRadius
+ Constants.padding, right: Constants.padding,bottom: Constants.padding
),
margin: EdgeInsets.only(top: Constants.avatarRadius),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(Constants.padding),
boxShadow: [
BoxShadow(color: Colors.black,offset: Offset(0,10),
blurRadius: 10
),
]
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(widget.title,style: TextStyle(fontSize: 22,fontWeight: FontWeight.w600),),
SizedBox(height: 15,),
Text(widget.descriptions,style: TextStyle(fontSize: 14),textAlign: TextAlign.center,),
SizedBox(height: 22,),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: (){
Navigator.of(context).pop();
},
child: Text(widget.text,style: TextStyle(fontSize: 18),)),
),
],
),
),
],
);
}
}
Nothing wrong with CustomDialogBox ... your onTap method is incorrect in the question posted.
You should do
showDialog(
context: context,
builder: (BuildContext context) => CustomDialogBox(),
)
You need wrap 'CustomDialogBox' with 'showDialog()' widget.
child: new Center(
child: new RichText(
text: new TextSpan(
children: [
new TextSpan(
text: 'Accept the ',
style: new TextStyle(color: Colors.black),
),
new TextSpan(
text: 'Terms & Conditions',
style: new TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold),
recognizer: new TapGestureRecognizer()
..onTap = () {
showDialog(
context: context,
builder: (BuildContext context) {
return CustomDialogBox(
title: "Custom Dialog Demo",
descriptions: "Hii all this is a custom dialog in flutter and you will be use in your flutter applications",
text: "Yes",
);
}
);
},
),
],
),
),
),
I am trying to create the picture below in Flutter. As you can see, I need a link and an image icon. However, I am getting the "range" error in the console.
Here a snippet of my code
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.asset(
"assets/images/checkbox-check.png",
),
Expanded(
child: Container(
child: Wrap(
children: [
RichText(
text: new TextSpan(
children: [
TextSpan(
text: 'Email opportunities. ',
style: TextStyle(
color: Palette.DARK_BLUE, fontSize: 16.0),
),
TextSpan(
text: 'privacy policy',
style: TextStyle(
color: Palette.DARK_BLUE,
decoration: TextDecoration.underline),
recognizer: TapGestureRecognizer()
..onTap = () {
launch();
},
),
TextSpan(
text: ' and ',
),
TextSpan(
text: 'terms of use',
style: TextStyle(
decoration: TextDecoration.underline),
recognizer: TapGestureRecognizer()
..onTap = () {
launch();
},
),
WidgetSpan(
child: Icon(
Icons.info_outline,
color: Colors.red,
),
)
],
),
),
],
),
),
)
],
);
}
}
Is there another method to create my UI? I don't get an error screen but I see the error in the console. I have a wrap in the widget tree but don't think I need it. but never the less, same issue if I remove it.
This is a Flutter issue when you use TextSpan with recognizer together with WidgetSpan: https://github.com/flutter/flutter/issues/51936
A workaround is to wrap RichText in ExcludeSemantics:
ExcludeSemantics(
excluding: true,
child: RichText( ... ),
),
I want to show an icon in text widget. How do I do this ?
The following code only shows the IconData
Text("Click ${Icons.add} to add");
Flutter has WidgetSpan() to add a widget inside the RichText().
Example use:
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Click ",
),
WidgetSpan(
child: Icon(Icons.add, size: 14),
),
TextSpan(
text: " to add",
),
],
),
)
Above code will produce:
You can treat the child of WidgetSpan like the usual widget.
Screenshot:
Using Wrap:
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Text('Click'),
Icon(Icons.add),
Text('to add'),
],
)
Using Row:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('Click'),
Icon(Icons.add),
Text('to add'),
],
)
Using Text.rich:
Text.rich(
TextSpan(
children: [
TextSpan(text: 'Click'),
WidgetSpan(child: Icon(Icons.add)),
TextSpan(text: 'to add'),
],
),
)
An alternative might be to use emoji.
In Dart, strings supports escape sequences for special characters. For unicode emoji, you can use \u and curly braces with emoji hex code inside. Like this:
Text('Click \u{2795} to add')
The result is:
You can find a complete unicode emoji list here: http://unicode.org/Public/emoji/1.0/emoji-data.txt
Row Widget can be one solution for this issue, but you have to use different widgets to make it happen.
Follow below example.
Row(
children: <Widget>[
Text("Hi"),
Icon(Icons.add),
Text("Hello")
]
)
Another option is String.fromCharCode(int charCode)
This is icons.dart created by flutter team and charCodes are can found here.
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.black,
fontSize: 24.0,
),
text: 'This is alarm icon : ',
children: <TextSpan>[
TextSpan(
text: String.fromCharCode(0xe190), //<-- charCode
style: TextStyle(
fontFamily: 'MaterialIcons', //<-- fontFamily
fontSize: 24.0,
color: Colors.red,
),
)
],
),
)
And result :
I think it's better to use the Row widget. here is an example
Row(
children: [
Icon(Icons.download_rounded),
Text(" Download")
],
)
You can use WidgetSpan() on Text.rich().
Here's a link for InlineSpan-class.
You can use this Package to achieve this.
I am not able to find the pub of this package.
Here is the Implementation.
RealRichText(
[
TextSpan(
text: "A Text Link",
style: TextStyle(color: Colors.red, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked.");
},
),
ImageSpan(
AssetImage("packages/real_rich_text/images/emoji_9.png"),
imageWidth: 24,
imageHeight: 24,
),
ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
imageWidth: 24,
imageHeight: 24,
margin: EdgeInsets.symmetric(horizontal: 10)),
TextSpan(
text: "哈哈哈",
style: TextStyle(color: Colors.yellow, fontSize: 14),
),
TextSpan(
text: "#Somebody",
style: TextStyle(
color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked");
},
),
TextSpan(
text: " #RealRichText# ",
style: TextStyle(color: Colors.blue, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked");
},
),
TextSpan(
text: "showing a bigger image",
style: TextStyle(color: Colors.black, fontSize: 14),
),
ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
imageWidth: 24,
imageHeight: 24,
margin: EdgeInsets.symmetric(horizontal: 5)),
TextSpan(
text: "and seems working perfect……",
style: TextStyle(color: Colors.black, fontSize: 14),
),
],
);
You can also check out below issue for more:
Flutter Issue #2022
For simple icons, You can use a Unicode character as regular text, just copy and paste.
You can search and copy Unicodes from this site
Text("Enjoy! 🔎❌💖🔥✅💜😍")
This method will work with any Text widget and package.
You can use this function:
Widget _spanIcon(String text, IconData icon, TextStyle st) {
return Row(
children: [
Text(text,style: st,),
Text(
String.fromCharCode(icon.codePoint), //<-- charCode from icon data
style: TextStyle(
fontFamily: icon.fontFamily, //<-- fontFamily from icon data
fontSize: st.fontSize! + 4.0,//you can increase font size for icon here
color: st.color,
),)
],
);}
and then use it :
_spanIcon('11',Icons.access_alarm, TextStyle(fontSize: 14.0, color: Color.fromARGB(113, 0, 0, 0))),