CODEWITHSUNDEEP
flutter
Denise
Denise

Reputation: 1088

How to make an image fill out its parent container?

I want my image to fill exactly half of my screen, and in the bottom row i want to add some more widgets. I tried to make the rows spaceAround so that equal space is given. On adding image widget to row, small image was displayed. I added a SizedBox.expand parent to the image and gave the image BoxFit.fill fit, and then the entire image disappeared all together. How do I fix this problem?

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

 @override
  Widget build(BuildContext context){

   final view = Column(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
     children: <Widget>[
       Row(
         children: <Widget>[
           SizedBox.expand(
             child: Image.asset('assets/airb.jpeg'),
           )
         ],
       ),
       Row(
         children: <Widget>[

         ],
       )
     ],
   );

   return Scaffold(
     appBar: AppBar(
       title: Text('Image')
     ),
     body:  view,



   );
 }

}

Upvotes: 1

Views: 803

Answers (2)

Nikhat Shaikh
Nikhat Shaikh

Reputation: 3685

This may help you-

 class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        final view = Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
                flex: 5,
                child: Row(
                  children: <Widget>[
                    new Image.asset(
                      "images/pitch.png",
                      fit: BoxFit.cover,
                    ),
                  ],
                )),
            Expanded(
                flex: 5,
                child: Row(
                  children: <Widget>[],
                )),
          ],
        );

        return Scaffold(
          appBar: AppBar(title: Text('Image')),
          body: view,
        );
      }
    }

Upvotes: 0

danypata
danypata

Reputation: 10175

If I got it right, from your description, you would like to have an image on the top half of your screen and then some other widgets below it.

Usually when I do things relative to the size of a container (or relative to the screen size), I'm using LayoutBuilder which will tell you the size constraints that it has (like maxHeight, maxWidth). One thing tho, be careful with it because sometimes these constraints can be =infinity (if you wrap the LayoutBuilder inside a ```Row/Column``

Now for your case you can use the following code snippet:

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return Column(
            children: <Widget>[
              Container(height: constraints.maxHeight / 2, color: Colors.red), // replace this with an image

              //Add extra widgets here.
              Text("this will be below image")
            ],
          );
        }));
  }

Note, the code is a simple example on how to do the sizing, you will have to add the widgets that you need and customise them :).

Upvotes: 2

Related Questions