Can I make a Flutter UI w/a profile pic like this?

Ashenmadalagama
May 31, 2023
260 views
0 votes
2 Answers

I need to code similar to this UI design but I don’t know how can I achieve something like this and I try something it is good but have some problems I need to place this profile picture similar to this photo how can I do that my widget is hear

enter image description here

Card(
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          Container(
            width: double.infinity,
            height: 200.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  'https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 120.0),
            padding: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'In the making',
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 10.0),
                Text(
                  'sampe test **',
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Trainee Software Developer (Flutter)',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(height: 10.0),
                Container(
                  padding: EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Text(
                    '#Flutter',
                    style: TextStyle(
                      fontSize: 16.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                ElevatedButton(
                  onPressed: () {
                    // Add your navigation logic here
                  },
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                  ),
                  child: Text('View Profile'),
                ),
              ],
            ),
          ),
        ],
      ),
    );

enter image description here

Answers

You can do this modification in your code and you will get disier output

    class UserProfile extends StatelessWidget {
      const UserProfile({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          alignment: Alignment.topCenter,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 70),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(height: 70.0),
                      Text(
                        'In the making',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10.0),
                      Text(
                        'sampe test **',
                        style: TextStyle(
                          fontSize: 24.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        'Trainee Software Developer (Flutter)',
                        style: TextStyle(fontSize: 16.0),
                      ),
                      SizedBox(height: 10.0),
                      Container(
                        padding: EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        child: Text(
                          '#Flutter',
                          style: TextStyle(
                            fontSize: 16.0,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      SizedBox(height: 10.0),
                      ElevatedButton(
                        onPressed: () {
                          // Add your navigation logic here
                        },
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                        ),
                        child: Text('View Profile'),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(75),
              child: Image.network(
                "https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg",
                height: 150.0,
                width: 150.0,
                fit: BoxFit.fill,
              ),
            )
          ],
        );
      }
    }

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 120.0),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Card(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [

                  const SizedBox(height: 80,),

                  const Text('In the making', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold,),),

                  const SizedBox(height: 10.0),

                  const Text('sample test **',style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold,)),

                  const Text('Trainee Software Developer (Flutter)', style: TextStyle(fontSize: 16.0),),

                  const SizedBox(height: 10.0),

                  Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: const Text('#Flutter', style: TextStyle(fontSize: 16.0, color: Colors.white,),),
                  ),

                  const SizedBox(height: 10.0),

                  ElevatedButton(
                    onPressed: () {
                      // Add your navigation logic here
                    },
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                    ),
                    child: const Text('View Profile'),
                  ),
                ],
              ),
            ),
          ),


          //Circle Avatar
          Positioned(
            width: MediaQuery.of(context).size.width,
            top: -75,
            child: CircleAvatar(
              radius: 75,
              backgroundColor: Colors.transparent,
              child: ClipOval(child: Image.network('https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg')),
            ),
          ),
        ],
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.