Flutter: Image border with BoxFit.contain-CodePudding

I'm trying to wrap my image inside a container which has a BoxDecoration with a simple border. The image itself must have BoxFit.contain and I dont' know the dimensions of the container (imagine the SizedBox may have any possible size).

SizedBox(
  width: 750,
  height: 1400,
  child: Container(
    padding: const EdgeInsets.all(8),
    child: Container(
      alignment: Alignment.topCenter,
      decoration: BoxDecoration(
        border: Border.all(),
      ),
      child: Image.network(
        'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg',
        height: double.infinity,
        fit: BoxFit.contain,
        alignment: Alignment.topCenter,
      ),
    ),
  ),
)

What I'm trying to achieve is that the black border is exactly below the image. I already found a similar question with answer on SO but somehow it seems not to be applicable here.

CodePudding user response：

Here is how you can do it like this by adding boderRadius tou your container

 decoration: BoxDecoration(
        border: Border.all(),
        borderRadius: const BorderRadius.all(Radius.circular(15)),
 ),

however i recommend you you use this method cause it is more suitable

ClipRRect(
                                          borderRadius: const BorderRadius.all(Radius.circular(15)),
                                          child: Container(
                                            constraints: BoxConstraints(minWidth: 100, maxWidth: MediaQuery.of(context).size.width maxHeight: 500, minHeight: MediaQuery.of(context).size.height,),
                                            child: FittedBox(
                                              fit: BoxFit.cover,//use BoxFit.height of width depending on your layout to make your image more fitting 
                                              alignment: const FractionalOffset(0,.0),
                                              child: Image.network(
                                             'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg',
                                              ),
                                            ),
                                          ),
                                        ),

CodePudding user response：

Instead of BoxFit, try a Container, like this:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("My image size"),
        ),
        body: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 2,
            ),
          ),
          child: Image.network(
              'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
        ),
      ),
    );
  }
}