Flutter show icon overlap with column - flutter

Question

I need to show the avatar and a column in a row which look like overlapping each other.
Something like this
I have done with the left side but don't know how can I add this type of icon which seems like overlapping with my column here is my code
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
body: Container(
width: double.infinity,
color: Color(0xff1b4881),
child: Column(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: height * 0.05,
),
Container(
padding: EdgeInsets.only(left: 10),
alignment: Alignment.topLeft,
child: new SizedBox(
child: FloatingActionButton(
backgroundColor: Colors.white,
child: Icon(Icons.arrow_back_ios, color: Color(0xff1b4881),),
onPressed: () {
Navigator.pop(context);
},
))),
SizedBox(
height: height * 0.03,
),
Container(
padding: EdgeInsets.only(right: 20),
color: Colors.white,
width: width * 0.7,
height: height * 0.1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Rtn.XYZZ',
style: TextStyle(fontSize: 22),
),
Text(
'President',
style: TextStyle(fontSize: 22),
)
],
),
),
],
),
],
)),
);
}

Answer 1

Try this
Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(top: 20, bottom: 20, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('AskNilesh'),
Text('AskNilesh'),
],
),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20.0))),
),
Positioned(
right: 0,
top: 0,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(50.0))),
),
),
)
],
),
)
OUTPUT

Answer 2

you can the Stack Widget to overlap widgets:
Stack(
children: <Widget>[
Column(
children: <Widget>[
Text('Rtn.xxx'),
Text('secretory'),
],
),
Positioned(
left: 10,
right: 10,
top: 10,
bottom: 10,
child: CircleAvatar(
child: Image.asset('blablabla.png'),
),
)
],
)
then play with values of top, left, right, button in the Positioned widget to align the item exactly as you want it.