标签: flutter-material

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

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

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

最近我开始使用带有material3选项的主题。`我使用Figma生成器创建了一个颜色方案。我注意到组件的颜色略有不同。下拉菜单、卡片和页面标题都有不同的颜色。更有趣的是，这些颜色没有出现在我的配色方案中。由于某种原因，我需要获得用于对话框背景的确切颜色。这些颜色是如何创建或计算的？

编辑：例如，我的对话框的背景颜色是E4EDF7，这不会出现在我的配色方案中。我在源代码中做了一些搜索，评论说它使用海拔和表面色调来获取颜色。不幸的是我无法找到它是如何完成的。

下拉菜单是另一种颜色。就我而言E9EFF7。

配色方案：

const ColorScheme lightColorScheme = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF0061A4),
    onPrimary: Color(0xFFFFFFFF),
    primaryContainer: Color(0xFFD1E4FF),
    onPrimaryContainer: Color(0xFF001D36),
    secondary: secondairyLight,
    onSecondary: Color(0xFFFFFFFF),
    secondaryContainer: Color(0xFFD9E2FF),
    onSecondaryContainer: Color(0xFF001945),
    tertiary: Color(0xFF006494),
    onTertiary: Color(0xFFFFFFFF),
    tertiaryContainer: Color(0xFFCBE6FF),
    onTertiaryContainer: Color(0xFF001E30),
    error: Color(0xFFBA1A1A),
    errorContainer: Color(0xFFFFDAD6),
    onError: Color(0xFFFFFFFF),
    onErrorContainer: Color(0xFF410002),
    background: Color(0xFFFDFCFF),
    onBackground: Color(0xFF1A1C1E),
    outline: Color(0xFF73777F),
    onInverseSurface: Color(0xFFF1F0F4),
    inverseSurface: Color(0xFF2F3033),
    inversePrimary: Color(0xFF9ECAFF),
    shadow: Color(0xFF000000),
    surfaceTint: Color(0xFF0061A4),
    outlineVariant: Color.fromARGB(255, 232, 232, 232), //For divider
    scrim: Color(0xFF000000),
    surface: Color(0xFFFAF9FC),
    onSurface: Color(0xFF43474E), //Text (and icons if …

我想为我的新应用程序创建一个设计系统。

      child: ElevatedButton.icon(               
            icon: Icon(Icons.power_settings_new),
            onPressed: () => context.go('/login'),
            label: const Text('Log out'),
          ),

没关系，但在这种情况下它应该有红色强调。通过使用 foregroundColor 属性可以轻松实现此目标。通过使用这种技术，无需担心图标的颜色、文本的颜色、波纹效果颜色。

      child: ElevatedButton.icon(
            style: ElevatedButton.styleFrom(
              foregroundColor: Colors.red,
            ),
            icon: Icon(Icons.power_settings_new),
            onPressed: () => context.go('/login'),
            label: const Text('Log out'),
          ),

但是我不想每次都指定这种颜色。我更喜欢制作这样的东西，并且我想避免为按钮编写任何包装。

      child: ElevatedButton.error( // Color accent is red
                    icon: Icon(Icons.power_settings_new),
                    onPressed: () => context.go('/login'),
                    label: const Text('Log out'),
                  ),

问题1：这个事件可能发生吗？

问题 2：图标、文本和波纹效果如何知道它们需要使用前景色来渲染自身？

所以我决定在 Flutter 中尝试一下 Material 3，它改变了很多颜色、字体等。

我知道某些东西看起来会有所不同，例如卡片上的圆角，但我没想到所有字体和卡片颜色都会改变。我实际上只是将其添加useMaterial3: true,到下面的代码中：

child: MaterialApp(
          debugShowCheckedModeBanner: false,
          routes: appRoutes,
          theme: ThemeData(
            useMaterial3: true,
            scaffoldBackgroundColor: const Color(0xFF2b8293),
          ),
          home: const CheckLogin(),
        ),

以下是前后图片变化的示例：

无论如何要更改默认的卡片颜色和标题字体，这样我就不必在应用程序的每个视图中一一更改它们？

同样奇怪的是，垂直的三点图标变成了黑色，而搜索图标却没有。谢谢！

我想在颤动中使用自定义拖动手柄来重新排序列表（可以立即工作，无需先长按）。

为了实现这一目标，我做了：

buildDefaultDragHandles: false,

我用过ReorderableDragStartListener。

代码：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final …