In the example below, FittedBox does what I want: it fits the height into the container. However, it should hide the remaining of the image. However, it renders it.
What is wrong?
/// Flutter code sample for Expanded
// This example shows how to use an [Expanded] widget in a [Column] so that
// its middle child, a [Container] here, expands to fill the space.
//
// 
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Expanded Column Sample'),
),
body: Center(
child: Container(
width: 100,
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 100,
width: 100,
),
Expanded(
child: Container(
color: Colors.amber,
child: FittedBox(
fit: BoxFit.fitHeight,
child: Image.network(
'https://i.ytimg.com/vi/E5fD0SSqPa0/maxresdefault.jpg'))
),
),
Container(
color: Colors.blue,
height: 100,
width: 100,
),
],
)),
),
);
}
}
According to https://api.flutter.dev/flutter/widgets/FittedBox-class.html, it should fit the height but ignore the remaining of the image
