In my home page in build widget before return statement I use below code.
If I create an another widget in my home page I have to copy below code before each return statement. If you create another stateless/stateful dart file I need to copy below code again.
My question is How to create a global TextStyle in Flutter? I don't want to change Theme data, all want to use my TextStyle across the my flutter project. Thanks.
TextStyle myNormalStyle = TextStyle(
fontSize: SizerUtil.deviceType == DeviceType.Mobile ? 14.0.sp : 13.0.sp,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Colors.black);
You can easily you that using by using Theme. As described on the flutter docs you can use it like :
MaterialApp(
title: title,
theme: ThemeData(
// Define the default brightness and colors.
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// Define the default font family.
fontFamily: 'Georgia',
// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
)
);
or you can also use DefaultTextStyle widget to provide a default TextStyle to all the children of this widget. Read more about DefaultTextStyle.
1º create a class file:
import 'package:flutter/material.dart';
class MyTextStyle {
static const TextStyle textStyle = TextStyle(
color: Color.fromARGB(255, 247, 240, 201),
fontSize: 20,
fontWeight: FontWeight.bold,
);
}
2º import and use in your screen:
import 'package:MyApp/MyTextStyle.dart';
const Text(
'You have pushed the button this many times:',
style: MyTextStyle.textStyle,
),
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
class CATextStyle extends TextStyle {
static const style = TextStyle();
//const CATextStyle._(TextStyle style) : super(style);
CATextStyle._style(TextStyle style) : super(style);
}
abstract class CATextStyles {
static const _parent = TextStyle();
static final headLine1 =
CATextStyle._style(_parent.copyWith(color: Colors.amber));
}
I want to created class like this but is showing error
i want to know how to use only one textstyle class and reuse that using copywith method
Here is how I do this, Create a separate Directory and name it Constants and inside this create a dart file with the name appstyles.dart. In this class declare all your styles just like the below code.
class AppStyles{
static TextStyle headline1 = TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w300,
fontSize: 40,
);
static const TextStyle headline2 = TextStyle(
fontWeight: FontWeight.w400,
fontSize: 30,
);
static const TextStyle bodyText1 = TextStyle(
fontWeight: FontWeight.w300,
color: Colors.black,
fontSize: 16,
);
static const TextStyle bodyText2 = TextStyle(
color: Colors.black,
fontWeight: FontWeight.w300,
fontSize: 14,
);
}
The same is you use for Container decoration etc e.g
static final kRoundedTContainer = BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(10),
));
And here is how to use these styles
Text(
'Hello World',
style: AppStyles.headline1,
)
Container(
decoration: AppStyles.kRoundedTContainer,
height: 200,
width: 200,
)
You can create TextStyle global class like this.
class CommonFontStyle {
static font12WithRegular({color}) {
return TextStyle(
fontSize: Dimensions.fontSize12,
fontFamily: 'Montserrat Regular',
fontWeight: FontWeight.w500,
color: color);
}
static font12WithMedium({weight}) {
return TextStyle(
fontSize: Dimensions.fontSize12,
fontFamily: 'Montserrat Medium',
fontWeight: weight,
);
}
}
and for use of this you have to add simply this font12WithRegular() to your textStyles.
child: Text(
"Okay",
style: CommonFontStyle.font12WithRegular(),
textAlign: TextAlign.center,
),
How can i change my Texts color immedietly
TextStyle get headingStyle {
return GoogleFonts.lato(
textStyle: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
color:Get.isDarkMode?Colors.white:Colors.black);
}
color changes when i hot reloud but doesn't change when i clicked the button(button changes isDarkMode )
Try put the Obx.
It's create an observable in your code
TextStyle get headingStyle {
return Obx(() => GoogleFonts.lato(
textStyle: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
color:Get.isDarkMode?Colors.white:Colors.black));
}
I was wondering is there is a better way to assign a certain default text style of my Theme to a Text widget than this approach.
Text(
'Hello world',
style: Theme.of(context).textTheme.headline1,
),
I did assume there should be something like a separate Widget or a Text Method Text.headline1 or simply a style Command style: TextStyle.headline1.
But seems I have to go through the Theme.of(context) to get this.
Does anyone have a better solution?
I think yon can't escape some boilerplate. For me this approach looks cleanest
import 'package:flutter/material.dart';
class StyledText extends StatelessWidget {
final String text;
late final TextStyle? Function(BuildContext context)? getStyle;
StyledText.headline1(this.text, {Key? key}) : super(key: key) {
getStyle = (context) {
return Theme.of(context).textTheme.headline1;
};
}
StyledText.headline2(this.text, {Key? key}) : super(key: key) {
getStyle = (context) {
return Theme.of(context).textTheme.headline2;
};
}
// ...
#override
Widget build(BuildContext context) {
return Text(text, style: getStyle?.call(context));
}
}
And use the widget like this
StyledText.headline1("Hello world");
Theme.of returns the ThemeData value specified for the nearest BuildContext ancestor. If you don't use it, then you won't be able to access the theme configuration you may set and benefit from its advantages.
However, you can create a class called Styles where you can access the pre-defined colors, text styles and more:
class Styles {
static const Color primaryColor = Colors.blue;
static const TextStyle headline1 = TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
);
static const TextStyle bodyText1 = TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal,
);
}
Here is an example of using it:
Text(
'Hello world',
style: Styles.headline1,
)
You define all Your Theme Style in Main like this
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
textTheme: TextTheme(
headline1: TextStyle(
color: const Color(0xFF232323),
fontSize: 26.sp,
fontWeight: FontWeight.w500,
fontFamily: "Mont Regular",
),
),
)
Then use like this
Text("A cloud-agnostic solution for Project and HR Management",
style: Theme.of(context).textTheme.headline1)
You can use TextStyle directly:
Text(
'Hello world',
style: TextStyle(color: Colors.black, fontSize: 15.0), // Etc...
),
Theme.of(context) is a great way to go for a variety of reasons, like switching between light and dark themes. I like to create a variable for the theme and text theme to keep things clean and efficient.
Widget build(BuildContext context) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;
return Column(
children: [
Text('Heading Text', style: textTheme.headline1),
Text('Caption Text', style: textTheme.caption),
Text('Body text...', style: textTheme.bodyText1),
],
);
}
I know that functions are independent from any class and static methods are attached to a class. It looks like both of them achieve the same. This leads me to the following question: What are the advantages and disadvantages of them?
I want to create set of functions for offline PIN configuration like setPin, changePin, verifyPin. Do I have to wrap them inside a class as static methods or can I just create them as functions in a Dart file?
There are no clear "Advantages and Disadvantage" of static methods versus functions.
As you have correctly pointed out, the only difference is that static members are connected to a class.
class A {
static bool b() => false;
}
bool c() => true;
The only difference here would be that you need to access the static member via A.b and c can be accessed directly.
Static methods are not even inherited, meaning that class B extends A {} will not allow you to use B.b because b is a static member of A.
Having said that, #jamesdlin pointed out an article for writing good Dart design. This article describes that you should avoid creating classes with only static members and calls it bad design, i.e. not idiomatic Dart:
In idiomatic Dart, classes define kinds of objects. A type that is never instantiated is a code smell.
Coming back to your question, you should probably create your functions as top-level functions if they are not part of an object according to idiomatic Dart design based on the article from the Dart team.
However, you might consider changing the way you store your "PIN configuration" because this sounds like it would be ideal to store this information as an object.
I totally agree that just using classes with static methods is a bad design decision.
It enforces the OO principles but actually does not bring any benefit of OO.
If can not support inheritance and polymorphism then what is the point?
Functions on the other hand can bring more flexibility as dart supports standalone functions like javascript etc..
As an example lets look at a flutter class for creating a custom theme ..
This example is with a static getter..
import 'package:flutter/material.dart';
class CustomTheme {
static ThemeData get lightTheme {
return ThemeData(
primarySwatch: Colors.purple,
fontFamily: 'Quicksand',
errorColor: Colors.purple,
textTheme: ThemeData.light().textTheme.copyWith(
headline6: TextStyle(
fontFamily: 'OpenSans',
fontSize: 18,
fontWeight: FontWeight.bold,
),
button: TextStyle(
fontFamily: 'OpenSans',
color: Colors.white,
fontSize: 18,
),
),
accentColor: Colors.indigo,
appBarTheme: AppBarTheme(
elevation: 12,
textTheme: ThemeData.light().textTheme.copyWith(
headline6: TextStyle(
fontFamily: 'Quicksand-Bold',
color: Colors.white,
fontSize: 18,
),
),
),
);
}
}
Think about writing this with a function like this..
import 'package:flutter/material.dart';
ThemeData myCustomLightTheme() {
final ThemeData _lightTheme = ThemeData.light();
final _appBarTheme = AppBarTheme(
elevation: 12,
textTheme: _lightTheme.textTheme.copyWith(
headline6: TextStyle(
fontFamily: 'Quicksand-Bold',
color: Colors.white,
fontSize: 18,
),
),
);
final _textTheme = _lightTheme.textTheme.copyWith(
headline6: TextStyle(
fontFamily: 'OpenSans',
fontSize: 18,
fontWeight: FontWeight.bold,
),
button: TextStyle(
fontFamily: 'OpenSans',
color: Colors.white,
fontSize: 18,
),
);
return ThemeData(
primarySwatch: Colors.purple,
fontFamily: 'Quicksand',
errorColor: Colors.purple,
textTheme: _textTheme,
accentColor: Colors.indigo,
appBarTheme: _appBarTheme);
}
How to make my own text theme style?
I only find the default text theme like this but it's not enough.
textTheme: TextTheme(
body1: TextStyle(),
body2: TextStyle(),
button: TextStyle(),
caption: TextStyle(),
display1: TextStyle(),
display2: TextStyle(),
display3: TextStyle(),
display4: TextStyle(),
headline: TextStyle(),
overline: TextStyle(),
subhead: TextStyle(),
subtitle: TextStyle(),
title: TextStyle(),
),
I want for example have a text with line through then some other have underline etc
I was thinking to override the body2 for underline style then how to define another style for line through?
Kind Regards
You can create a class to hold your style and then call it from anywhere in your app.
class CustomTextStyle {
static TextStyle display5(BuildContext context) {
return Theme.of(context).textTheme.display4.copyWith(fontSize: 192.0);
}
}
And the use it as
Text(
'Wow',
style: CustomTextStyle.display5(context),
),
Look at question Flutter: Define custom TextStyles for use throughout the app that contains the complete answer referred here.
Here is an alternative using the extension method with the lineThrough:
extension CustomStyles on TextTheme {
TextStyle get error => const TextStyle(decoration: TextDecoration.lineThrough, fontSize: 20.0, color: Colors.blue, fontWeight: FontWeight.bold);
And then you can use it like this:
Text("your text", style: Theme.of(context).textTheme.error)
Since the release of dart 2.7, you can also use an extension method:
extension CustomStyles on TextTheme {
TextStyle get error {
return TextStyle(
fontSize: 18.0,
color: Colors.red,
fontWeight: FontWeight.bold,
);
}
}
Then you can use it like this:
Text(error, style: Theme.of(context).textTheme.error)
You can set the TextStyle() options for further customization. For the specs you need set the decoration option. For underlining:
TextStyle(decoration: TextDecoration.underline)
and for line through:
TextStyle(decoration: TextDecoration.lineThrough)