How to clip image outside of Animated Container in flutter?

Issue

I am new to animation in Flutter and was trying to create the following design.

import 'package:flutter/material.dart';
import 'package:invest_app_ui/constants/colors.dart';
import 'package:invest_app_ui/constants/images.dart';

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

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

class _ScratchState extends State<Scratch> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: GestureDetector(
            onTap: () {
              setState(() {
                selected = !selected;
              });
            },
            child: AnimatedContainer(
              duration: Duration(seconds: 2),
              curve: Curves.decelerate,
              height: 208,
              width: selected ? 200 : 500,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(15),
                ),
                gradient: AppColors.euroCardGradient,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          'Gold',
                          style:
                              Theme.of(context).textTheme.headline6!.copyWith(
                                    fontSize: 18,
                                    color: AppColors.brown,
                                  ),
                        ),
                        Text(
                          '6% return',
                          style:
                              Theme.of(context).textTheme.subtitle2!.copyWith(
                                    fontSize: 13,
                                    color: AppColors.brown,
                                  ),
                        ),
                      ],
                    ),
                  ),
                  Image.asset(
                    Images.euroCoin,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The problem is that when I make the card smaller, the coin comes out of the box. I want the coin to be clipped when the card becomes smaller.

Can someone please help out with this animation?

I have tried using ClipRect in the AnimatedContainer property but I still get the overflow error in the debug log.

Here is the coin if someone needs it.

Solution

Replace the following

Image.asset(
  Images.euroCoin,
),

with:

Flexible(
   child: SingleChildScrollView(
   clipBehavior: Clip.antiAlias,
   physics: NeverScrollableScrollPhysics(),
   scrollDirection: Axis.horizontal,
   child: Image.asset(Images.euroCoin),
)

Answered By – Mahmoud Haj Ali

Answer Checked By – David Marino (FlutterFixes Volunteer)