Flutter user profile form – free user profile form using flutter with source code

• admin
• 0
• on Sep 10, 2022

This section we use flutter to design user profile form ui, We use simple widget such as;

1. Stack
2. Network Image
3. ClipRRect
4. Position
5. MaterialButton
6. TextField
7. ChoiceChip

You can copy source code below to see as the result above.

1. ProfileForm

import 'package:flutter/material.dart';
class ProfilePage10 extends StatelessWidget {
  const ProfilePage10({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 340,
              child: Stack(
                children: [
                  SizedBox(
                    height: double.infinity,
                    width: double.infinity,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(bottomRight: Radius.circular(40),bottomLeft: Radius.circular(40)),
                      child: Image.network(
                        'https://media.istockphoto.com/photos/headshot-portrait-of-smiling-male-employee-in-office-picture-id1309328823?b=1&k=20&m=1309328823&s=170667a&w=0&h=a-f8vR5TDFnkMY5poQXfQhDSnK1iImIfgVTVpFZi_KU=',
                        fit: BoxFit.cover,
                      ),
                    )
                  ),
                  Positioned(child: Container(
                    margin: const EdgeInsets.only(left: 20,right: 20,top: 60),
                    child: Row(
                      children: [
                        MaterialButton(
                          minWidth: 0.2,
                          elevation: 0.4,
                          color: Colors.white,
                          child: const Icon(Icons.arrow_back_ios_outlined,color: Colors.indigo),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          onPressed: () {},
                        ),
                        const Spacer(),
                        MaterialButton(
                          minWidth: 0,
                          elevation: 0.4,
                          color: Colors.white,
                          child: const Icon(
                            Icons.camera,
                            color: Colors.indigoAccent,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          onPressed: () {},
                        ),
                      ],
                    )
                  ))
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Text("Profile Information"),
                  TextField(
                    controller: TextEditingController()..text = 'Jonh Smith',
                    decoration: InputDecoration(
                      labelText: "FullName",
                    ),
                    style: TextStyle(
                      fontSize: 18.0,
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: "Education",
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: "Mobile Phone",
                    ),
                    keyboardType: TextInputType.phone,
                  ),
                  const SizedBox(height: 10.0),
                  InputDatePickerFormField(
                    firstDate: DateTime(DateTime.now().year - 5),
                    lastDate: DateTime(DateTime.now().year + 5),
                    initialDate: DateTime.now(),
                    fieldLabelText: "Date of Birth",
                  ),
                  const SizedBox(height: 10.0),
                  const Text(
                    "Programming Languages",
                  ),
                  const SizedBox(height: 5.0),
                  Wrap(
                    spacing: 10.0,
                    runSpacing: 10.0,
                    children: [
                      ChoiceChip(
                        label: const Text("Html & CSS"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("Javascript"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("Jquery"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("Bootstrap"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("PHP"),
                        onSelected: (val) {},
                        selected: false,
                      ),
                      ChoiceChip(
                        label: const Text("Flutter"),
                        onSelected: (val) {},
                        selected: false,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        height: 70,
        padding: const EdgeInsets.only(bottom: 15),
        child: TextButton(
          onPressed: (){

          },
          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.indigo)),
          child: const Text("Update Profile",style: TextStyle(color: Colors.white,fontSize: 16),),
        ),
      ),
    );
  }
}