Comments (4)
@rydmike thank you very much for your detailed explanation.
from flex_color_scheme.
Hi @PTLam25 thanks for your question.
Yes it is a bit tricky actually to add custom text theme. Basically you have to do the same steps as when you already have a ThemeData()
object and want to create a copy with a new TextTheme
by using both copyWith
and merge
.
For more details please see this issue and details there: #15
It also has a link to a similar more detailed discussion in another issue, here: #14 (comment)
To help out with this frequently asked question (and I want the feature too 😃 ), I am adding and exposing textTheme
property in the next release of FlexColorScheme, along with some other new features and themes, I'm actually working on now. The textTheme part is already done, including tests for it, works fine. I have not pushed it or released it yet though.
The feature will make it a lot simpler, since you can then just pass in the from default modified textTheme
properties directly, just as you can with ThemeData
.
However to do it right now, the link above should help you with some examples. The solution is basically the same hoops you have to go through when you want modify text theme of a ThemeData
object that you already have. The only issue with it, is that it is cumbersome and quite tricky to do so in Flutter.
Hope this helps, let me know if you need any more assistance with it.
from flex_color_scheme.
with your example textTheme
it would look like this
// Light theme with custom text theme
final ThemeData myLightTheme = FlexColorScheme.light().toTheme().copyWith(textTheme: const TextTheme(
bodyText1: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
),
bodyText2: TextStyle(
fontSize: 16.0,
),
headline2: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w700,
),
headline1: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
),
subtitle2: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w700,
),
headline6: TextStyle(
fontSize: 36,
fontWeight: FontWeight.w700,
),
),
).merge(Typography.material2018(platform: defaultTargetPlatform).black),
from flex_color_scheme.
In the next version 4.0.0 you will be able to do this:
// Custom text theme
const TextTheme customText = const TextTheme(
bodyText1: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
),
bodyText2: TextStyle(
fontSize: 16.0,
),
headline2: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w700,
),
headline1: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
),
subtitle2: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w700,
),
headline6: TextStyle(
fontSize: 36,
fontWeight: FontWeight.w700,
),
);
// Light theme with custom text theme
final ThemeData myLightTheme= FlexColorScheme.light(
textTheme: customText,
).toTheme;
// Also a new syntax via an extension available, you can you use e.g.
// FlexThemeData.dark and don't need to do a .toTheme from the FlexColorScheme.dark
final ThemeData myDarkTheme= FlexThemeData.dark(
textTheme: customText,
);
Should be much simpler and nicer to use.
from flex_color_scheme.
Related Issues (20)
- Provides copywith for FlexScheme HOT 2
- Provides parameters to make the android status bar transparent HOT 1
- Can't copy all theme values from themeColors in themesplayground? This was possible before, and it worked HOT 4
- Add enhanced enum functions to `FlexScheme` to get its associated data and colors
- Building on M1 causes error HOT 2
- How to set status bar icon black ? HOT 2
- Define card shape in FCS? HOT 2
- Error: Type argument 'double' doesn't conform to the bound 'Enum?' of the type variable 'T' on 'EnumProperty'. HOT 4
- How to set a new scaffold background color with opacity HOT 1
- NavigationDrawerDestination items do not follow theme background HOT 3
- How to set tab bar indicator color at Material App theme level? HOT 1
- The example should be updated when PersistentBottomSheetController's type param has been removed HOT 2
- Add examples of Card.outlined and Card.filled in Playground HOT 3
- useMaterial3: true, doesn't work for dialogs HOT 4
- Theme for Vision Pro
- Google Fonts nit HOT 3
- Support tone-based surface and surface container ColorScheme roles HOT 1
- Using FlexColorScheme themedSystemNavigationBar I can set the system navigation bar styles, but unable to set the style of the status bar at the same time after use HOT 1
- Incomplete Theme Playground "Hot Reload Playground"
- Lack of inputDecoratorSuffixIconSchemeColor properties HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flex_color_scheme.