How to prevent a custom widget's default style from being changed when using Stack widgets?

Issue

I have a custom widget name "GreenButtonWidget", When I use it in a screen with a Stack widget, its default style is changed, the background color and text color are both different from the default. Everything is fine if I use it on a screen without Stack widget. Please help me

GreenButtonWidget

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

class GreenButtonWidget extends StatelessWidget {
final String? buttonText;
final VoidCallback? onPressed;
// const GreenButtonWidget({Key? key}) : super(key: key);
 GreenButtonWidget(
  {required this.buttonText,
    this.onPressed
  });
 @override
 Widget build(BuildContext context) {
 return

  ClipRRect(
  borderRadius: BorderRadius.circular(19),
  child: Container(
    width: double.infinity,
    height: 67,
    child: ElevatedButton(
      style: ElevatedButton.styleFrom(primary: HexColor("#53B175")),
      onPressed: onPressed,
      child: Text(buttonText!),
    ),
  ),
);
}
}

Success widget

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:online_croceries/constants/assets.dart';
import 'package:online_croceries/widgets/green_button_widget.dart';
import 'package:online_croceries/widgets/image_background_widget.dart';

class Success extends StatefulWidget { 
const Success({Key? key}) : super(key: key);

@override
_SuccessState createState() => _SuccessState();
}

class _SuccessState extends State<Success> {
@override
Widget build(BuildContext context) {
double backDropBlur = 30;
return Scaffold(
  // appBar:TransparentAppBar(
  //   transTitle: ""
  // )
  body: Stack(
    children: [
      Container(
          child: Column(
        children: [
          Flexible(
              flex: 1,
              child: ImageBackground(
                imageName: Assets.blurBackGround,
              )),
          Flexible(
            flex: 4,
            child: Container(color: Colors.white),
          ),
          Flexible(
            flex: 1,
            child: ImageBackground(imageName: Assets.blurBottomBackGround),
          )
        ],
      )),
      BackdropFilter(
          filter:
              ImageFilter.blur(sigmaX: backDropBlur, sigmaY: backDropBlur),
          child: Center(child: _bodyMain(context))),
    ],
  ),
  );
  }

_bodyMain(BuildContext context) {
return Container(
    padding: EdgeInsets.only(left: 24, right: 24),
    child: Column(children: [
      SizedBox(height: 150),
      Image.asset(Assets.success),
      SizedBox(height: 65),
      Text("Your Order have been", style: TextStyle(fontSize: 28)),
      Text("Accepted", style: TextStyle(fontSize: 28)),
      SizedBox(height: 20),
      Text("Your Order have been placed and is on",
          style: TextStyle(fontSize: 16, color: HexColor("#7C7C7C"))),
      Text("it's way to being processed",
          style: TextStyle(fontSize: 16, color: HexColor("#7C7C7C"))),
      SizedBox(height: 135),
      GreenButtonWidget(buttonText: "Track Order"),
      SizedBox(height: 24),
      Text("Back to home", style: TextStyle(fontSize: 18)),
    ]));
    }
    }

Original GreenButtonWidget

Overriden GreenButtonWidget in Success

Solution

Use GreenButtonWidget like this:

GreenButtonWidget(buttonText: "Track Order", onPressed: (){}),

Note: Always implement onPressed method to have all color effects.

Let me know if this works. I didn't test it

Answered By - Ruslanbek0809