Row with 2 children, one column and one image layout in flutter - dart

Question

EDIT
Its cutting off my background gradient and not showing the image.
I need to have a layout in flutter with a column of text objects to the left and an image to the right. I found an example picture on the flutter.io site but they dont show the code for this particular example. I have the column of data formatted but cant figure out how to add the image to the right.
Here is the picture of what I am trying to get layout wise.
Here is my existing code with the data we want to the right of the image
class MemberProfile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: LBAppBar().getAppBar(),
drawer: LBDrawer().getDrawer(),
body:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
child:
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Name : Sam Cromer",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Sex : Male",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0))),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Age : 42",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0))),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Status : Divorced",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0))),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Trumatic Event : ",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0))),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Motorcycle Accident July 2005, TBI",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0))),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 20.0),
child: Text("Bio :",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0))),
Container(
margin: EdgeInsets.only(
left: 30.0, top: 150.0, bottom: 30.0, right: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: EdgeInsets.all(20.0),
child: OutlineButton(
child: Text('Offer support'),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
onPressed: () {
// Navigator.of(context).push( MaterialPageRoute(builder: (BuildContext context) => CheckInQ()));
},
),
)
],
),
)
],
),
),
//here
),
);
}
}

Answer 1

This is the your MemberProfile class modified to contain one custom row laid out as the above image:
class MemberProfile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
width: MediaQuery.of(context).size.width,
height: 200.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget> [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Name : Sam Cromer",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Sex : Male",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Age : 42",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Status : Divorced",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Trumatic Event : ",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Motorcycle ",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Bio :",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
],
),
Column(
children: <Widget>[
SizedBox(
width: 200.0,
height: 200.0,
child: Image.asset('assets/images/test.jpg'), // Your image widget here
),
],
),
]
),
),
);
}
}
the code given here limits the height of the row to 200.0 so the size of the image doesn't distort the total layout of the row , you can opt for an alternative approach by placing the Image widget into a SizedBox with fixed width and height.
The reason the gradient was cut off is because it's applied in the parent Container and containers by definition "size themselves to the size of their children", so if you want your "gradient effect" to fill the full screen you have to set an explicit width and height:
body:
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(

Answer 2

import 'package:flutter/material.dart';
class MemberProfile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
width: MediaQuery.of(context).size.width,
//height: 1500.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget> [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Name : Sam Cromer",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Sex : Male",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Age : 42",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Status : Divorced",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Event : Motorcycle",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Bio :",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Bio :",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Bio :",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
Text("Bio :",
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
fontSize: 19.0)),
],
),
Column(
children: <Widget>[
SizedBox(
width: 200.0,
height: 200.0,
child: Image.asset('lib/img/darth-vader_small.jpg'), // Your image widget here
),
],
),
]
),
),
);
}
}