Hi I made a scroll list view and get weird flickering issues the text that is centered get very small but I set a font-size to all the items. Also I added a magnifier with the value of 0.1, a diameter radius of 6.5 and a item extent of 200.
Thank you for your help
class _CalendarState extends State<Calendar> {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.blueGrey,
body: ListWheelScrollView(
children: [
Text(
"2020",
style: TextStyle(fontSize: 130),
),
Text(
"2021",
style: TextStyle(fontSize: 130),
),
Text(
"2022",
style: TextStyle(fontSize: 130),
),
Text(
"2023",
style: TextStyle(fontSize: 130),
),
Text(
"2024",
style: TextStyle(fontSize: 130),
),
Text(
"2025",
style: TextStyle(fontSize: 130),
),
Text(
"2026",
style: TextStyle(fontSize: 130),
),
Text(
"2027",
style: TextStyle(fontSize: 130),
),
Text(
"2028",
style: TextStyle(fontSize: 130),
),
Text(
"2029",
style: TextStyle(fontSize: 130),
),
Text(
"2030",
style: TextStyle(fontSize: 130),
)
],
itemExtent: 200,
useMagnifier: true,
magnification: 0.1,
diameterRatio: 6.5,clipBehavior: Clip.antiAlias,
),
),
);
}
}
change magnification grater then 1.0
magnification property have default value is 1.0, which will not change anything. If the value is > 1.0, the center item will be zoomed in by that rate, and it will also be rendered as flat, not cylindrical like the rest of the list. The item will be zoomed out if magnification < 1.0.
Related
I am implementing a showcase widget but I want to place the widget on top of the text. How can I achieve this?
This is the code:
Showcase(
key: keys,
overlayOpacity: 0,
overlayColor: Colors.transparent,
title: "New!",
titleTextStyle: TextStyle(fontSize: 12),
shapeBorder: const CircleBorder(),
showcaseBackgroundColor: Color(0xfffcecaf),
descTextStyle:
const TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
description: "Tap to Learn more",
child: Container(
child: Text(
"xyz",
style: TextStyle(
fontSize: 20,
height: 1.2,
color: AppColors.PRIMARY_COLOR,
),
),
),
),
I would like to make this in Flutter:
My code:
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text('Total', style: TextStyle( color: Color(0xFF68B762)),),
Text('Km', style: TextStyle( color: Color(0xFF68B762)),),
],),
const Text('612', style: TextStyle(fontSize: 30, fontFamily: SecondaryFontMedium, color: Color(0xFF68B762)),),
],),
Result:
Add \n between "Total" and "Km". Use like this way,
Row(
children: [
Text('Total\nKm', textAlign: TextAlign.end, style: TextStyle(color: Color(0xFF68B762))),
Text('612',
style: TextStyle(
fontSize: 30,
fontFamily: SecondaryFontMedium,
color: Color(0xFF68B762))),
],
)
Result:
If you want the Total and Km closer together you could try setting a height in the style. For example
Text('Total', style: TextStyle(height: 1, color: Color(0xFF68B762))),
Text('Km', style: TextStyle(height: 1, color: Color(0xFF68B762)),),
result:
I don't know if the error is the spacing, or that the letters on the left are not aligned, but I got something like this :
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40, // change this
color: Colors.white,
child: FittedBox( // this is important
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'Total',
style: TextStyle(color: Color(0xFF68B762)),
),
Text(
'Km',
style: TextStyle(color: Color(0xFF68B762)),
),
],
),
),
),
Container(
height: 40, // change this
color: Colors.white,
child: const FittedBox( // this is important
child: Text(
'612',
style: TextStyle(
height: 1, // this is important
fontSize: 45,
color: Color(0xFF68B762),
),
),
),
),
],
)
What I did was to add both Container with some equal size (40 for example), then using the Widget FittedBox makes that when you lower the height of the container, the letter adapts and you don't have problems...
Now in the second letter to remove the "padding" is added the height : 1 in the TextStyle, if you can read more of it would be good so you don't have problems but basically it makes it possible to align with the left letters.
Try to edit the height Container and you'll see
try this,
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Total\nKm',
textAlign: TextAlign.right,
style: TextStyle(color: Color(0xFF68B762)),
),
SizedBox(
width: 5,
),
Text(
'612',
style: TextStyle(
fontSize: 30,
// fontFamily: SecondaryFontMedium,
color: Color(0xFF68B762)),
),
],
),
),
),
);
Happy Coding!
This is my introScreen.dart, I want to set a color of PageViewModel Title & body text in Flutter.
I am tried this line of code style: TextStyle(fontSize: 20, color: Colors.white), but it could be error.
how we can set the color of PageViewModel Title & body text in Flutter?
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.only(top: 100),
child: IntroductionScreen(
pages: [
PageViewModel(
image: LottieBuilder.asset("assets/animations/1.json"),
title: "Welcome to $appname",
body: "I will take you around to see what's so exciting about $appname",
),
PageViewModel(
image: LottieBuilder.asset("assets/animations/2.json"),
title: "Privacy Protection",
body: "Internet access is mind-free, we'll keep you safe",
),
PageViewModel(
image: LottieBuilder.asset("assets/animations/3.json"),
title: "Fast and Limitless!",
body: "We provide you the without limits",
),
],
showSkipButton: true,
onDone: () {
Preferences.init().then((value) {
// ignore: invalid_use_of_protected_member
rootState!.setState(() {
value.saveFirstOpen();
});
});
},
1. Change PageViewModel Text Colour:
PageViewModel(
title: "Title of first page",
body: "Here you can write the description of the page, to explain someting...",
image: const Center(child: Icon(Icons.android)),
decoration: const PageDecoration(
titleTextStyle: TextStyle(color: Colors.orange),
bodyTextStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
),
)
2. Change PageViewModel Background:
PageViewModel(
title: "Title of first page",
body: "Here you can write the description of the page, to explain someting...",
image: Center(child: Image.asset("res/images/logo.png", height: 175.0)),
decoration: const PageDecoration(
pageColor: Colors.blue,
),
)
You can refer to the pub.dev documentation for more information on this.
Try this inside PageViewModel:
titleWidget: Text(
"Welcome to $appname",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: appColorYellow),
),
bodyWidget: Text(
"I will take you around to see what's so exciting about $appname",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: appColorYellow),
),
In the following code I'd like to align the name 'Jonny Bas' and '#coder' to leftmost
body: Column(
children: [
Center(
child:Text(
'Information',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
SizedBox(height: 100),
Text(
'Praveen Kumar',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color:Colors.black,
),
),
Text(
'Coding star- 4',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
backgroundColor: Colors.grey,
);
}
You can use 'Align' widget or 'positioned' widget if you want to make change in only one or two widget but if want to give all of widgets the same alignment of parent widget column then you can use MainAxisAlignment and CrossAxisAlignment with specified attributes of left/right/etc...
Check the documentation links below for more info on how to use them,
https://api.flutter.dev/flutter/widgets/Align-class.html
https://api.flutter.dev/flutter/widgets/Positioned-class.html
I have this UI :UI
And the text is showing this yellow bar, even when I set the maxlines to 3..
I put them in a container and its still like this!
child: Container(
height: 150,
width: 200,
child: Column(children: [
Text(
allRecipes[index].name,
style: TextStyle(color: Colors.black54,
fontSize: 20,),
),
Text(
allRecipes[index].about,
softWrap: true,
maxLines: 3,
style: TextStyle(
fontSize: 14,)
),
Also, I need help from you so I can make more space between the food cards??
Its because your Container Height.
try to increase this and check,
your Container height is 150
increase this 200 or 250. as per your design requirement.
Container(
height: 250,//like this
width: 200,
child: Column(children: [
Text(
allRecipes[index].name,
style: TextStyle(color: Colors.black54,
fontSize: 20,),
),
Text(
allRecipes[index].about,
softWrap: true,
maxLines: 3,
style: TextStyle(
fontSize: 14,)
),
]
)