CODEWITHSUNDEEP
flutterdart
Gatonito
Gatonito

Reputation: 2184

FittedBox with fitHeight renders rest of the image width

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?

enter image description here

/// 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.
//
// ![This results in two thin blue boxes with a larger amber box in between.](https://flutter.github.io/assets-for-api-docs/assets/widgets/expanded_column.png)

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

Upvotes: 2

Views: 2157

Answers (2)

L. Gangemi
L. Gangemi

Reputation: 3300

You can remove your FittedBox and set the fit property to value BoxFit.cover directly to the Image.

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: Image.network(
                        'https://i.ytimg.com/vi/E5fD0SSqPa0/maxresdefault.jpg',
                        fit: BoxFit.cover,
                      )),
                ),
                Container(
                  color: Colors.blue,
                  height: 100,
                  width: 100,
                ),
              ],
            )),
      ),
    );

Upvotes: 4

mcernak
mcernak

Reputation: 9130

Try adding clipBehavior to the FittedBox, e.g.:

Expanded(
    child: Container(
        color: Colors.amber,
        child: FittedBox(
            fit: BoxFit.fitHeight,
            clipBehavior: Clip.hardEdge,
            child: Image.network('https://i.ytimg.com/vi/E5fD0SSqPa0/maxresdefault.jpg')
        )
    ),
),

For more information see this link breaking-changes/clip-behavior

Upvotes: 1

Related Questions