Display Long form text in Text Widget : Flutter - flutter

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.
""")
]),
),
);

Related

How can i concat text into "Text widget" with "snapshot.data" Flutter

I want to concat text inside a Text widget that contains an snapshot.data, but i couldn't do that for now. This is my code:
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
snapshot.data!.docChanges[index]
.doc['entCourse'],
style: TextStyle(
fontSize: 13,
color: Colors.grey,
),
),
Text(
// i think here would be the text to concat: 'Valoration is:'
snapshot.data!.docChanges[index]
.doc['valCourse'],
style: TextStyle(
fontSize: 8,
color: Colors.yellowAccent,
),
),
],
),
what i want is something like this
You can use string interpolation and make it without + operator
something like this,
Text("this is sample text ${snapshot.data!.docChanges[index].doc["calCourse"]}"),

How can I modify the size of my TextButton so that it is equal to it's child Text widget's height in Flutter?

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.

Flutter: How to add two text lines to one button?

Dear Stackoverflow People,
I need to program a button in Flutter as follows:
How can I do that in Flutter?
I have the problem that TextButton() allows only to add "one line of text". However, I need a title and a description with different font sizes within a button. How can this be done?
Thanks a lot!
You can use Text.rich widget as a TextButton child. I tried on this online IDE and it works.In Text.rich , You can define List<TextSpan> children, and add text spans has different Text Styles . My code sample is here:
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text.rich(
TextSpan(
text: 'Hello', // default text style
children: <TextSpan>[
TextSpan(text: ' beautiful\n', style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),
)
Try below code hope its helpful to you. you can use Inkwell or GestureDetector Widget
InkWell(
onTap: () {
// write here your button pressed function
print('Button Pressed');
},
child: Container(
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(15.0),
),
child: ListTile(
title: Text('Language'),
subtitle: Text('Tap to change'),
),
),
),
Your result screen->
You could create your own button.
Something like this:
GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("text big"),
Text("text small"),
],
),
),
),
You can give "Column" (with your text) to the "child" property of any button.
in your case OutlinedButton
OutlinedButton(
onPressed: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Language',
style: Theme.of(context).textTheme.subtitle1,
),
Text(
'Tap To Change',
style: Theme.of(context).textTheme.caption,
),
],
),
),
and then you can use the style properties of Test Widget to change their style
You can use this
Text("Language\nTap To Change")

How to add iconbutton at the end of the text in Flutter?

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
)
],
),

Overflowing comment text not in alignment

I want to achieve following layout
There is profile picture, followed by username and followed by comment.But if the comment is too long it should starting coming below the username and not from the profile picture.
Following is my code
Row(
children: [
const CircleAvatar(
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCA&usqp=CAU'),
radius: 16,
),
const SizedBox(
width: 10,
),
Text(
'UserName',
style: GoogleFonts.tenorSans(
color: Colors.black),
),
Text(
'The Dram Club is a platform that endeavours to bring whisky enthusiassts & aficionados together for people to enjoy their whiskes',
style: GoogleFonts.tenorSans(
color: Colors.black,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic),
)
],
)
For the above code the comment text gets cuts off if its large so instead of using Row I decided to use Wrap but that is moving my enter comment in a new Row. I just tried wrapping the username and comment text in a Wrap but nothing happens. I tried using Flexible and Expanded widget as well
You can use this code.
Row(
children: [
const CircleAvatar(
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCA&usqp=CAU'),
radius: 16,
),
const SizedBox(
width: 10,
),
Flexible(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Username ', style: TextStyle(fontSize: 18, color: Colors.black)),
TextSpan(text: 'The Dram Club is a platform that endeavours to bring whisky enthusiassts & aficionados together for people to enjoy their whiskes', style: TextStyle( color: Colors.black, fontSize: 16)),
],
),
),
)
],
),
Use RichText class, in this you can add multiple text with different styles. So the idea is
To have a single text, with different styles, one for UserName and other for Comment
children: [
CircleAvatar(
backgroundImage: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTul_FjIE5w2p_VarQyzwaZ1mkOYjQRXcNCA&usqp=CAU'),
radius: 16,
),
SizedBox(
width: 10,
),
// here for User name and Comment
RichText(
text: TextSpan(
text: 'UserName ', // <-- Username text
style: GoogleFonts.tenorSans(color: Colors.black), // <-- User name style
children: <TextSpan>[
// your comment code
TextSpan(text: 'The Dram Club is a platform that endeavours to bring whisky enthusiassts & aficionados together for people to enjoy their whiskes',
style: GoogleFonts.tenorSans(color: Colors.black,fontWeight: FontWeight.bold, fontStyle: FontStyle.italic)))
]
)
)
]