Error is
The method 'Style.textStyle' has fewer positional arguments than those
of overridden method 'StyleHook.textStyle'. TextStyle textStyle(Color
color)
Here is the problem #override TextStyle textStyle(Color color) { return TextStyle(color: color);
class Style extends StyleHook {
#override
double get activeIconSize => 28;
#override
double get activeIconMargin => 10;
#override
double get iconSize => 20;
#override
TextStyle textStyle(Color color) {
return TextStyle(color: color);
}
}
Your error says exactly what's wrong. StyleHook expects a Color and a String? as argument for the textStyle function. You extend StyleHook and override that function but are not providing the same arguments for it. It needs to look like
TextStyle textStyle(Color color, String? s) {
Related
I need to use theme extinction for colors for example inside theme extension for LargeBodyTextStyle
#immutable
class BodyLargeStyle extends ThemeExtension<BodyLargeStyle> {
final Color? color;
final double? fontSize;
final double? lineHeight;
final FontWeight? fontWeight;
final String? fontFamily;
const BodyLargeStyle({
required this.color,
required this.fontSize,
required this.lineHeight,
required this.fontWeight,
required this.fontFamily,
});
#override
ThemeExtension<BodyLargeStyle> copyWith() {
// TODO: implement copyWith
throw UnimplementedError();
}
#override
ThemeExtension<BodyLargeStyle> lerp(
ThemeExtension<BodyLargeStyle>? other, double t) {
// TODO: implement lerp
throw UnimplementedError();
}
static BodyLargeStyle bodyLargeStyle = BodyLargeStyle(
color: Theme.of(context).extension<CustomColors>()!.color,
fontSize: 12,
lineHeight: 1,
fontWeight: FontWeight.w400,
fontFamily: "any",
);
}
here I need to implement something like this but I don't have the context and I need to get use
of how theme Extention useful when changing from light to dark via verse
How do you apply a method to a static variable from a class. There are certain built in classes in flutter that appear to do something like this.
class UITextStyle {
static const TextStyle body = TextStyle(fontSize: 17);
addColor(Color color) {
TextStyle style = this as TextStyle;
style.merge(TextStyle(color: color));
}
}
Which can then be called like this:
UITextStyle.body.addColor(Color.fromRGBA(0,0,0,1));
However I cannot call that method like that as firstly it is not static, and secondly if it were I would not be able to call it after declaring .body first and would only be able to call it at UITextStyle.addColor(...).
How is this achieved?
you can try this solution , the point is that addColor function is not defined to the TextStyle Type , so to achieve that you need to add this function to the TextStyle class by this extension :
extension TextStyleEx on TextStyle{
TextStyle addColor(Color color) {
return merge(TextStyle(color: color,fontWeight: FontWeight.w600));
}
}
and make this method return TextStyle so you can get instance from the merged ones , cause your static object is final so you can not receive new value on it.
and leave your class like this
class UITextStyle {
static const TextStyle body = TextStyle(fontSize: 17);
}
use this class and the saved static object to get new TextStyle with the old and the new TextStyles.
for test run this in main , will clear the previous example :
TextStyle mergedStyles = UITextStyl.body.addColor(Colors.black);
print(mergedStyles);
Thanks to the comments from #pskink I was eventually able to get this functioning.
class UITextStyle {
const UITextStyle(this.style);
final TextStyle style;
static const body = UITextStyle(TextStyle(fontSize: 17));
addColor(Color color) {
TextStyle textStyle = style;
return textStyle.merge(TextStyle(color: color));
}
}
In Dart extensions can have static members.
extension UITextStyle on TextStyle {
static const body = TextStyle(fontSize: 17);
TextStyle addColor(Color color) {
return this.merge(TextStyle(color: color));
}
}
UITextStyle.body.addColor(Color.fromRGBO(0, 0, 0, 1));
Error is
The method 'Style.textStyle' has fewer positional arguments than those
of overridden method 'StyleHook.textStyle'. TextStyle textStyle(Color
color)
'Style.textStyle' ('TextStyle* Function(Color*)*') isn't a valid
override of 'StyleHook.textStyle' ('TextStyle Function(Color,
String?)').
Flutter Channel stable, 3.0.0
environment:
sdk: ">=2.7.2 <3.0.0"
Here is the problem #override TextStyle textStyle(Color color) { return TextStyle(color: color);
class Style extends StyleHook {
#override
double get activeIconSize => 28;
#override
double get activeIconMargin => 10;
#override
double get iconSize => 20;
#override
TextStyle textStyle(Color color) {
return TextStyle(color: color);
}
}
I had a similar problem using convex_bottom_bar.
The solution was posted at the following URL and I followed it and it solved the problem.
Error: The method 'Style.textStyle' has fewer positional arguments than
I looked at the StyleHook definition and found that a String type was optionally specified, so I changed it to accept it as shown below, and the error did not occur.
class Style extends StyleHook {
#override
double get activeIconSize => 30;
#override
double get activeIconMargin => 5;
#override
double get iconSize => 24;
#override
TextStyle textStyle(Color color, String s) {
return TextStyle(
fontSize: 11,
color: Colors.white,
);
}
}
I came from a React world and trying to get my head around Flutter and Dart.
I'm using the Text widget with the same parameters a lot, so it seems reasonable to think of a way to reuse code. I created a wrapper that uses it:
import 'package:flutter/material.dart';
TextStyle getThemeProperty(type, TextTheme textTheme) {
switch (type) {
case 'headline1':
return textTheme.headline1;
case 'headline2':
return textTheme.headline2;
case 'headline3':
return textTheme.headline3;
default:
return textTheme.bodyText2;
}
}
class CustomText extends StatelessWidget {
const CustomText({Key key, this.type, this.text, this.color}) : super(key: key);
final type;
final text;
final color;
#override
Widget build(BuildContext context) {
var textTheme = Theme.of(context).textTheme;
var style = getThemeProperty(type, textTheme);
if (this.color != null) style.color = this.color;
return Text(
this.text,
style: style,
);
}
}
// Usage
CustomText(
text: 'Some Heading',
type: 'headline2',
color: Colors.black
)
The idea is to set the color if the color property is passed as a parameter, but Dart's compiler doesn't like it. It throws me the error: ''color' can't be used as a setter because it's final.
Try finding a different setter, or making 'color' non-final.'
I'm planning to do the same to fontWeight and textAlign properties as well. How am I able to make this work, I mean, to add new props to the style object on demand?
The reason why the dart compiler is unhappy is just because the color property of the TextStyle is declared as final. Therefore to use a new color, you have to create a new instance of the TextStyle.
Luckily, the TextStyle class comes with a copyWith method that returns an edited copy of your TextStyle
final type;
final text;
final color;
#override
Widget build(BuildContext context) {
var textTheme = Theme.of(context).textTheme;
var style = getThemeProperty(type, textTheme);
return Text(
this.text,
// Added this...
style: style.copyWith(color: color ?? style.color),
);
}
As a side note, when making reusable widgets, it's always a good idea to type your parameters. This is because any type of variable can be used. So instead of passing a String for text, you may pass an int
// DON'T DO THIS
final type;
final text;
final color;
// DO THIS
final String type;
final String text;
final Color color;
Also adding the this keyword to reference a variable in a class without variable shadowing is unnecessary.
// DON'T
this.text
// DO
text
Say I have this class:
class AppTheme {
final BuildContext context;
AppTheme(this.context);
TextStyle caption() {
return Theme.of(context).textTheme.caption.copyWith(
color: Colors.black
);
}
}
How can I modify it in a way that I can access caption using:
AppTheme.of(context).caption();
I'm not sure why would you need it that way, when you can already have it easily using
AppTheme(context).caption();
But if you really need it, you can try this:
class AppTheme {
final BuildContext context;
AppTheme._(this.context); // make this constructor private
static AppTheme of(BuildContext context) => AppTheme._(context); // pass context to above constructor
TextStyle caption() {
return Theme.of(context).textTheme.caption.copyWith(color: Colors.black);
}
}
And you can use it with
AppTheme.of(context).caption();