CODEWITHSUNDEEP
flutterdart
Rishail Siddiqui
Rishail Siddiqui

Reputation: 231

I want an ElevatedButton in a round rectangle - Flutter

I am trying to draw a rectangular shape using an ElevatedButton.

This is what I am trying to achieve: enter image description here

This is what I get enter image description here

I have upgraded the code from a RaisedButton to an ElevatedButton and used the same code underneath but it's 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 preferably stack overflow but can't seem to find any solution to my problem.

Upvotes: 6

Views: 20127

Answers (3)

Sulabh Rastogi
Sulabh Rastogi

Reputation: 35

I generally wrap the widget with an Expanded Widget inside a Row Widget and use a fixed padding.

Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            Expanded(
              child: ElevatedButton(
                onPressed: () {},
                child: const Text('Proceed to Pay'),
              ),
            ),
          ],
        ),
      ),

Upvotes: 0

Amit Maurya
Amit Maurya

Reputation: 686

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),
                        ),
                      ),
                    ),
                  ),
                ),

Upvotes: 10

Lakmal Fernando
Lakmal Fernando

Reputation: 1540

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>[],
              ),

Upvotes: 0

Related Questions