如何改变我的ElevatedButton的形状

22 浏览
0 Comments

如何改变我的ElevatedButton的形状

 
import 'package:flutter/material.dart';
class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Tracker'),
        elevation: 5.0,
      ),
      body: _buildContent(),
      backgroundColor: Colors.amber[50],
    );
  }
  Widget _buildContent() {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text(
            'Sing in',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 32.0,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 8.0),
          ElevatedButton(
            child: Text('Sing in with google'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
                primary: Colors.purple[200],
                onPrimary: Colors.black87,
                elevation: 6.0,
                shadowColor: Colors.yellow[200],
          ),
        ],
      ),
    );
  }
}

1_ 我不知道如何在这个上下文中改变按钮的形状，而且我明显在最后一个方括号]，第41行有一个错误。请帮我修复它，我提前感谢您的帮助。

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

你可以使用以下方式：

在悬浮按钮内部，

style: ButtonStyle(
  shape: MaterialStateProperty.all(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

在这里，你可以使用borderRadius属性来获取不同的形状。

0
0 Comments

您可以将一个容器作为按钮的子元素，或者执行以下操作：

      ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),
        child: Text(' Elevated Button'),
      ),

0