Home>

In the FittedBox widget, the fit: BoxFit.fill property does not work WHY . BoxFit.fill should stretch the child widget to the full width and height of the parent widget. This is what the documentation says

Fill the target box by distorting the source's aspect ratio.

The most interesting thing is that in the versions of Dart that did not have Null-safety , exactly the same code worked fine.

But that doesn't happen. For simplicity, I've replaced the image with a filled container. Further full code and screenshot.

main.dart

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 (
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData (
    primarySwatch: Colors.blue,
   ),
   home: Scaffold (
    appBar: AppBar (
     title: const Text ('Name Page'),
    ),
    body: const SafeArea (
     child: MyHomePage (),
    ),
   ),
  );
 }
}
class MyHomePage extends StatefulWidget {
 const MyHomePage ({Key? key}): super (key: key);
 @override
 _MyHomePageState createState ()= >
 _MyHomePageState ();
}
class _MyHomePageState extends State <
MyHomePage >
 {
 @override
 void initState () {
  super.initState ();
 }
 @override
 void dispose () {
  super.dispose ();
 }
 @override
 Widget build (BuildContext context) {
  return Align (
   alignment: Alignment.center,
   child: Container (
    width: 200.0,
    height: 200.0,
    color: Colors.amber,
    alignment: Alignment.center,
    child: FittedBox (
     fit: BoxFit.fill,
     /* child: Image.asset (
      //width= 240, height= 400
      'assets /images /a.jpg',
     ), * /
     child: Container (
      width: 240.0,
      height: 400.0,
      color: Colors.green,
     ),
    ),
   ),
  );
 }
}
  • Answer # 1

    Propertyalignment: Alignment.centerin the container is clearly superfluous, since you have it already centered and it looks like it conflicts withFittedBox:

    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 (
          debugShowCheckedModeBanner: false,
          title: 'Name App',
          theme: ThemeData (
            primarySwatch: Colors.blue,
          ),
          home: Scaffold (
            appBar: AppBar (
              title: const Text ('Name Page'),
            ),
            body: const SafeArea (
              child: MyHomePage (),
            ),
          ),
        );
      }
    }
    class MyHomePage extends StatefulWidget {
      const MyHomePage ({Key? key}): super (key: key);
      @override
      _MyHomePageState createState ()= >
     _MyHomePageState ();
    }
    class _MyHomePageState extends State <
    MyHomePage >
     {
      @override
      void initState () {
        super.initState ();
      }
      @override
      void dispose () {
        super.dispose ();
      }
      @override
      Widget build (BuildContext context) {
        return Align (
          alignment: Alignment.center,
          child: Container (
            width: 200.0,
            height: 200.0,
            color: Colors.amber,
            //next line causes a markup conflict
            //alignment: Alignment.center,
            child: FittedBox (
              fit: BoxFit.fill,
              child: Container (
                width: 240.0,
                height: 400.0,
                color: Colors.green,
              ),
            ),
          ),
        );
      }
    }
    

    Dear Spatz! Thank you very much.

    Sergey2022-01-09 05:33:08
  • Answer # 2

    Propertyalignment: Alignment.centerin the container is clearly superfluous, since you have it already centered and it looks like it conflicts withFittedBox:

    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 (
          debugShowCheckedModeBanner: false,
          title: 'Name App',
          theme: ThemeData (
            primarySwatch: Colors.blue,
          ),
          home: Scaffold (
            appBar: AppBar (
              title: const Text ('Name Page'),
            ),
            body: const SafeArea (
              child: MyHomePage (),
            ),
          ),
        );
      }
    }
    class MyHomePage extends StatefulWidget {
      const MyHomePage ({Key? key}): super (key: key);
      @override
      _MyHomePageState createState ()= >
     _MyHomePageState ();
    }
    class _MyHomePageState extends State <
    MyHomePage >
     {
      @override
      void initState () {
        super.initState ();
      }
      @override
      void dispose () {
        super.dispose ();
      }
      @override
      Widget build (BuildContext context) {
        return Align (
          alignment: Alignment.center,
          child: Container (
            width: 200.0,
            height: 200.0,
            color: Colors.amber,
            //next line causes a markup conflict
            //alignment: Alignment.center,
            child: FittedBox (
              fit: BoxFit.fill,
              child: Container (
                width: 240.0,
                height: 400.0,
                color: Colors.green,
              ),
            ),
          ),
        );
      }
    }
    

    Dear Spatz! Thank you very much.

    Sergey2022-01-09 05:33:08