Image selector placement in Flutter Screen

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 expected look

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: [
            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,
    );```

user_10461992 · Answer

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: [
         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.

user_12000053 · Answer

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 {
  @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: [
            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: [
            Column(
              children: [
                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: [
                    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

Image selector placement in Flutter Screen

2 Answers