How would I zoom in and center an image onto a Card Widget and clip any overflow?
I'm still having a hard time getting my head around layouts in Flutter.

Here's what I got:

[![enter image description here](https://i.stack.imgur.com/kKs7Bl.jpg)](https://i.stack.imgur.com/kKs7Bl.jpg)

You can see six Card widgets on the screen.
Tap on one of them and then select a picture from your phone will
place that image onto of the whole Card widget.
However, as you can see, there's overflow.
The code for this follows now:

```
  @override
  Widget build(BuildContext context) {
    final widget = this.widget;
    if (widget.name.isEmpty) {
      return Container();
    }
    return Card(
      child: Stack(
        children: [
          InkWell(
            onTap: widget.onTapInfo,
            highlightColor: const Color(0xffbb86fc),
            child: FutureBuilder<Widget>(
                future: widget.image.getImage(widget),    <-------  'See getImage function below.'
                initialData: child,
                builder: (_, snapshot) => _futureBuilder(snapshot)),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 20, right: 25),
            child: Align(
              alignment: Alignment.topRight,
              child: InkWell(
                onTap: widget.onTap,
                highlightColor: const Color(0xffbb86fc),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<Widget> getImage(TaskCard card) async {
    this.card = card;
    final con = card.con;
    Widget image;
    key =
        '${con.moduleType}${con.module}${card.submodule}${card.name}${card.runtimeType.toString()}';
    final path = Prefs.getString(key);
    if (path.isNotEmpty) {
      image = Image.file(File(path));//, fit: BoxFit.cover);
      _state?.child = ClipRect(               <--- 'ClipRect keeps it in Card, but what do I do next?'
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [Container(alignment: Alignment.bottomRight, child: image)],
        ),
      );
      // ignore: invalid_use_of_protected_member
      _state?.setState(() {});
    }
    return image;
  }

```

Here's what I want:

[![enter image description here](https://i.stack.imgur.com/GRj5pl.jpg)](https://i.stack.imgur.com/GRj5pl.jpg)

Notice how it's centered a little bit with the excess sides clipped off. How do I do that with ClipRect? Please help, I'm stuck.

[![enter image description here](https://i.stack.imgur.com/ScLAqm.jpg)](https://i.stack.imgur.com/ScLAqm.jpg)