CODEWITHSUNDEEP
flutterdart
Albin Joseph
Albin Joseph

Reputation: 1050

Two column two rows flutter layout

I need help to build a layout as shown in the below picture

enter image description here

My code is given below

Container(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
      children: <Widget>[
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.black,
                alignment: Alignment.topLeft,
                child: Image.network(
                  'https://images.freeimages.com/images/large-previews/13f/natal-sofia-4-1431300.jpg',
                  width: 200,
                  height: 200,
                ),
              ),
              Container(
                child: Text("Image Text", style: Theme.of(context).textTheme.bodyText1),
              ),
            ],
          ),
        ),
        Flexible(
          child: Container(
            padding: EdgeInsets.only(left: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text(
                  'Heading',
                  style: Theme.of(context).textTheme.headline1,
                ),
                SizedBox(
                  height: 4,
                ),
                Text(
                  'Value',
                  style: Theme.of(context).textTheme.headline5,
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

It's generating a UI as shown below.

enter image description here

How do I align the second column field to top instead of middle?

Any help would be really appreciated.

Upvotes: 0

Views: 4232

Answers (3)

s.am.i
s.am.i

Reputation: 758

crossAxisAlignment: CrossAxisAlignment.start, add this to the first row you r opening for better view you can try mainAxisAlignment too

Upvotes: 0

Elias Andualem
Elias Andualem

Reputation: 366

Here is a full example.

import 'package:flutter/material.dart';

class RowAndColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Row(
        children: <Widget>[
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const SizedBox(height: 16),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                Container(
                  height: 56,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
              ],
            ),
          ),
          const SizedBox(width: 16),
          SizedBox(
            width: width / 2,
            child: Column(
              children: <Widget>[
                const SizedBox(height: 16),
                Container(
                  height: 60,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                Container(
                  height: 60,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                  ),
                ),
                const SizedBox(width: 16),
              ],
            ),
          ),
          const SizedBox(width: 16),
        ],
      ),
    );
  }
}

Upvotes: 1

Michel Feinstein
Michel Feinstein

Reputation: 14294

Try adding crossAxisAlignment: CrossAxisAlignment.start, to the Row.

Upvotes: 1

Related Questions