Image selector placement in Flutter Screen - flutter

Question

I have an input screen developed in flutter where i need to get the user image uploaded/selected. for this in the Screen UI i want to have a design like this in the picture.
The code and what i have come up with the screen background is as follows. How can i add this kind of a circle in my code to enable image selection.
final form =
Container(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 4.0),
child: Column(
children: <Widget>[
SizedBox(height: 12.0),
title,
SizedBox(height: 16.0),
email,
SizedBox(height: 12.0),
userName,
SizedBox(height: 12.0),
password,
SizedBox(height: 12.0),
address,
SizedBox(height: 12.0),
country_dropdown,
SizedBox(height: 12.0),
phone,
SizedBox(height: 24.0),
continue_btn,
],
),
), ),
);
final body = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.5, 1.0],
colors: [
Color(0xFF03B898),
Color(0xFF01816B),
],
),
),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: Center(
child: Image.asset(
'assets/images/pawfect_logo.png',
height: 150.0,
width: 150.0,
fit: BoxFit.contain,
),
),
),
),
Expanded(
flex: 4,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(50),
),
),
child: form, //Text('this text here'),
),
),
],
),
));
return Scaffold(
body: body,
);```

Answer 1

Check out this example :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
final form = Container(
height: MediaQuery.of(context).size.height*0.75,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 4.0),
child: Column(
children: <Widget>[
SizedBox(height: 90.0),
Text('Name'),
SizedBox(height: 16.0),
Text('email'),
SizedBox(height: 12.0),
Text('username'),
SizedBox(height: 12.0),
Text('password'),
SizedBox(height: 12.0),
Text('Address'),
SizedBox(height: 12.0),
Text('Dropdown'),
SizedBox(height: 12.0),
Text('Phone'),
SizedBox(height: 24.0),
Text('con btn'),
],
),
),
);
final body = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.5, 1.0],
colors: [
Color(0xFF03B898),
Color(0xFF01816B),
],
),
),
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.25,
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(50),
),
),
child: form, //Text('this text here'),
),
],
),
Positioned(
right: 30,
top: 150,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(50)),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.camera_alt,
color: Colors.white,
),
Text(
'Upload Image',
style: TextStyle(fontSize: 10, color: Colors.white),
)
],
),
),
),
],
));
return Scaffold(
body: SingleChildScrollView(child: body),
);
}
}
Let me know if it works

Answer 2

You can use the following snippet to create a button on click of which the user will be prompted to select an image (either from gallery or camera)
class Layout extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF03B898),
body: Stack(
children: <Widget>[
Card(
margin: EdgeInsets.only(top: 150),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(50),
),
),
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
),
Positioned(
top: 120,
right: 30,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Color(0xFF03B898),
onPressed: () async {
final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
},
padding: EdgeInsets.all(30.0),
child: Icon(
Icons.camera_alt,
color: Colors.white,
),
),
),
],
),
);
}
}
I have used the Image Picker library to select the image.