标签: flutter-theme

升级到 Flutter 3.16 后,应用栏、背景颜色、按钮大小和空格发生变化

我将 Flutter 版本升级到 3.16。当我运行我的应用程序时,我注意到用户界面发生了很多变化。

  1. 应用栏不再有阴影。当我滚动时,应用程序栏现在带有颜色并且显示时没有阴影。
  2. 原本身体的背景是白色的,现在却染上了一点颜色。
  3. 按钮和空间现在看起来更大了。
  4. 警报对话框、时间选择器、日期选择器和其他材料组件现在看起来有所不同。它们呈现浅紫色(或我正在使用的主题的颜色)。

升级到 Flutter 3.16 前后


如何获得与升级到 Flutter 3.16 之前相同的 UI 外观?

flutter flutter-theme flutter-upgrade flutter-material

28
推荐指数
1
解决办法
6039
查看次数

尝试添加主色时,Flutter ThemeData 主色未从主题更改

我在 LinkedIn Learning 上关注 London App Brewery 的 BMI 计算器应用程序。当尝试将 PrimaryColor 设置为红色时,即使我覆盖了 Primary Color,我的模拟器仍然显示浅蓝色默认 AppBar。这是代码

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: const InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-theme

25
推荐指数
4
解决办法
3万
查看次数

设置亮度时断言失败:Brightness.dark for darkTheme

我收到此错误:

'package:flutter/src/material/theme_data.dart': Failed assertion: line 412 pos 12: 'colorScheme?.brightness == null || brightness == null || colorScheme!.brightness == brightness': is not true.
Run Code Online (Sandbox Code Playgroud)

我在黑暗模式下使用了这个Brightness: Brightness.dark 参数,没有任何问题,直到最近更新。我一次更新了几件事,所以我不确定是什么导致了变化。我现在需要以不同的方式设置我的黑暗模式吗?

当前的深色主题:

darkTheme: ThemeData(
           toggleableActiveColor: Colors.blue,
           visualDensity: VisualDensity.adaptivePlatformDensity,
           textTheme: _textTheme(),
           colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue).copyWith(secondary: Colors.blueAccent),
           brightness: Brightness.dark,
         ),
Run Code Online (Sandbox Code Playgroud)

flutter flutter-theme

13
推荐指数
1
解决办法
7588
查看次数

如何为flutter中的主题切换添加动画?

我想添加动画,以便像电报一样在颤动中将主题从浅色切换到深色,反之亦然:

电报的开关动画

电报的开关动画

来源

在颤振中看不到任何方法,在颤振中可能吗?

感谢任何答案

flutter flutter-layout flutter-animation flutter-theme

10
推荐指数
2
解决办法
2774
查看次数

了解 Flutter + Material 应用程序中使用的默认样式

刚刚开始使用 Flutter + Material 设计。我注意到,当使用 ThemeData 创建主题时,如果我使用如下内容:

ThemeData(
  textTheme: TextTheme(bodyText1: TextStyle(color: Colors.white)),
)
Run Code Online (Sandbox Code Playgroud)

它似乎没有在带有白色文本小部件的简单 GridView 中为文本着色。但是,如果我改变上面的内容来使用bodyText2它。

bodyText2在应用程序中使用文本背后的逻辑是什么?有没有一个好地方可以参考在主题情况下使用哪些文本样式名称以及为什么?这些只是通过反复试验获得的知识,还是有一些很好的包罗万象的规则来确定在哪种情况下使用哪种样式?

谢谢。

dart material-design flutter flutter-theme

10
推荐指数
1
解决办法
3773
查看次数

更改浅色主题中的图标颜色没有任何影响

我正在编写一个颤振应用程序,我正在尝试为浅色和深色主题定义自己的主题。使用 android studio 进行编码并使用附带的常规 android 模拟器进行测试。

我注意到,当我在深色主题中更改图标颜色时,它可以工作并看到所需颜色的图标,当模拟器设置为浅色主题时,图标的颜色不会改变。

这是我的深色主题代码,可以正常工作:

import 'package:flutter/material.dart';

class DarkTheme {
  DarkTheme._();

  static const Color _iconColor = Colors.red;
  static const Color _darkPrimaryColor = Colors.black;
  static const Color _darkSecondaryColor = Colors.white;
  static const Color _darkOnPrimaryColor = Colors.white;

  static final ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: _darkPrimaryColor,
    appBarTheme: const AppBarTheme(
        color: _darkPrimaryColor,
        iconTheme: IconThemeData(
          color: _darkOnPrimaryColor,
        )
    ),
    colorScheme: const ColorScheme.dark(
      primary: _darkPrimaryColor,
      secondary: _darkSecondaryColor,
      onPrimary: _darkOnPrimaryColor,
    ),
    iconTheme: const IconThemeData(
      color: _iconColor,
    ),
    textTheme: _darkTextTheme,
  );
  static const TextTheme _darkTextTheme …
Run Code Online (Sandbox Code Playgroud)

dart flutter flutter-theme

9
推荐指数
1
解决办法
7872
查看次数

Flutter/Material 3:AppBar 忽略图标主题

在我的应用程序栏中,标题显示为白色文本,但图标是深灰色或其他颜色。我也想让图标变成白色。

但图标主题中的颜色没有任何效果!

直接添加到 AppBar 时不会...

Scaffold(
  appBar: AppBar(automaticallyImplyLeading: false,
      actionsIconTheme: IconThemeData(color: Colors.white),
      iconTheme: IconThemeData(color: Colors.white),

Run Code Online (Sandbox Code Playgroud)

而且也不在主题中...

appBarTheme: AppBarTheme(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    actionsIconTheme: IconThemeData(color: Colors.white),
    iconTheme: IconThemeData(color: Colors.white),

),

Run Code Online (Sandbox Code Playgroud)

我想让主题发挥作用!无法在图标上单独设置颜色。

我究竟做错了什么?Material 3 真的准备好投入生产了吗?

谢谢!

注意:这是材料 3 的问题!在材质 2 中,一切都按预期进行!

android-appbarlayout flutter flutter-appbar flutter-theme material3

9
推荐指数
1
解决办法
1996
查看次数

如何在 Flutter 中将默认填充存储在 Theme.of() 中?

据我了解,我应该通过 Theme.of() 访问 flutter 中的样式常量。在 Android 中,我会将它们存储在dimens.xml. 在我看来,ThemeData 中的所有条目都与填充量无关,而且似乎也不可能添加新条目。我应该在哪里存储填充量的常量?

padding flutter flutter-layout flutter-theme

8
推荐指数
1
解决办法
3707
查看次数

body2 已弃用,不应使用。这是 2014 版材料设计中使用的术语。- 颤振中的警告消息

如果您更新从版本扑SDK v1.12.13后任何版本v1.13.8,您将收到有关textTheme使用几个警告信息。例如,下面给出了其中之一。

信息:body2 已弃用,不应使用。这是 2014 版材料设计中使用的术语。现代术语是 bodyText1。此功能在 v1.13.8 之后被弃用。

新版本有哪些变化?如何迁移?

flutter flutter-layout flutter-theme flutter-text

7
推荐指数
1
解决办法
5732
查看次数

ThemeData PrimaryColor 不改变 appBar 背景颜色

 class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: InputPage(),
    );
Run Code Online (Sandbox Code Playgroud)

我正在学习这门课程:https://www.udemy.com/course/flutter-bootcamp-with-dart/

在主题部分,她使用这个确切的代码将她的 appBar 变成红色。我的代码没有显示任何错误,但我的 appBar 仍然是默认主题。

原色的描述在这里:https://api.flutter.dev/flutter/material/ThemeData-class.html

它没有说它已经折旧,也没有表明最近有任何变化。

我的问题不是“如何使我的应用程序栏变为红色”,而是“为什么此代码不能按预期执行?”

dart flutter flutter-theme

6
推荐指数
1
解决办法
5028
查看次数