Flutter:将主题(ThemeData)移动到一个单独的文件中

Question

我刚刚在flutter开始一个新项目，对它完全陌生。

Flutter中定义主题的惯例是什么？

我希望有一个单独的主题文件，以保持main.dart的简单。有好的/正确的/经典的方法吗？

目前我的main.dart是这样的：

void main() => runApp(MaterialApp(
initialRoute: '/',
theme: ThemeData(
appBarTheme: AppBarTheme(
color: Colors.teal,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.teal,
)),
scaffoldBackgroundColor: Colors.grey[200],
textTheme: TextTheme(
bodyText1: TextStyle(),
bodyText2: TextStyle(),
).apply(
bodyColor: Colors.teal[800],
)),
routes: {
'/': (context) => Loading(),
'/home': (context) => Home(),
'/alarms': (context) => SetUpAlarm(),
},
));

Answer 1

您可以创建一个类并在那里定义主题，也可以在结尾使用逗号(，(，这样您的代码会更加美观。

class CommonMethod {

ThemeData themedata = ThemeData(
appBarTheme: AppBarTheme(
color: Colors.teal,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.teal,
),
),
scaffoldBackgroundColor: Colors.grey[200],
textTheme: TextTheme(
bodyText1: TextStyle(),
bodyText2: TextStyle(),
).apply(
bodyColor: Colors.teal[800],
));
} 

然后您可以访问此主题作为CommonMethod((.themedata

Answer 2

为了更好地练习Flutter中的主题结构。。。您应该创建一个单独的文件，例如app_themes.dart。您可以在该文件中定义您喜欢的颜色。它将可在整个应用程序中访问。我正在分享一些代码供您参考。

static ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
backgroundColor: Colors.grey[700],
accentColor: Colors.white,
);

static List<ThemeData> _appThemes = [
///Theme 1
ThemeData(
textSelectionHandleColor: Colors.white,
selectedRowColor: Colors.green
),
///Theme 2
ThemeData(
textSelectionHandleColor: Colors.white,
selectedRowColor: Colors.green
),
///Theme 3
ThemeData(
textSelectionHandleColor: Colors.white,
selectedRowColor: Colors.green
),
]