how to change the shape of my elevatedbutton

Question

 
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: <Widget>[
          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_ i don't know how to change the shape of my button in this context and i clearly have an error at the end of the last square ], line 41 .please help me to fix it i appreciate your help in advance.

https://stackoverflow.com/questions/49991444/create-a-rounded-button-button-with-border-radius-in-flutter — sonic, Mar 15 '21 at 17:36

Yusuf-Uluc · Accepted Answer · 2022-06-13T20:30:54.663

16

You can use a Container as a child of the Button or do this:

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

edited Jun 13 '22 at 20:30

answered Mar 15 '21 at 22:03

Yusuf-Uluc

887
4
15

score 8 · Answer 2 · answered Mar 16 '21 at 06:33

You can use the following way:

Inside elevated button,

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

Here you can play with borderRadius property to get different shapes.

score 3 · Answer 3 · answered Mar 15 '21 at 17:58

3

Make the child of the ElevatedButton a Container widget.

You can then use the shape attribute available for container widget.

The text widget can become the child for the container widget.

answered Mar 15 '21 at 17:58

THEODORE

917
10
12

how to change the shape of my elevatedbutton

3 Answers3