logo标签列表

如何在Flutter（Material 3）中使用FilledButton

fluttermaterial3
8

enter image description here

链接1（截图）：https://flutter.github.io/samples/web/material_3_demo/#/

链接2（文档）：https://api.flutter.dev/flutter/material/FilledButton-class.html#material.FilledButton.1

  • Flutter doctor

    [✓] Flutter（稳定频道，3.3.10，在 macOS 12.5.1 21G83 darwin-arm 上，语言环境为 ko-KR） • Flutter 版本为 3.3.10，位于 /Users/username/development/flutter 的稳定频道 • 上游存储库 https://github.com/flutter/flutter.git • 框架修订版号为 135454af32（8 天前），2022-12-15 07:36:55 -0800 • 引擎修订版号为 3316dd8728 • Dart 版本为 2.18.6 • DevTools 版本为 2.15.0

我想使用填充按钮

我尝试像官方文档代码一样导入材料包，但是找不到FilledButton类。

这个小部件还没有实现吗？

[编辑]

我找到了一种使用FilledButton的方法

[在终端中...]

flutter channel master
flutter pub upgrade

然后，可以找到FilledButton类

5个回答
2
不，它还没有实现，但您可以使用ElevatedButton构建它，就像这样：
ElevatedButton(
    onPressed: () {},
    child: Text("Filled"),
    style: ButtonStyle(
      minimumSize: MaterialStateProperty.all(Size(130, 40)),
      elevation: MaterialStateProperty.all(0),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
    ),
  ),

enter image description here

1
0

Flutter中没有填充的按钮，您可以使用ElevatedButton来获得类似的按钮。

 ElevatedButton(onPressed: () {}, child: Text("Elevated Button")),
Flutter有三种类型的按钮：ElevatedButton、TextButton和OutlinedButton，您可以在文档https://docs.flutter.dev/development/ui/widgets/material中了解更多相关信息。 - Munsif Ali
实际上，最新的Flutter版本中有FilledButton和.tonal选项。https://api.flutter.dev/flutter/material/FilledButton-class.html - Psalms Kalu
实际上，在最新的Flutter版本中，有一个名为FilledButton的按钮组件，甚至还有.tonal选项。您可以在https://api.flutter.dev/flutter/material/FilledButton-class.html上找到更多信息。 - undefined
0

该存储库包含官方演示。

使用模拟器确定哪个M3按钮对应于Flutter。 在您的情况下，FilledButton是具有特定属性的ElevatedButton。(注：0高度)

https://github.com/BoltUIX/Flutter-material-design-3

    ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Theme.of(context).colorScheme.onPrimary, backgroundColor: Theme.of(context).colorScheme.primary,
      ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0)),
      onPressed: () {  },
      child: const Text('Filled'),
    ),
0
他们用来获取这些按钮的示例代码：
        ElevatedButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Elevated'),
        ),
        colDivider,
        FilledButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Filled'),
        ),
        colDivider,
        FilledButton.tonal(
          onPressed: isDisabled ? null : () {},
          child: const Text('Filled tonal'),
        ),
        colDivider,
        OutlinedButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Outlined'),
        ),
        colDivider,
        TextButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Text'),
        ),

你可以在这里找到更多详细信息here。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接