Reputation: 1050
I need help to build a layout as shown in the below picture
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.
How do I align the second column field to top instead of middle?
Any help would be really appreciated.
Upvotes: 0
Views: 4232
Reputation: 758
crossAxisAlignment: CrossAxisAlignment.start, add this to the first row you r opening for better view you can try mainAxisAlignment too
Upvotes: 0
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
Reputation: 14296
Try adding crossAxisAlignment: CrossAxisAlignment.start,
to the Row
.
Upvotes: 1