Flutter改变材质3个按钮形状

Question

我最近将 flutter 升级到了

3.10

版本，并将

useMaterial3: true

设置为默认为 true。

但是我无法更改按钮的形状：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FilledButton(
          style: FilledButtonTheme.of(context).style?.copyWith(
                  shape: const MaterialStatePropertyAll<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                borderRadius: BorderRadius.zero,
              ))),
          onPressed: () {},
          child: const Text("Click"),
        ),
      ),
    );
  }
}

我想要一个方形按钮（或任何自定义边框），但每次结果都是相同的：

更新：未向按钮添加形状，与上面的屏幕截图相同。

Answer 1

因此，如果需要一个方形按钮，您只需删除按钮的形状属性，它可能会导致碎片边缘按钮

Answer 2

只需覆盖所有状态的填充按钮的边框即可。

FilledButtonThemeData(
          style: ButtonStyle(
            shape: MaterialStateProperty.all(
              const RoundedRectangleBorder(
                borderRadius:
                    BorderRadius.all(Radius.circular(10)),
              ),
            ),
          ),

Answer 3

这是一个简单的例子：

FilledButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(
      Colors.orange,
    ),
    shape: MaterialStateProperty.all<OutlinedBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0.0),
      ),
    ),
  ),
  child: Text(
    'some button',
  ),
),