I want a Elevated button in a round rectangle -flutter

Question

Hi I am trying to draw a rectangular shape using a elevated button This is what i am trying to achieve

this is what i get

I have upgraded the code from a Raised button to an elevated button and used the same code underneath but its not working

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:provider/provider.dart';
import '../BackEnd/AuthenticationService.dart';
import 'ForgotPassword.dart';

class Login extends StatelessWidget {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              Container(
                height: 400,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/images/loginHeader.png'),
                        fit: BoxFit.fill)),
                child: Stack(
                  children: <Widget>[],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(30.0),
                  child: Column(
                    children: <Widget>[
                          Container(
                            padding: EdgeInsets.all(5),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(10),
                                boxShadow: [
                                  BoxShadow(
                                      color: Color.fromRGBO(143, 148, 251, .2),
                                      blurRadius: 20.0,
                                      offset: Offset(0, 10))
                                ]),
                            child: Column(
                              children: <Widget>[
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  decoration: BoxDecoration(
                                      border: Border(
                                          bottom: BorderSide(
                                              color: Colors.grey[100]))),
                                  child: TextField(
                                    controller: emailController,
                                  decoration: InputDecoration(
                                      labelText: "Email",
                                      border: InputBorder.none,
                                      hintText: "Email or Phone number",
                                      hintStyle:
                                          TextStyle(color: Colors.grey[400])),
                                ),
                                ),
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  child: TextField(
                                    controller: passwordController,
                                  obscureText: true,
                                  decoration: InputDecoration(
                                      labelText: "Password",
                                      border: InputBorder.none,
                                      hintText: "Password",
                                      hintStyle:
                                          TextStyle(color: Colors.grey[400])),
                                ),
                                )
                              ],
                            ),
                          ),
                      SizedBox(
                        height: 30,
                      ),
                      ElevatedButton(onPressed: () {
                        context.read<AuthenticationService>().signIn(
                          email: emailController.text.trim(),
                          password: passwordController.text.trim(),
                        );
                      },
                          style: ElevatedButton.styleFrom(elevation: 10,
                              shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0),
                            side: BorderSide(color: Colors.red),
                          ),
                            primary: Color.fromRGBO(214, 0, 27, 1)
                          ),
                          child: Text(' Login'.toUpperCase())
        ),
                     
                      Padding(
                        padding: EdgeInsets.only(top: 15),
                      ),
                      ClipOval(
                        child:ElevatedButton(
                          child: Text("Forgot Password"),
                          onPressed: () {
                            gotoForgotPassword(BuildContext context) {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => ForgotPassword()),
                              );
                            }
                            gotoForgotPassword(context);
                          },
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
    );
  }
}

I tried to search the internet prefebly stack overflow but can't seem to find any solution to my problem

Does this answer your question? [Create a rounded button / button with border-radius in Flutter](https://stackoverflow.com/questions/49991444/create-a-rounded-button-button-with-border-radius-in-flutter) — Karan Owalekar, Aug 13 '21 at 07:48

score 9 · Answer 1 · answered Mar 12 '21 at 05:47

Here is a code snippet.

 Container(
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        primary: Colors.pinkAccent,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25),
                        ),
                        elevation: 15.0,
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: Text(
                          'Proceed to Pay',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ),
                  ),
                ),

set elevation : 0.0 to remove a background shadow. – Amit Maurya Mar 12 '21 at 05:50 — Amit Maurya, Mar 12 '21 at 05:50

score 0 · Answer 2 · answered Mar 12 '21 at 05:22

insert padding parameter to the Container and color parameter to BoxDecoration to match to your image's red color.

Container(
            height: 400,
            padding: const EdgeInsets.symmetric(horizontal: 40.0),
            decoration: BoxDecoration(
                color: Color(0x#FF0000) //insert your hex color code 
                image: DecorationImage(
                    image: AssetImage('assets/images/loginHeader.png'),
                    fit: BoxFit.fill)),
            child: Stack(
              children: <Widget>[],
              ),

I want a Elevated button in a round rectangle -flutter

2 Answers2