Layout background in flutter - flutter

Question

Click here for picture
hi everyone, i need help making my profile page in flutter look like the image above. im not really know how make it bc there so much details in it.
this is the code i make so far:
import 'package:flutter/material.dart';
void main() => runApp(new UserDetails());
class UserDetails extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Details',
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
leading: Icon(Icons.arrow_back),
title: Text('Edward',
style: TextStyle(color: Colors.black),
),
actions: <Widget>[
Icon(Icons.more_vert, color: Colors.white,),
],
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200.0,
color: Colors.green,
child: Center(
child: Icon(Icons.person, size: 250.0 ),
),
)
],)
]
),
),
);
}
}

Answer 1

You can achieve that adding a border radius to the Container, then use a Column to position and arrange your texts: a Column widget in this case. You need, also, set theAppBar in the Scaffold to same background color which Container has, and set elevation to zero to avoid the shadow over the containter, if you need help with this latter, let me know.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 260,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.grey,
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.people, size: 50),
),
radius: 35,
),
Text("#edward"),
Text("email#email.com"),
Text("No: 00X-XXX-XXX"),
],
),
);
}
}