'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. Anybody help me to make it in a flutter.

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

flutter

Solution 1:^[1]

Try this. Hope its help you.

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

Solution 2:^[2]

Try below code hope its helpful to you, refer official documentation here for 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->

Solution 3:^[3]

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:

Solution 4:^[4]

This is how Elevated Button 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),
        ),
    ),
),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ananda Pramono
Solution 2
Solution 3	Jahidul Islam
Solution 4	Hassan ali

'Flutter ElevatedButton Custom style

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]