How can I add the iconbutton at the end of the text like this ?
Pic
I use Row widget but the iconbutton is not in the right place, it is not at the end of the text
Pic
This is my code:
Row(
children: [
Expanded(
child: Text(
'All about marketing, lead generation, content marketing and growth hacks',
style: const TextStyle(
fontSize: 12.0, fontWeight: FontWeight.w500),
),
),
IconButton(
icon: Icon(Icons.info),
iconSize: 12.0,
color: Palette.appbar,
onPressed: () {},
),
],
),
Use RichText with TextSpan and WidgetSpan.
WidgetSpan allow to add your own widget as a part of text.
like this :
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: _text, style: _style),
WidgetSpan(
child: _child
)
],
),
Related
I am using get's obx() like below code.
But I want the title to be centered.
But I can't even use "align", so I'm curious how to align it.
title:
Obx(
() => Text.rich(
TextSpan(
text:
"${_questionController.questionNumber.value}. ",
style: TextStyle(fontSize: 15, color: Colors.blue),
children: [
TextSpan(
text: '${Questiontitle[widget.index]}',
style: TextStyle(fontSize: 15, color: Colors.blue),
),
],
),
),
),
Wrap title with Center or with Align and set alignment to Alignment.center.
I am creating an App Login page using Flutter framework and I want the the TextButton as well as the "Forgot password?" text to be horizontally aligned in the screen, but the following code displays the button below the "Forgot Password?" text. I tried modifying the button's height and width parameters as well as modifying the spacing in the Wrap widget but I still didn't get the expected outcome. Wrapping the TextButton with SizedBox widget too didn't worked as it hid the button from the screen. Is there any other way to get the desired outcome?
Part of the screen where the TextButton and "Forgot password?" text is displayed
Wrap(
children: [
Text(
"Forgot password?",
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16.0,
),
),
TextButton(
onPressed: () {},
child: Text(
"Click here",
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16.0,
decoration: TextDecoration.underline,
),
),
),
],
),
if you want to Align your two buttons horizontally, just wrap them with a Row widget, userSizedbox to adjust space between them, and if necessary wrap the Row with Padding to adjust the location of buttons like;
Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Row(
children: [
Text(
"Forgot password?",
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16.0,
),
),
SizedBox(height: 10,),
TextButton(
onPressed: () {},
child: Text(
"Click here",
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16.0,
decoration: TextDecoration.underline,
),
),
),
],
),
),
Try to below code hope its helpful to you. Wrap your Text and TextButton widget inside Row().
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"Forgot password?",
),
TextButton(
onPressed: () {
//Write here your onPressed function call
print('Button Pressed!');
},
child: Text(
"Click here",
),
),
],
),
Your Result Screen->
There is another approach to overcome this with RichText, TextSpan and TapGestureRecognizer.
To use TapGestureRecognizer, you will have to import 'package:flutter/gestures.dart'
RichText(
text: TextSpan(
text: "Forgot password? ",
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16.0,
),
children: [
TextSpan(
text: "Click here",
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 16.0,
decoration: TextDecoration.underline,
),
recognizer: TapGestureRecognizer()
..onTap = () => {},
),
],
),
)
You can use this instead of using a TextButton.
Result is as below.
I'm trying to create Legal pages in my app such as terms and conditions and privacy policy pages.
Does Flutter have a widget that is specifically design to take in long form text besides using the default Text widget? Or is there a hack to this? Perhaps reading from a text file or so?
I'm trying to avoid using multiple Text widgets in my dart file to display my long form legal pages.
Thanks.
Expanded(
child: Text(
'a long text',
overflow: TextOverflow.clip,
),
),
If you have various styling in the Text you can use RichText
RichText(
overflow: TextOverflow.clip
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(text: 'Super long bolded text here', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: 'Super long unbolded text here'),
],
),
)
try this, it helped me with my past knowledge from HTML CSS JS
return Scaffold(
body: SingleChildScrollView(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Privacy Policy",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 32,
)),
IconButton(
icon: Icon(
Icons.close,
),
iconSize: 24,
onPressed: () {
Get.back();
},
)
],
),
),
Text(
"""
formation to us then you agree to provide true,
current, complete and accurate information, and
not to misrepresent your identity. You also
agree to keep Your Information current and to
update Your Information if any of Your
Information changes.
""")
]),
),
);
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))),