CODEWITHSUNDEEP
layoutflutterstackview
michealchow
michealchow

Reputation: 136

Flutter: How to make the width of a Container equals to the width of the Stackview?

I have a Container wrapped inside the Stack. Since the Stack will have a variable width, I would like to set the Container width equals to the Stack width.

I tried the below code but it does not work.

     Stack(
      alignment: Alignment.center,
      children: <Widget>[
        new Container(
          child: new CachedNetworkImage(
            fit: BoxFit.fitWidth,
            height: 270.0,
            imageUrl: _imageURL,
            placeholder: (context, url) {
                new CircularProgressIndicator();
            },
        ),

      new Container(
        constraints:  BoxConstraints.expand(height: 270.0), 
        decoration: new BoxDecoration(
          color: Colors.black45
        ),
      ),

the console log says 

I/flutter (14660): The following assertion was thrown during performLayout():
I/flutter (14660): BoxConstraints forces an infinite width.
I/flutter (14660): These invalid constraints were provided to RenderDecoratedBox's layout() function by the following
I/flutter (14660): function, which probably computed the invalid constraints in question:
I/flutter (14660):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:259:13)
I/flutter (14660): The offending constraints were:
I/flutter (14660):   BoxConstraints(w=Infinity, h=148.1)

The Container only shows when i give a definite width and height inside the code like this.

Stack(
      alignment: Alignment.center,
      children: <Widget>[
        new Container(
          child: new CachedNetworkImage(
            fit: BoxFit.fitWidth,
            height: 270.0,
            imageUrl: _imageURL,
            placeholder: (context, url) {
                new CircularProgressIndicator();
            },
        ),

      new Container(
        width: 100.0,
        height: 100.0,
        decoration: new BoxDecoration(
          color: Colors.black45
        ),
      ),

Upvotes: 1

Views: 2937

Answers (1)

diegoveloper
diegoveloper

Reputation: 103401

Just set StackFit.expand to the fit property of your Stack :

  SizedBox(
     width : 300,
     height: 300,
     child:    Stack(
            fit: StackFit.expand,
            alignment: Alignment.center,
            children: <Widget>[
              new Container(
                 decoration: new BoxDecoration(color: Colors.black45),
              )
            ...

Upvotes: 4

Related Questions