Flutter nested Containers

Question

I have this code:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Test(),
    );
  }
}

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

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

class _TestState extends State<Test> {
  double paddingSize = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 411,
          height: 119,
          // alignment: Alignment.center,
          clipBehavior: Clip.antiAlias,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.transparent, Colors.black],
              stops: [0.0, 0.66],
              transform: GradientRotation(93 * pi / 180),
            ),
          ),
          child: Container(
            // alignment: Alignment.center,
            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(10),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x26000000),
                  spreadRadius: 0,
                  offset: Offset(1, 10),
                  blurRadius: 18,
                )
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                const SizedBox(
                  width: 78,
                  height: 18,
                  child: Text(
                    'Start Cooking',
                    style: TextStyle(
                      fontFamily: 'poppins',
                      color: Colors.white,
                      fontSize: 10,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5,
                      height: 1.6,
                    ),
                  ),
                ),
                const SizedBox(width: 19, height: 28),
                Container(
                  width: 30,
                  height: 30,
                  alignment: Alignment.center,
                  padding: const EdgeInsets.fromLTRB(8, 9, 8, 8),
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(
                    color: const Color(0xFF1F1D1D),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  child: Image.network(
                    'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/projects%2FCQJhzgrbGCL9L8fcEXaH%2F8e19a7a9855ddc2392fb9cdc0ab90775?alt=media&token=84d59ead-b9ae-417c-8308-6ba033efdb70',
                    width: 13,
                    height: 13,
                    fit: BoxFit.contain,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Basically, I want the inner (black) Container to be the size of it's children, but instead it expands and I don't understand why? Row has a correct size of 127*30, but DecoratedBox above it, has 383*99 (after padding). Both are getting the same loose constraints, so nothing is forced. Could anyone explain why is this so, please?