Flutter ElevatedButton Custom style-CodePudding

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

CodePudding user response：

Try below code hope its helpful to you, refer official documentation

CodePudding user response：

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

CodePudding user response：

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: