CODEWITHSUNDEEP
flutter
user1595266
user1595266

Reputation: 85

Flutter ElevatedButton Custom style

I want to make an elevated button like the one below in Flutter. I have tried a few things like a border but did not succeed in it. How can I make it in Flutter?

Enter image description here

I have tried following the code.

ElevatedButton(onPressed: () {},
   child: Text(AppLocalizations.of(context).visualization_title)
)

In theme data

elevatedButtonTheme: ElevatedButtonThemeData(
    style: TextButton.styleFrom(elevation: 6,
              minimumSize: Size(double.infinity, 46),
              backgroundColor: Color(0xFF7F240F),
              padding: EdgeInsets.symmetric(horizontal: 18, vertical: 18),
              side: BorderSide(color: Color(0xffC09E63), width: 3),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6)),
              textStyle: TextStyle(
                  fontFamily: 'JMHTypewriter',
                  color: Colors.white,
                  fontSize: 20,
                  wordSpacing: 2,
                  letterSpacing: 2)))

Upvotes: 1

Views: 7004

Answers (4)

Hassan ali
Hassan ali

Reputation: 51

This is how the Elevated Button is used:

ElevatedButton(
    onPressed: () {},
    child: Text(""),
    style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 8.0),
        onPrimary: Theme.of(context).primaryTextTheme.button.color,
        primary: Theme.of(context).primaryColor,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30),
        ),
    ),
),

Upvotes: 0

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

Try the below code. Refer to the official documentation here for the ElevatedButton Widget.

Container(
      color: Color(0xFF7F240F),
      height: 50,
      width: 200,
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: ElevatedButton(
          onPressed: () {
            // Your Onpressed function here
          },
          child: Text("Submit"),
          style: ElevatedButton.styleFrom(
            primary:Color(0xFF7F240F),
            side: BorderSide(
              width: 4,
              color: Color(0xffC09E63),
            ),
          ),
        ),
      ),
    ),

Your result screen:

Enter image description here

Upvotes: 1

Jahidul Islam
Jahidul Islam

Reputation: 12565

Wrap your Elevated button with Container:

Container(
          color: Color(0xFF7F240F),
          width: double.infinity,
          height: 46,
          padding: EdgeInsets.symmetric(horizontal: 5, vertical: 3),
          child: ElevatedButton(
            child: Text("test"),
            onPressed: null,
            style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                        side: BorderSide( width: 3, color: Color(0xffC09E63))))),
          ),
        )

Output:

Enter image description here

Upvotes: 0

Ananda Pramono
Ananda Pramono

Reputation: 1009

Try this.

                 Container(
                    color: Colors.deepOrange,
                    height: 100,
                    width: 200,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ElevatedButton(
                        onPressed: () {  },
                        child: Text(""),
                        style: ElevatedButton.styleFrom(
                            primary: Colors.deepOrange,
                            side: BorderSide(width:8, color: Colors.yellow)
                        ),
                      ),
                    ),
                  ),

Upvotes: 1

Related Questions