How to align circleAvatar over a background image - flutter

Question

Here is my code..
Here I want CircleAvatar over that background image.
body: SingleChildScrollView(
child: Stack(
children: [
Column(
children: [
CircleAvatar(
backgroundImage: AssetImage('images/images.jpg'),
),
Image(
image: AssetImage('images/flutter.jpg'),
),
label('First Name'),
label('Second name'),
label('Email-id'),
label('Passowrd'),
label('Confirm passowrd'),
],
),
],
),
),
backgroundColor: Colors.white,
);
}
}
And one more thing how to give gradient to appBar.
Thanks in advance.!

Answer 1

Try
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/flutter.jpg'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage: AssetImage('images/images.jpg'),
),
),
),
instead of
CircleAvatar(
backgroundImage: AssetImage('images/images.jpg'),
),
Image(
image: AssetImage('images/flutter.jpg'),
),
And for gredient app bar you can use https://pub.dev/packages/new_gradient_app_bar

Answer 2

Appbar widget doesn't have gradient option yet but you can add it like this:
appBar: AppBar(
centerTitle: true,
title: Text('title'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Colors.red,
Colors.blue
])
),
),
)

Answer 3

You didn't use the stack as you need. you need to build stack under column with using position
SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
SizedBox(
height: 200,
width: double.infinity,
child: Image(
image: AssetImage('images/profile.png'),
),
),
Positioned(
bottom: 0,
left: MediaQuery.of(context).size.width / 2 - 20,
child: CircleAvatar(
backgroundImage: AssetImage('images/profile.png'),
),
),
],
),
Text('First Name'),
Text('Second name'),
Text('Email-id'),
Text('Passowrd'),
Text('Confirm passowrd')
],
),
)