随着flutter组件的版本更新每一个组件的使用方法和作用都有了有些变化。今天我遇到的一个问题让我很头疼,网上找了很多没找到答案,试了好多方法最后找到了解决方法。
问题:flutter MaterialApp 通过theme属性统一设置主题颜色后不起作用。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter企业站实战',
debugShowCheckedModeBanner: false,
//自定义主题
theme: ThemeData(
primaryColor: Colors.redAccent
),
//静态路由配置
routes: <String,WidgetBuilder>{
"app":(BuildContext context) => AppPage(),
"company_info" : (BuildContext context) => Company_info(),//公司信息页面
"ProductPage" : (BuildContext context) => ProductPage(), //首页
},
home: LoadingPage(),//加载页面
);
}
常用的自定义主题是这样,但是我这样写没有看到预期的效果。primaryColor: Colors.redAccent没有任何效果。
theme: ThemeData(
primaryColor: Colors.redAccent
),
解决方法:
需要用colorScheme属性,代码如下:
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter企业站实战',
debugShowCheckedModeBanner: false,
//自定义主题
theme: ThemeData(
colorScheme: const ColorScheme(
primary: Colors.redAccent,//上方标题栏颜色
primaryVariant: Colors.white,
secondary: Colors.green,
background: Colors.white,
error: Colors.red,
brightness:Brightness.light,
onBackground: Colors.pink,
secondaryVariant: Colors.white,
onError: Colors.yellow,
onPrimary: Colors.white,//字体颜色
onSecondary: Colors.redAccent,
onSurface: Colors.redAccent,
surface: Colors.redAccent
// all fields should have a value
)
),
//静态路由配置
routes: <String,WidgetBuilder>{
"app":(BuildContext context) => AppPage(),
"company_info" : (BuildContext context) => Company_info(),//公司信息页面
"ProductPage" : (BuildContext context) => ProductPage(), //首页
},
home: LoadingPage(),//加载页面
);
}
primary: Colors.redAccent,//主题颜色
onPrimary: Colors.white,//主题字体颜色
colorScheme必填选项比较多,都需要写上,否则会报错。这样解决theme设定的主题不起作用的问题。
|