Themes in Flutter: Part 3
Hi, this is 3rd part of Themes in Flutter series.
Find part 1 here: Themes in Flutter : Part 1
Find part 2 here: Themes in Flutter : Part 2
In the 1st part, we saw 15 parameters of ThemeData class. Those were brightness, visualDensity, primaryColor, primaryColorBrightness, primaryColorLight, primaryColorDark, canvasColor, ascentColor, ascentColorBrightness, scaffoldNBackgroundColor, bottomAppBarColor, cardColor, dividerColor, focusColor.
In the 2nd part, we saw 27 parameters of ThemeData class. Those were hoverColor, hightlightColor, splashColor, splashFactory, selectedRowColor, unselectedWidgetColor, disabledColor, buttonTheme, toggleButtonsTheme, buttonColor, secondaryHeaderColor, textSelectionColor, cursorColor, textSelectionHandleColor, backgroundColor, dialogBackgroundColor, indicatorColor, hintColor, errorColor, toggleableActiveColor, textTheme, primaryTextTheme, accentTextTheme, inputDecorationTheme, iconTheme, primaryIconTheme, accentIconTheme.
Let’s start with 3rd set fo ThemeData parameters.
43. SliderThemeData sliderTheme:
The colors and shapes used to render Slider.
This value can be obtained by SliderTheme.of .
44. TabBarTheme tabBarTheme:
A theme for customizing the size, shape and color of tab bar indicator.
45. TooltipThemeData tooltipTheme:
A theme for customizing the visual properties of Tooltips.
This value can be obtained by TooltipTheme.of .
46. CardTheme cardTheme:
The colors and styles used to render Card.
This value can be obtained by CardTheme.of .
47. ChipThemeData chipThemeData:
The colors and styles used to render Chips.
This value can be obtained by ChipTheme.of .
48. TargetPlatform platform:
The platform the material widgets should adapt to target.
This should be used in order to style UI elements according to platform conventions.
49. MaterialTapTargetSize materialTapTargetSize:
This is used to configure hit test size of certain Material widgets.
50. bool applyElevationOverlayColor:
This is toggle for semi-transparent overlay color on Material surfaces that is used to indicate elevation for dark themes.
If true then a semi-transaparent version of colorScheme.onSurface will be applied on top of color of Material widgets when their Material.color is colorScheme.surface.
If false then the surface color will be used unmodified.
51. PageTransitionsTheme pageTransitionsTheme:
Default MaterialPageRoute transition per TargetPlatform.
52. AppBarTheme appBarTheme:
This is a theme for customizing the color, elevation, brightness, iconTheme, and textTheme of AppBar.
53. BottomAppBarTheme botttomAppBarTheme:
A theme for customizing the shape, elevation, and color of a BottomAppBar.
54. ColorScheme colorScheme:
A set of thirteen colros that can be used to configure the propeties of most components.
55. SnackBarThemeData snackBarTheme:
A theme for customizing the colors, shape, elevations and behavior of a SnackBar
56. DialogTheme dialogTheme:
A theme for customizing shape of Dialog.
57. FloatingActionButtonThemeData floatingActionButtonTheme:
A theme for customizing the shape, elevation, and color of FloatingActionButton.
58. NavigationRailThemeData navigationTheme:
A theme for customizing the background color, elevation, textStyles, and iconThemes of a NavigationRail.
59. Typography typogrpahy:
The color and geometry TextTheme values used to configure textTheme, primaryTextTheme and accentTextTheme.
60. CupertinoThemeData cupertinoOverrideTheme:
Components of the CupetinoThemeData to override from the Material ThemeData adaption
By default, cupertinoOverrideTheme is null and Cueprtino widgets descendant to the Material Theme will adhere to a CupertinoTheme derived from the Material ThemeData.
This cascading effect for individual attributes of the CupertiniThemeData can be overriden using attributes of this cupertinoOverriedTheme.
61. BottomSheetThemeData bottomSheetTheme:
A theme for customizing the color, elevation, and shape of a bottom sheet.
62. PopupMenuThemeData popupMenuTheme:
A theme for customizing the color, shape, elevation, and text style of popup menus.
63. MaterialBannerThemeData bannerTheme:
A theme for customizing the color and textStyles of a MaterialBanner.
64. DividerThemeData dividerTheme:
A theme for customizing the color, thickness, and indents of Dividers, VerticalDividers etc.
65. ButtonBarThemeData buttonBarTheme:
A theme for customizing the appearance and layout of ButtonBar widgets.
66. String fontFamily:
This sets the default fontFamily for any TextStyle.fontFamily that isn’t set directly in the textTheme, primaryTextTheme, or accentTextTheme.
Till then try these themes and tell me if it was easy to make the app’s theme or not!
Full explanation will be on youtube channel PRO Coach.
Keep subscribed on youtube and medium for updates.
If you enjoyed this blog, let me know in the comments below how much useful this blog was to you. I’d be very grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter or Facebook. Thank you!
#HappyCoding #flutter #widgets #crossplatform #tutorial #theme #viveky259 #procoach
