how to change only few properties of elevated button from its theme setting?

Question

This is the theme setting for elevated button..Its working fine to all elevated button...

but only at one screen i dont want elevated button's border...so how to code it...i dont want to change setting of theme of Elevated button bcz its used in many screen and only at one screen i dont want its border... hope you all getting what my query is

static final lightElevatedButtonTheme = ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      elevation: 0,
      foregroundColor: Colors.white,
      backgroundColor: MyColors.lightButtonColor,
      disabledBackgroundColor: Colors.grey,
      disabledForegroundColor: Colors.grey,
      side: const BorderSide(color: Colors.red,width: 3),
      padding: const EdgeInsets.symmetric(vertical: 18),
      textStyle: const TextStyle(
          fontSize: 16, color: Colors.white, fontWeight: FontWeight.w600),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(MySizes.sm),
      ),
    ),
  );

and this is where i am using elevated button..want to change border properties

SizedBox(
   width: double.infinity,
   child: ElevatedButton(
     onPressed: () {},
     child: const Text('Save Address'),
   ),
 );

i think that should be copywith or apply..but dont know how to code

and what is the difference betwen copywith and apply

Answer 1

its simple, use ElevetedButton.styleFrom() and apply your required changes like backgroundcolor, foregroundcolor, border etc etc..it will keep all other setting as it is...

use style like below

SizedBox(
            width: 100,
            child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: MyColors.lightGreyColor,
                  foregroundColor:Colors.black,
                   side: const BorderSide(color: Colors.transparent,width: 0),
                ),
                onPressed: (){
                }, child: const Text('Apply')))