[英]How to set Flutter app theme as to dark by default?
I've created a simple login UI in flutter, but I don't know how to make the overall theme of the app as dark.我在flutter中创建了一个简单的登录UI,但我不知道如何使应用程序的整体主题变得黑暗。 What I mean is that in the future, if I add more functionality to the app, it should all be in the dark theme.
我的意思是,将来,如果我向应用程序添加更多功能,它应该都在黑暗主题中。 Is there any way to do that?
有没有办法做到这一点?
I've used a separate dart file (login.dart) and all the widgets used in my login UI are in this file.我使用了一个单独的 dart 文件 (login.dart),我的登录 UI 中使用的所有小部件都在这个文件中。 I've set the ThemeData as dark in the main dart file (main.dart), but the app is still running in light theme.
我已在主 dart 文件 (main.dart) 中将 ThemeData 设置为深色,但该应用程序仍在以浅色主题运行。
Here's my code:这是我的代码:
main.dart main.dart
import 'package:flutter/material.dart';
import 'package:bidder_login/login.dart';
void main(){
runApp(
MaterialApp(
theme: ThemeData(),
darkTheme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
title: "Basic Login Demo",
home: LoginPage(),
),
);
}
login.dart登录.dart
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 24.0),
children: <Widget>[
SizedBox(height: 80.0),
// Column(
// children: <Widget>[
// Image.asset('assets/login_app.png'),
// SizedBox(height: 25.0),
// Text("Material Login"),
// ],
// ),
//*Username starts here
SizedBox(height: 120.0),
TextField(
decoration: InputDecoration(
labelText: 'Username',
filled: true,
),
),
//*Password starts here
SizedBox(height: 12.0),
TextField(
decoration: InputDecoration(
labelText: 'Password',
filled: true,
),
obscureText: true,
),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
},
),
RaisedButton(
child: Text('Next'),
onPressed: () {
},
)
],
)
],
),
),
);
}
}
You need to use ThemeMode
您需要使用
ThemeMode
theme
will be used by MaterialApp
.MaterialApp
将使用哪个theme
。 SAMPLE CODE示例代码
themeMode: ThemeMode.dark,//Always use the dark mode (if available) regardless of system preference.
themeMode: ThemeMode.light,//Always use the light mode regardless of system preference.
themeMode: ThemeMode.system,//Use either the light or dark theme based on what the user has selected in the system settings.
themeMode: ThemeMode.values,//A constant List of the values in this enum, in order of their declaration.
How To use
ThemeMode
inMaterialApp
如何在
MaterialApp
使用ThemeMode
MaterialApp(
debugShowCheckedModeBanner: false,
theme:
ThemeData(primarySwatch: Colors.blue, brightness: Brightness.light),
themeMode: ThemeMode.dark,
darkTheme: ThemeData(brightness: Brightness.dark),
home: SafeArea(
child:Scaffold(
) ),
);
The recommended method is to use ColorScheme
.推荐的方法是使用
ColorScheme
。
var mode = ThemeMode.light; // or ThemeMode.dark
MaterialApp(
theme: ThemeData.from(colorScheme: ColorScheme.light()),
darkTheme: ThemeData.from(colorScheme: ColorScheme.dark()),
themeMode: mode,
home: //...
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.