in my flutter book app, I fetch a text from a JSON object and display it in PageView.builder. and after it fetches and displays on the first page and when it goes to the next page it duplicates the first page instead of displaying the remaining text file.
Container(
height: height,
width: width,
child: PageView.builder(
itemBuilder: (context, index){
return RichText(
textDirection: TextDirection.rtl,
text: TextSpan(
text: '',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
for (var i = 1; i <= count; i++) ...{
TextSpan(
text: quran.getVerse(widget.id, i, verseEndSymbol: false),
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
fontFamily: 'kitab'),
),
TextSpan(
text: quran.getVerseEndSymbol(i),
style: TextStyle(
color: Colors.cyanAccent,
fontSize: 26,
fontWeight: FontWeight.bold,
fontFamily: 'kitab',
),
),
}
],
),
);
}),
);
how can I split those text and display it on a page?
Related
I want to make specific letter to have a custom font or style in Flutter, is it possible to do that? I only saw tutorial on how to make specific word in Flutter to have custom style by using RichText. Is there anyway to make a specific letter instead of a word?
for example
𝒜n elephant
In this case the letter A will have a custom font but the letter n does not.
The text parameter in a TextSpan can be omitted. So for what you want, you can just use the children parameter and have the first child be a single character.
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'L',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
const TextSpan(text: 'ike this?')
],
),
),
You can do like this :
Text.rich(
TextSpan(text: 'This is textspan ', children: <InlineSpan>[
TextSpan(
text: 'Widget in flutter',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)
]),
)
You can customize it any way you want :D
String myString = "Helloooo";
String specialChar = "o";
RichText(
text: TextSpan(
children: myString.characters.map((e) {
return TextSpan(
text: e,
style: e == specialChar
? TextStyle(
color: Colors.red, fontWeight: FontWeight.bold, fontSize: 40)
: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold, fontSize: 50),
);
}).toList()));
I want to make a custom pagination for swiper in flutter. Where i want to display 2 words in pagination rather then dots or fractions can anyone tell me a better way to do it as in my code i can't change the page on clicking on my custom pagination.
My code:-
Swiper(
controller: swiperController,
itemCount: 2,
itemBuilder: (context,index){
return index==0?A(context):B(context); //Here A and B are 2 pages to swipe between
},
pagination: new SwiperPagination(
margin: new EdgeInsets.all(0.0),
builder: new SwiperCustomPagination(builder:
(BuildContext context, SwiperPluginConfig config) {
return Container(
padding: EdgeInsets.only(bottom: 10),
child: config.activeIndex==0?Text.rich(
TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
TextSpan(text: "First ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
TextSpan(text: " Second ",recognizer: TapGestureRecognizer()..onTap=(){},style: TextStyle(fontSize: 17.0,),)
])
):Text.rich(
TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
TextSpan(text: "First ",style: TextStyle(fontSize: 17.0,),),
TextSpan(text: " Second ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),)
])
),
);
})),
),
There could be a better option by using pageview.builder() but if you want to make change in this code then simply use recognizer property of TextSpan.
SwiperCustomPagination(builder:
(BuildContext context, SwiperPluginConfig config) {
return Container(
padding: EdgeInsets.only(bottom: 10),
child: config.activeIndex==0?Text.rich(
TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
TextSpan(text: "First ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
TextSpan(
text: " Second ",
recognizer: TapGestureRecognizer()..onTap=(){swiperController.next();},
//added recognizer over here
style: TextStyle(fontSize: 17.0,),)
])
):Text.rich(
TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
TextSpan(
text: "First ",
recognizer: TapGestureRecognizer()..onTap=(){swiperController.next();},
//added recognizer over here
style: TextStyle(fontSize: 17.0,),
),
TextSpan(text: " Second ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),)
])
),
);
})
i'm trying to display the old and the new price inside of a RichText.
if(regularPrice >= discountPrice){
TextSpan(
text: ' $regularPrice',
style: TextStyle(
decoration: TextDecoration.lineThrough,
decorationThickness: 2.85,
fontSize: 15,
ontWeight: FontWeight.bold),
),
TextSpan(
text: ' $discountPrice',
style: TextStyle(
fontSize: 15,
ontWeight: FontWeight.bold),
),
}else{
TextSpan(
text: ' $regularPrice',
style: TextStyle(
fontSize: 15,
ontWeight: FontWeight.bold),
),
}
Can i use this logic inside a RichText?
You can use the spread operator:
class RichTextDiscountedPrice extends StatelessWidget {
static const regularPrice = 100;
static const discountedPriced = 95;
#override
Widget build(BuildContext context) {
final regularPriceTextSpan = TextSpan(text: ' $discountedPriced', style: TextStyle(fontWeight: FontWeight.bold));
final discountedTextSpanList = [
TextSpan(text: '$regularPrice', style: TextStyle(decoration: TextDecoration.lineThrough)),
regularPriceTextSpan
];
return Center(
child: RichText(
text: TextSpan(
text: "Price ",
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
if (regularPrice > discountedPriced) ...discountedTextSpanList else ...<TextSpan>[regularPriceTextSpan],
],
),
),
);
}
}
Note: I edited the styles a little to reduce the number of lines for the example.
This is my buildCountText function in flutter, where i am passing label and count as my arguments, I am using this function to show my count of followers in an app, but I don't know how to format my count if it's value is large in thousands or millions,I don't want to write the whole figure if its in million , I just want to write it as 1M(for example). but I don't know how to format it in that way.
buildCountText(String label, int count) {
return Container(
padding: EdgeInsets.only(top: 5, bottom: 6),
alignment: Alignment.centerLeft,
child: RichText(
text: TextSpan(
//text: label,
style: TextStyle(
fontFamily: "OpenSans", color: Theme.of(context).primaryColor),
children: <TextSpan>[
TextSpan(
text: label,
style: TextStyle(
fontFamily: "OpenSans", fontWeight: FontWeight.w500)),
TextSpan(
text:_isLoading?" ...": ' $count', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),
);
}
Use number formatter. https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html
var f = NumberFormat.compact();
print(f.format(100000)); //<= prints 100K
I am trying to make only the word "Name:" bold in code below, but am unsure as to the best way to do that. I have tried the "textspan" function and putting the two words on seperate lines but this does not seem to be working.
The original code is below:
ListTile(
leading: Icon(
Icons.book,
color: Colors.grey,
),
title: Text("Name: Timmy",
style: theme.textTheme.body1),
),
You should use RichText with TextSpan like this
Widget build(BuildContext context) {
TextStyle defaultStyle = TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 20.0);
return RichText(
text: TextSpan(
style: defaultStyle,
text: "Name: ",
children: <TextSpan>[
TextSpan(text: 'Timmy', style: TextStyle(fontWeight: FontWeight.normal)),
],
),
);
}
or like this
Widget build(BuildContext context) {
TextStyle defaultStyle = TextStyle(color: Colors.black, fontSize: 20.0);
return RichText(
text: TextSpan(
style: defaultStyle,
children: <TextSpan>[
TextSpan(text: 'Name: ', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: 'Timmy'),
],
),
);
}