CODEWITHSUNDEEP
flutterflutter-layout
Florent
Florent

Reputation: 435

How to do this layout with Flutter (Card Widget)?

my question is: How can I achieve a layout in a card widget as the parent widget?

Example

So I tried it like this: 2 columns: 1 for the Avatar and the other one for the button + text. The second column has 2 rows.

Row 1 - Text

Row 2 - Button

But I don't get the layout I want to have. How can I get exactly the layout from the picture?

Upvotes: 2

Views: 132

Answers (1)

user2682025
user2682025

Reputation: 804

Check if this work for you, Just resize the BorderRadius.circular(7.0) to fit your requirements.

Card(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: InkWell(
              onTap: () {
              },
              child: Column(
                //To scale the image to cover the card
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ClipRRect(
                        borderRadius: new BorderRadius.circular(7.0),
                        child: Image.network("image_url",
                            fit: BoxFit.cover, height: 140.0, width: 150.0),
                      ),
                      new Flexible(
                          child: Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
                        textAlign: TextAlign.right,
                        style: TextStyle(
                          fontSize: 16.0,
                        ),
                      )),
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Column(children: <Widget>[
                        new Row(
                          children: <Widget>[
                            new IconButton(
                                icon: Icon(
                                  Icons.share,
                                ),
                                onPressed: () {
                                }),
                          ],
                        )
                      ]),
                    ],
                  )
                ],
              ),
            ),
          ),
        )

Upvotes: 2

Related Questions