CODEWITHSUNDEEP
flutteruser-interfacedartbutton
FlutterDev008
FlutterDev008

Reputation: 89

How to make the border "thicker" in the below code for a custom FlatButton?

SizedBox(
            width: double.infinity,
            child: FlatButton(
                onPressed: () do something
                child: Padding(
                  padding: const EdgeInsets.only(
                      left: 50.0, right: 50.0, top: 50.0),
                  child: Container(
                    height: 50.0,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30.0),
                        color: Colors.transparent,
                        border: Border.all(color: Color(0xFFF4CAF50))),
                    child: Center(
                        child: Text(
                      "Password Login",
                      style: TextStyle(
                          color: Color(0xFFF4CAF50),
                          fontSize: 17.0,
                          fontWeight: FontWeight.w400,
                          fontFamily: "Poppins",
                          letterSpacing: 1.5),
                    )),
                  ),
                )),
          ),

The outline of this button is very thin and is not clear on light background. I want it to stand out more bolder especially on a white background. I can increase the weight of the text but not sure how I make the borders more bold or thicker.

Upvotes: 1

Views: 431

Answers (2)

littleironical
littleironical

Reputation: 1914

Instead of FlatButton use Container with decoration property like this:

GestureDetector(
  onTap: (){
    //...
  },
  child: Container(
    height: 50.0,
    width: double.infinity,
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.black,
        style: BorderStyle.solid,
        width: 3.0 //Change this for Button outline width
      )
    ),
    child: Center(
      child: Text("Password Login",
        style: TextStyle(
          color: Color(0xFFF4CAF50),
          fontSize: 17.0,
          fontWeight: FontWeight.w400,
          fontFamily: "Poppins",
          letterSpacing: 1.5),
        ),
      ),
    ),
  ),
),

Upvotes: 1

Programmer_3
Programmer_3

Reputation: 530

Use a width property in border.all()

border.all(
width:2,
color:Colors.blue,
),

Upvotes: 1

Related Questions