Question 257669 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter MyContainer Color Issue

I’m encountering an issue with the Flutter app where the color property of MyContainer doesn’t seem to work as expected in the MainScreen. Specifically, I have set the color parameter of MyContainer to different colors, but it doesn’t affect the background color of the container.What am i doing wrong?Thanks in advance

Expanded(
            child: Row(
              children: [
                Expanded(
                  child: MyContainer(
                    color: Colors.white,
                    margin: EdgeInsets.all(10),
                    child: GenderWidget(
                        onPressed: () {
                          gender = "Women";
                        },
                        gender: "Women"),
                  ),
                ),
                Expanded(
                    child: MyContainer(
                      color: Colors.green,

                        child: GenderWidget(
                  onPressed: () {
                    gender="Man";
                  },
                  gender: "Man",
                ))),
              ],
            ),
          ),

Widget class

class MyContainer extends StatelessWidget {
  final Widget child;
  final EdgeInsetsGeometry margin;
  final  Color color;

  MyContainer({required this.child, this.margin = const EdgeInsets.all(12),required this.color}); // Default margin değeri verildi.

  @override
  Widget build(BuildContext context) {
    return Container(

      margin: margin, // Margin değeri instance variable olarak kullanılıyor.
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(
          Radius.circular(15),
        ),
      ),
      child: child,
    );
  }
}

class GenderWidget extends StatelessWidget {
  final String gender;
  final Function onPressed;
  GenderWidget( {required this.gender, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed(),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.person),
          const SizedBox(height: 10),
          Text(gender,style: textStyle,),
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    It looks like the issue might be with the hardcoded color in your MyContainer widget’s BoxDecoration. You’ve set Colors.white as the color, which means it will always be white regardless of the color you provide when creating the MyContainer.

    You should use the color parameter that you pass to MyContainer in the BoxDecoration. Here’s the corrected MyContainer widget:

    class MyContainer extends StatelessWidget {
  final Widget child;
  final EdgeInsetsGeometry margin;
  final Color color;

  MyContainer({required this.child, this.margin = const EdgeInsets.all(12), required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin,
      decoration: BoxDecoration(
        color: color, // Use the color parameter here
        borderRadius: BorderRadius.all(
          Radius.circular(15),
        ),
      ),
      child: child,
    );
  }
}

    With this change, the color you pass to MyContainer will be used as the background color. Now, when you set the color in MyContainer in your Row, it should work as expected. For example:

    MyContainer(
  color: Colors.white, // or any color you want
  margin: EdgeInsets.all(10),
  child: GenderWidget(
    onPressed: () {
      gender = "Women";
    },
    gender: "Women",
  ),
),
    Login or Signup to reply.
  2. 0

    Can you try to remove color from Container as you are using decoration property in Container?Meaning remove color from Container and set your desired color in decoration .And let me know if it works or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search