CODEWITHSUNDEEP
flutterflutter-layout
Sondre
Sondre

Reputation: 1898

Flutter layout issue

I'm testing out flutter, but ran into an issue trying to create a specific layout. I'm trying to create a card with 2 parts. At the top is an image spanning the full width of the card and with a set height. Below that is a Container with several Text widgets laid out in a Column. I then wish to add some padding to the bottom container and offset it so it overlaps the bottom of the image.

Layout of the card

I've tried doing this using a Stack, see the code below, but my issue is that from what I understand the Stack widget takes it size from all non-positioned widgets. This means the Stack only gets the size of the image and the Container gets cut of at the bottom of the image. The content of the Container is also of variable length, so I can not set a fixed height, but need the card to size itself to it's content, both the image and the Container.

return Card(
  child: Stack(
    children: <Widget>[
      Image.network(
        "https://imbo.vgc.no/users/e24/images/5f2fdecdbd09cfad22aa84e922a3e7c7?t%5B0%5D=crop%3Awidth%3D4027%2Cheight%3D2263%2Cx%3D0%2Cy%3D356&t%5B1%5D=maxSize%3Awidth%3D990&t%5B2%5D=resize%3Awidth%3D990&accessToken=e04754e3d904710cb41dc49bb02df916894bdf5a801c49a5965195cee3c86936",
        height: 200.0,
      ),
      Positioned(
        top: 175.0,
        left: 10.0,
        right: 10.0,
        child: Container(
          color: Colors.fromRGBO(0, 0, 0, 1.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("This is the header", style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1.0), fontSize: 20.0)),
              Text("This is some content of variable length", style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1.0)))
            ],
          ),
        ),
      )
    ],        
  ),
);

This is a simple version of my code, I've tried all sorts of different variations without achieving what I wish. I would appreciate any help or hints to guide me in the right direction.

Upvotes: 0

Views: 1038

Answers (3)

Venu A
Venu A

Reputation: 459

You have to add
alignment: Alignment.bottomCenter for Stack widget.

Refer below code:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Card(
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: <Widget>[
                Image.network(
                  "https://imbo.vgc.no/users/e24/images/5f2fdecdbd09cfad22aa84e922a3e7c7?t%5B0%5D=crop%3Awidth%3D4027%2Cheight%3D2263%2Cx%3D0%2Cy%3D356&t%5B1%5D=maxSize%3Awidth%3D990&t%5B2%5D=resize%3Awidth%3D990&accessToken=e04754e3d904710cb41dc49bb02df916894bdf5a801c49a5965195cee3c86936",
                  height: 200.0,
                ),
                Positioned(
                  left: 10.0,
                  right: 10.0,
                  child: Container(
                    color: Colors.blueGrey,
                    child: Column(
                      children: <Widget>[
                        Text("This is the header",
                            style: TextStyle(
                                color: Color.fromRGBO(255, 255, 255, 1.0),
                                fontSize: 20.0)),
                        Text("This is some content of variable length",
                            style: TextStyle(
                                color: Color.fromRGBO(255, 255, 255, 1.0)))
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

Output:

enter image description here

Upvotes: 0

afcode
afcode

Reputation: 560

You can use Transform.translate Widget to "move up" your Container into to the Image. 

Transform.translate{
  offset: Offset(xAxisOffset, yAxisOffset),
 child: //your Container
}

Check out the Flutter Widget of the Week Video here: https://www.youtube.com/watch?v=9z_YNlRlWfA or read the Documentation for more information about the Widget: https://api.flutter.dev/flutter/widgets/Transform-class.html

Upvotes: 1

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

Did you try to set overflow ?

Stack(overflow: Overflow.visible ...

Upvotes: 1

Related Questions