Flutter - Elevated button within Transform.Translate widget

Question

I have a Transform.Translate widget containing a rectangle object, adaptive to different screen sizes etc.

I have been trying to incorporate an elevated button and make this rectangle clickable.

I am unsure which goes within which and how it should be placed within.

I have tried quite a few possible ways and none seem to work, with one not fully functioning within the other.

I will post the code below, first is the transform.translate widget and the block below is the basic elevated button outline to incorporate. I just need to know how to put one within the other, if that is correct! Thanks a lot!

Transform.translate(
            offset: Offset(94.w, 635.h),
            child: Container(
              width: 187.w,
              height: 37.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0.w),
                color: const Color(0xff2affa2),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x58000000),
                    offset: Offset(0.w, 10.h),
                    blurRadius: 15,
                  ),
                ],
              ),
            ),
          ),
          
    ElevatedButton(
    child: Text('Example'),
    onPressed: () {
                Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
                );
                },
            ),

Solution

If I understand you correctly you want to put the ElevatedButton in theTransform widget. You can do it like this:

Transform.translate(
              offset: Offset(94.w, 635.h),
               child: Container(
              // set the Container's child property to your ElevatedButton
              child: ElevatedButton(
              child: Text('Example'),
              onPressed: () {
                Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
                );
                },
                ),
              width: 187.w,
              height: 37.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0.w),
                color: const Color(0xff2affa2),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x58000000),
                    offset: Offset(0.w, 10.h),
                    blurRadius: 15,
                  ),
                ],
              ),
            ),
          ),

Comments

[Andrej]

If this answer helped you please mark it as correct.