I made an AppTheme
class as follows :
class AppTheme {
static const Color white = Colors.white,
white2 = Color(0x00fefefe),
grey1 = Color(0x00e5e5e5),
grey2 = Color(0x006b718b),
grey3 = Color(0x004b4a5a),
grey4 = Color(0x00AFBEC4),
black = Colors.black,
purple = Color(0x007154b8);
static const TextStyle s1 = TextStyle(
color: AppTheme.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 2.4,
),
s2 = TextStyle(
color: AppTheme.black,
fontSize: 14,
fontWeight: FontWeight.w600,
height: 2.1,
),
s3 = TextStyle(
color: AppTheme.grey3,
fontSize: 12,
height: 1.8,
fontWeight: FontWeight.w500,
),
s4 = TextStyle(
fontSize: 10,
color: AppTheme.purple,
height: 1.5,
fontWeight: FontWeight.w500,
);
static final ThemeData theme = ThemeData(
fontFamily: 'Poppins',
textTheme: const TextTheme(
headlineMedium: s2,
bodyLarge: s1,
bodyMedium: s3,
bodySmall: s4,
),
scaffoldBackgroundColor: grey1,
bottomAppBarColor: white,
);
}
I then provided the AppTheme.theme
to the MaterialApp
for theme. However whenever I am using my custom colors, for example
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
instead of my custom color, I am getting a completely black scaffold. Even when using directly as AppTheme.grey1
I am getting a completely black scaffold. What am I doing wrong and how to fix it?
CodePudding user response:
Change your code for ThemeData like this:
import 'package:flutter/material.dart';
class AppTheme {
static const Color white = Colors.white,
white2 = Color(0x00fefefe),
grey1 = Color(0xffe5e5e5),
grey3 = Color(0x004b4a5a),
grey4 = Color(0x00AFBEC4),
black = Colors.black,
purple = Color(0x007154b8);
static const TextStyle s1 = TextStyle(
color: black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 2.4,
),
s2 = TextStyle(
color: black,
fontSize: 14,
fontWeight: FontWeight.w600,
height: 2.1,
),
s3 = TextStyle(
color: grey3,
fontSize: 12,
height: 1.8,
fontWeight: FontWeight.w500,
),
s4 = TextStyle(
fontSize: 10,
color: purple,
height: 1.5,
fontWeight: FontWeight.w500,
);
static ThemeData lightTheme() {
return ThemeData(
scaffoldBackgroundColor: grey1,
bottomAppBarColor: white,
);
}
}
And inside Main define the theme object like this:
ThemeData theme = AppTheme.lightTheme();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: theme,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
CodePudding user response:
Add a body
parameter, maybe a container()