0

I'm working with Card , i have some problem with layout . So, What i'm expected like this : Iwant

But when implement, not what i want , i'm already using mainAxisAlignment: MainAxisAlignment.spaceBetween, But Not Work

Text Disini Judul always in center Container: iwant2

It's my Card Code

Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Card(
              elevation: 5,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Container(
                              child: Text('Disini Judul'),
                            ),
                            Container(
                              child: Text('Disini Judul'),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        child: Image.network(
                            'https://picsum.photos/250?image=9',
                            width: 150),
                      )
                    ],
                  )
                ],
              ),
            ),
          )

Can you help me with this layout ?

Thank's

2 Answers 2

1

Add child in to Container base on you needs

           body: SingleChildScrollView(
      child: Container(
        color: Colors.black,
        height: 200.0,
        width: double.infinity,
        child: Row(
          children: <Widget>[
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.yellow,
                      height: 100.0,
                      width: double.infinity,
                      child: Text(
                          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
                    ),
                  ),
                  Container(
                    color: Colors.green,
                    height: 50.0,
                    width: double.infinity,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('Your date'),
                        Text('Your Category')
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              color: Colors.red,
              height: double.infinity,
              width: 150.0,
              child: Image.network("https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg",
                fit: BoxFit.fill

              ),
            ),
          ],
        ),
      ),
    ),

enter image description here

1
  • 1
    Your layout color, help me so much. Thank's Commented Sep 18, 2019 at 14:45
0

you can easily achieve this using Stack widget, have a look at below code

enter image description here

Container(
      height: 180,
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      child: Card(
        elevation: 5,
        child: Stack(
          children: <Widget>[
            Positioned(
              child: Text(
                  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500'),
              top: 0,
              right: 150,
              left: 10,
            ),
            Positioned(
              bottom: 0,
              left: 10,
              right: 150,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('Date: 18-Sep-2019'),
                  Text('Category: Sport')
                ],
              ),
            ),
            Positioned(
              top: 0,
              right: 0,
              child: Container(
                child: Image.network('https://picsum.photos/250?image=9',
                    width: 150),
              ),
            )
          ],
        ),
      ),
    )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.