Some instance member can't be accessed using static access - flutter

Earlier this week I followed some tutorial on Youtube for creating a flutter app, and I got some problems where it says that.
Instance member 'textTheme' can't be accessed using static access.
The problems occur at LandingPage.dart
#override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
return Container(
margin: const EdgeInsets.symmetric(vertical: 20),
child: Column(
children: [
Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.asset(itemData["image"])),
Positioned(
top: 15,
right: 15,
child: BorderBox(
width: 50,
height: 50,
child: Icon(Icons.favorite_border,color: COLOR_BLACK,
),
))
],
),
addVerticalSpace(15),
Row(
children: [
Text("${formatCurrency(itemData["amount"])}",
style: themeData.textTheme.headline1)
],
)
],
)
);}
textTheme.headline1 was imported from constants.dart.
import 'package:flutter/material.dart';
const COLOR_BLACK = Color.fromRGBO(48, 47, 48, 1.0);
const COLOR_GREY = Color.fromRGBO(141, 141, 141, 1.0);
const COLOR_WHITE = Colors.white;
const COLOR_DARK_BLUE = Color.fromRGBO(20, 25, 45, 1.0);
const TextTheme TEXT_THEME_DEFAULT = TextTheme(
headline1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 26),
headline2: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 22),
headline3: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 20),
headline4: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 16),
headline5: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 14),
headline6: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 12),
bodyText1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w500, fontSize: 14, height: 1.5),
bodyText2: TextStyle(
color: COLOR_GREY, fontWeight: FontWeight.w500, fontSize: 14, height: 1.5),
subtitle1: TextStyle(
color: COLOR_BLACK, fontSize: 12, fontWeight: FontWeight.w400),
subtitle2: TextStyle(
color: COLOR_GREY, fontSize: 12, fontWeight: FontWeight.w400)
);
const TextTheme TEXT_THEME_SMALL = TextTheme(
headline1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 22),
headline2: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 20),
headline3: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 18),
headline4: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 14),
headline5: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 12),
headline6: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w700, fontSize: 10),
bodyText1: TextStyle(
color: COLOR_BLACK, fontWeight: FontWeight.w500, fontSize: 12, height: 1.5),
bodyText2: TextStyle(
color: COLOR_GREY, fontWeight: FontWeight.w500, fontSize: 12, height: 1.5),
subtitle1: TextStyle(
color: COLOR_BLACK, fontSize: 10, fontWeight: FontWeight.w400),
subtitle2: TextStyle(
color: COLOR_GREY, fontSize: 10, fontWeight: FontWeight.w400)
);
Thank You and have a good day:))

Related

Use font suggested by material design

I'd like to use this font chosen from material design website into my Flutter mobile app. I've copied the code inside my main as follow.
But I have "undefined name GoogleFonts".
I've downloaded font from here : (https://fonts.google.com/noto/specimen/Noto+Sans?query=noto+sa) and copied the whole downloaded files *.ttf inside a font folder named GoogleFont, and of course added those lines of code inside pubspec.yaml
fonts:
- family: NotoSans
fonts:
- asset: GoogleFonts/NotoSans-Regular.ttf
Code inside main.dart:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
textTheme: TextTheme(
headline1: GoogleFonts.notoSans(
fontSize: 94, fontWeight: FontWeight.w300, letterSpacing: -1.5),
headline2: GoogleFonts.notoSans(
fontSize: 59, fontWeight: FontWeight.w300, letterSpacing: -0.5),
headline3:
GoogleFonts.notoSans(fontSize: 47, fontWeight: FontWeight.w400),
headline4: GoogleFonts.notoSans(
fontSize: 33, fontWeight: FontWeight.w400, letterSpacing: 0.25),
headline5:
GoogleFonts.notoSans(fontSize: 24, fontWeight: FontWeight.w400),
headline6: GoogleFonts.notoSans(
fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
subtitle1: GoogleFonts.notoSans(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
subtitle2: GoogleFonts.notoSans(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
bodyText1: GoogleFonts.notoSans(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
bodyText2: GoogleFonts.notoSans(
fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
button: GoogleFonts.notoSans(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
caption: GoogleFonts.notoSans(
fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
overline: GoogleFonts.notoSans(
fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
),
),
home: LoginPage(),
);
}
}

The named parameter 'title' isn't defined

I get this error for the 'title' on the second line:
The named parameter 'title' isn't defined.
Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'title'.
textTheme: ThemeData.light().textTheme.copyWith(
title: TextStyle(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
You need to use titleLarge, titleMedium and titleSmall in place of title, use .copyWith() constructor.
return MaterialApp(
title: 'MyApp',
theme: Theme.of(context).copyWith(
textTheme: ThemeData.light().textTheme.copyWith(
titleSmall: Theme.of(context).textTheme.titleLarge?.copyWith(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
titleLarge: Theme.of(context).textTheme.titleLarge?.copyWith(...),
titleMedium: Theme.of(context).textTheme.titleLarge?.copyWith(...),
TextTheme does not include title /As you see in the below image:/
TextTheme properties
You can set theme like this
textTheme: TextTheme(
headline1: TextStyle(fontSize: 24, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline2: TextStyle(fontSize: 22, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline3: TextStyle(fontSize: 20, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline4: TextStyle(fontSize: 17, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline5: TextStyle(fontSize: 16, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
headline6: TextStyle(fontSize: 15, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w600),
subtitle1: TextStyle(fontSize: 14, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w500),
subtitle2: TextStyle(fontSize: 12, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.w500),
bodyText1: TextStyle(fontSize: 14, color: lightColors.PRIMARY_TEXT_COLOR, fontWeight: FontWeight.normal),
bodyText2: TextStyle(fontSize: 13, color: lightColors.SECONDARY_TEXT_COLOR, fontWeight: FontWeight.normal),
button: TextStyle(fontSize: 15, color: lightColors.GRAY_COLOR_100)
),
And use it in your App
Text("Text", style: Theme.of(context).textTheme.subtitle1!.copyWith())
With the latest version of Flutter, some theme identifiers changed.
display4 => headline1;
display3 => headline2;
display2 => headline3;
display1 => headline4;
headline => headline5;
title => headline6; // so use headline6 instead of title
subhead => subtitle1;
subtitle => subtitle2;
body2 => bodyText1;
body => bodyText2;
So you can define your Theme like this:
textTheme: ThemeData.light().textTheme.copyWith(
headline6: TextStyle(
fontFamily: 'OpenSans',
fontSize: 20,
fontWeight: FontWeight.bold,
),
and then use it e.g. like this:
Text(
'my text',
style: Theme.of(context).textTheme.headline6,
),
The "title" is now deprecated, use "label" property instead
Documentation:
https://docs.flutter.dev/release/breaking-changes/bottom-navigation-title-to-label

How to set default font color in flutter?

I want to set the default font colour for the flutter app globally. I tried
ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'Gilroy',
textTheme: TextTheme(
bodyText1: TextStyle(),
bodyText2: TextStyle(),
).apply(
bodyColor: const Color(0xff22215B),
displayColor: const Color(0xff22215B),
),
),
Some text is coloured. but Text in Appbar is not applied automatically.
Apply this
ThemeData(
appBarTheme: AppBarTheme(
textTheme: Theme.of(context).textTheme.apply(
bodyColor: const Color(0xff22215B),
displayColor: const Color(0xff22215B),
),
),
textTheme: Theme.of(context).textTheme.apply(
bodyColor: const Color(0xff22215B),
displayColor: const Color(0xff22215B),
),
)
textTheme alone does not affect AppBar. You should use appBarTheme. Try this:
appBarTheme: AppBarTheme(
textTheme: TextTheme(
//...
).apply(
bodyColor: Color(0xff22215B), displayColor: Color(0xff22215B))),
Select your theme at https://rxlabz.github.io/panache_web/#/.
Download the total theme code as well from that website.
Sample Code default font color in flutter?
final ThemeData myTheme = ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
primaryColor: Color( 0xff2196f3 ),
textTheme: TextTheme(
display4: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display3: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display2: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display1: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
headline: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
title: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subhead: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body2: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body1: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
caption: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
button: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subtitle: TextStyle(
color: Color( 0xff000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
overline: TextStyle(
color: Color( 0xff000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
primaryTextTheme: TextTheme(
display4: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display3: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display2: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display1: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
headline: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
title: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subhead: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body2: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body1: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
caption: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
button: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subtitle: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
overline: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
}
Sample Code Full:
import 'package:flutter/material.dart';
final ThemeData myTheme = ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
primaryColor: Color( 0xff2196f3 ),
primaryColorBrightness: Brightness.dark,
primaryColorLight: Color( 0xffbbdefb ),
primaryColorDark: Color( 0xff1976d2 ),
accentColor: Color( 0xff2196f3 ),
accentColorBrightness: Brightness.dark,
canvasColor: Color( 0xfffafafa ),
scaffoldBackgroundColor: Color( 0xfffafafa ),
bottomAppBarColor: Color( 0xffffffff ),
cardColor: Color( 0xffffffff ),
dividerColor: Color( 0x1f000000 ),
highlightColor: Color( 0x66bcbcbc ),
splashColor: Color( 0x66c8c8c8 ),
selectedRowColor: Color( 0xfff5f5f5 ),
unselectedWidgetColor: Color( 0x8a000000 ),
disabledColor: Color( 0x61000000 ),
buttonColor: Color( 0xffe0e0e0 ),
toggleableActiveColor: Color( 0xff1e88e5 ),
secondaryHeaderColor: Color( 0xffe3f2fd ),
textSelectionColor: Color( 0xff90caf9 ),
cursorColor: Color( 0xff4285f4 ),
textSelectionHandleColor: Color( 0xff64b5f6 ),
backgroundColor: Color( 0xff90caf9 ),
dialogBackgroundColor: Color( 0xffffffff ),
indicatorColor: Color( 0xff2196f3 ),
hintColor: Color( 0x8a000000 ),
errorColor: Color( 0xffd32f2f ),
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.normal,
minWidth: 88,
height: 36,
padding: EdgeInsets.only(top:0,bottom:0,left:16, right:16),
shape: RoundedRectangleBorder(
side: BorderSide(color: Color( 0xff000000 ), width: 0, style: BorderStyle.none, ),
borderRadius: BorderRadius.all(Radius.circular(2.0)),
)
,
alignedDropdown: false ,
buttonColor: Color( 0xffe0e0e0 ),
disabledColor: Color( 0x61000000 ),
highlightColor: Color( 0x29000000 ),
splashColor: Color( 0x1f000000 ),
focusColor: Color( 0x1f000000 ),
hoverColor: Color( 0x0a000000 ),
colorScheme: ColorScheme(
primary: Color( 0xff2196f3 ),
primaryVariant: Color( 0xff1976d2 ),
secondary: Color( 0xff2196f3 ),
secondaryVariant: Color( 0xff1976d2 ),
surface: Color( 0xffffffff ),
background: Color( 0xff90caf9 ),
error: Color( 0xffd32f2f ),
onPrimary: Color( 0xffffffff ),
onSecondary: Color( 0xffffffff ),
onSurface: Color( 0xff000000 ),
onBackground: Color( 0xffffffff ),
onError: Color( 0xffffffff ),
brightness: Brightness.light,
),
),
textTheme: TextTheme(
display4: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display3: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display2: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display1: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
headline: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
title: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subhead: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body2: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body1: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
caption: TextStyle(
color: Color( 0x8a000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
button: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subtitle: TextStyle(
color: Color( 0xff000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
overline: TextStyle(
color: Color( 0xff000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
primaryTextTheme: TextTheme(
display4: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display3: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display2: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display1: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
headline: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
title: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subhead: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body2: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body1: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
caption: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
button: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subtitle: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
overline: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
accentTextTheme: TextTheme(
display4: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display3: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display2: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
display1: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
headline: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
title: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subhead: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body2: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
body1: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
caption: TextStyle(
color: Color( 0xb3ffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
button: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
subtitle: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
overline: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
helperStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
hintStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
errorStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
errorMaxLines: null,
hasFloatingPlaceholder: true,
isDense: false,
contentPadding: EdgeInsets.only(top:12,bottom:12,left:0, right:0),
isCollapsed : false,
prefixStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
suffixStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
counterStyle: TextStyle(
color: Color( 0xdd000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
filled: false,
fillColor: Color( 0x00000000 ),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color( 0xff000000 ), width: 1, style: BorderStyle.solid, ),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color( 0xff000000 ), width: 1, style: BorderStyle.solid, ),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color( 0xff000000 ), width: 1, style: BorderStyle.solid, ),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color( 0xff000000 ), width: 1, style: BorderStyle.solid, ),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color( 0xff000000 ), width: 1, style: BorderStyle.solid, ),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Color( 0xff000000 ), width: 1, style: BorderStyle.solid, ),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
),
iconTheme: IconThemeData(
color: Color( 0xdd000000 ),
opacity: 1,
size: 24,
),
primaryIconTheme: IconThemeData(
color: Color( 0xffffffff ),
opacity: 1,
size: 24,
),
accentIconTheme: IconThemeData(
color: Color( 0xffffffff ),
opacity: 1,
size: 24,
),
sliderTheme: SliderThemeData(
activeTrackColor: null,
inactiveTrackColor: null,
disabledActiveTrackColor: null,
disabledInactiveTrackColor: null,
activeTickMarkColor: null,
inactiveTickMarkColor: null,
disabledActiveTickMarkColor: null,
disabledInactiveTickMarkColor: null,
thumbColor: null,
disabledThumbColor: null,
thumbShape: null(),
overlayColor: null,
valueIndicatorColor: null,
valueIndicatorShape: null(),
showValueIndicator: null,
valueIndicatorTextStyle: TextStyle(
color: Color( 0xffffffff ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
tabBarTheme: TabBarTheme(
indicatorSize: TabBarIndicatorSize.tab,
labelColor: Color( 0xffffffff ),
unselectedLabelColor: Color( 0xb2ffffff ),
),
chipTheme: ChipThemeData(
backgroundColor: Color( 0x1f000000 ),
brightness: Brightness.light,
deleteIconColor: Color( 0xde000000 ),
disabledColor: Color( 0x0c000000 ),
labelPadding: EdgeInsets.only(top:0,bottom:0,left:8, right:8),
labelStyle: TextStyle(
color: Color( 0xde000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
padding: EdgeInsets.only(top:4,bottom:4,left:4, right:4),
secondaryLabelStyle: TextStyle(
color: Color( 0x3d000000 ),
fontSize: null,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
secondarySelectedColor: Color( 0x3d2196f3 ),
selectedColor: Color( 0x3d000000 ),
shape: StadiumBorder( side: BorderSide(color: Color( 0xff000000 ), width: 0, style: BorderStyle.none, ) ),
),
dialogTheme: DialogTheme(
shape: RoundedRectangleBorder(
side: BorderSide(color: Color( 0xff000000 ), width: 0, style: BorderStyle.none, ),
borderRadius: BorderRadius.all(Radius.circular(0.0)),
)
),
);

How do I use google fonts on defining a theme in flutter

I am new to flutter.
I installed this library to be able to use google fonts.
Now I need to do it in the theme data definition, and tried like this but it's not allowed
ThemeData appTheme() {
return ThemeData(
...
fontFamily: GoogleFonts.openSans(),
);
}
How do I do this? Thank you very much
Reposting my comment: fontFamily expects a String. Use GoogleFonts.openSans().fontFamily.
Paste the code below in your theme file, and add it to your ThemeData(textTheme: textTheme)
final TextTheme textTheme = TextTheme(
headline1: GoogleFonts.roboto(
fontSize: 97, fontWeight: FontWeight.w300, letterSpacing: -1.5),
headline2: GoogleFonts.roboto(
fontSize: 61, fontWeight: FontWeight.w300, letterSpacing: -0.5),
headline3: GoogleFonts.roboto(fontSize: 48, fontWeight: FontWeight.w400),
headline4: GoogleFonts.roboto(
fontSize: 34, fontWeight: FontWeight.w400, letterSpacing: 0.25),
headline5: GoogleFonts.roboto(fontSize: 24, fontWeight: FontWeight.w400),
headline6: GoogleFonts.roboto(
fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
subtitle1: GoogleFonts.roboto(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
subtitle2: GoogleFonts.roboto(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
bodyText1: GoogleFonts.roboto(
fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
bodyText2: GoogleFonts.roboto(
fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
button: GoogleFonts.roboto(
fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
caption: GoogleFonts.roboto(
fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
overline: GoogleFonts.roboto(
fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
);
This video explains very well how to use themes and fonts in flutter https://youtu.be/stoJpMeS5aY?t=640
In main.dart file add
fontFamily: GoogleFonts.poppins().fontFamily,

Overflow error in date picker in flutter?

I am using the date picker but it's showing a strange overflow text-overflow error.
I know the date picker uses the app Theme to style. But don't know which Theme property is used to style what in the dialogue box.
my Date picker:-
showDatePicker(
ontext: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
astDate: DateTime.utc(2100, DateTime.now().month, DateTime.now().day),
);
my App Theme:-
ThemeData(
primaryColor: Color(0xffE6F5F1),
accentColor: Color(0xFF4EB799),
visualDensity: VisualDensity.adaptivePlatformDensity,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
headline2: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 96,
letterSpacing: -1.5,
fontFamily: "Muli",
),
headline3: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 60,
letterSpacing: -0.5,
fontFamily: "Muli",
),
headline4: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 48,
letterSpacing: 0,
fontFamily: "Muli",
),
headline5: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 34,
letterSpacing: 0.25,
fontFamily: "Muli",
),
subtitle1: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0,
fontFamily: "Muli",
),
headline6: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
letterSpacing: 0.15,
fontFamily: "Muli",
),
subtitle2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
letterSpacing: 0.15,
fontFamily: "Muli",
),
bodyText2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16,
letterSpacing: 0.5,
fontFamily: "Muli",
),
bodyText1: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
letterSpacing: 0.25,
fontFamily: "Muli",
),
button: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 1.25,
fontFamily: "Muli",
),
caption: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12,
letterSpacing: 0.4,
fontFamily: "Muli",
),
overline: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
letterSpacing: 1.5,
fontFamily: "Muli",
),
),
);
What is wrong here, which theme property to style what in Date picker in flutter?
In source code date_picker_dialog.dart
landscape mode use headline5
portrait mode use headline4
final TextStyle dateStyle = orientation == Orientation.landscape
? textTheme.headline5?.copyWith(color: dateColor)
: textTheme.headline4?.copyWith(color: dateColor);
...
final Widget header = DatePickerHeader(
helpText: widget.helpText ?? localizations.datePickerHelpText,
titleText: dateText,
titleStyle: dateStyle,
orientation: orientation,
isShort: orientation == Orientation.landscape,
icon: entryModeIcon,
iconTooltip: entryModeTooltip,
onIconPressed: _handleEntryModeToggle,
);
working demo
full code reduce headline4 font size
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xffE6F5F1),
accentColor: Color(0xFF4EB799),
visualDensity: VisualDensity.adaptivePlatformDensity,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
headline2: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 96,
letterSpacing: -1.5,
fontFamily: "Muli",
),
headline3: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 60,
letterSpacing: -0.5,
fontFamily: "Muli",
),
headline4: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 30,
letterSpacing: 0,
fontFamily: "Muli",
),
headline5: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 34,
letterSpacing: 0.25,
fontFamily: "Muli",
),
subtitle1: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0,
fontFamily: "Muli",
),
headline6: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
letterSpacing: 0.15,
fontFamily: "Muli",
),
subtitle2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
letterSpacing: 0.15,
fontFamily: "Muli",
),
bodyText2: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16,
letterSpacing: 0.5,
fontFamily: "Muli",
),
bodyText1: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
letterSpacing: 0.25,
fontFamily: "Muli",
),
button: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 1.25,
fontFamily: "Muli",
),
caption: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 12,
letterSpacing: 0.4,
fontFamily: "Muli",
),
overline: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
letterSpacing: 1.5,
fontFamily: "Muli",
),
),
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
lastDate: DateTime.utc(2100, DateTime.now().month, DateTime.now().day),
);
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}