Flutter改变材质3个按钮形状

问题描述 投票:0回答:3

我最近将 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"),
        ),
      ),
    );
  }
}

我想要一个方形按钮(或任何自定义边框),但每次结果都是相同的:

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

flutter material3
3个回答
1
投票

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


0
投票

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

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

0
投票

这是一个简单的例子:

FilledButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(
      Colors.orange,
    ),
    shape: MaterialStateProperty.all<OutlinedBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0.0),
      ),
    ),
  ),
  child: Text(
    'some button',
  ),
),
© www.soinside.com 2019 - 2024. All rights reserved.