Source: https://codepen.io/joannholland/pen/GRoXGMZ

flutter-social-media-profile-app-ui.dart

import 'package:flutter/material.dart';

final appHeight = 650.0;
final appWidth = 350.0;
final topSectionHeight = 250.0;
final middleSectionHeight = 110.0;
final List<String> urls = [ 'https://media.wired.com/photos/5d8aab8bef84070009028d31/master/pass/Plant-Music-1162975190.jpg',
  'https://images.photowall.com/products/58131/jungle-plants.jpg?h=699&q=85',
  'https://ak.picdn.net/shutterstock/videos/19795549/thumb/8.jpg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSzIBq8nrrF631566zTKrioISfjIx9M868t-w&usqp=CAU',
  'https://images-na.ssl-images-amazon.com/images/I/81reO0wmVBL._AC_SX466_.jpg', 'https://img.auctiva.com/imgdata/1/7/3/7/5/8/7/webimg/615338835_tp.jpg',
  'https://images.unsplash.com/photo-1491147334573-44cbb4602074?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80',
  'https://i.pinimg.com/originals/f8/2a/c0/f82ac0c390529f0a96d975c6b6f7c997.jpg', 'https://i.pinimg.com/originals/e2/21/55/e22155d78e4ab7d13195322ae3b50f4c.jpg',
  'https://i.pinimg.com/originals/56/55/c5/5655c5df6a3f97377063ba5f17feb97e.jpg',
];

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));

const PrimaryColor = Color(0xffECFEF3);
const SecondaryColor = Color(0xffD9FDE8);

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        leading: Icon(
          Icons.arrow_back,
          color: PrimaryColor,
        ),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.more_vert, color: PrimaryColor),
            tooltip: 'Show Snackbar',
            onPressed: () {
              scaffoldKey.currentState.showSnackBar(snackBar);
            },
          ),
        ],
        elevation: 0.0,
        backgroundColor: Colors.grey[900],
      ),
      body: Container(
        color: Colors.white,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  ProfileInfo("Profile Info"),
                  Stack(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(
                            child: Text(''),
                            width: appWidth/2,
                            height: middleSectionHeight,
                            decoration: BoxDecoration(
                              color: Color(0xffECFEF3),
                            ),
                          ),
                          Container(
                            child: Text(''),
                            width: appWidth/2,
                            height: middleSectionHeight,
                            decoration: BoxDecoration(
                              color: Colors.white,
                            ),
                          ),
                        ]
                      ),
                      ProfileStats("Profile Stats"),
                    ]
                  ),
                  Container(
                    height: 70.0,
                    child: Stack(
                      children: <Widget>[
                        Container(
                          color: SecondaryColor,
                        ),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(topLeft: Radius.circular(70.0)),
                            color: Colors.white,
                          ),
                          child: Center(
                            child: Text('Posts', style: TextStyle(fontFamily: 'Futura', fontSize: 16.0)),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SliverPadding(
              padding: EdgeInsets.only(bottom: 20.0, left: 20.0, right: 20.0),
              sliver: Container(
                child: SliverGrid(
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 175.0,
                    mainAxisSpacing: 15.0,
                    crossAxisSpacing: 15.0,
                    childAspectRatio: 1.0,
                  ),
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return Container(
                        padding: (index%2==0 ? EdgeInsets.only(left: 20.0) : EdgeInsets.only(right: 20.0)),
                        child: ImageWidget('${urls[index]}', index)
                      );
                    },
                    childCount: urls.length,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileInfo extends StatelessWidget {
  final String text;

  ProfileInfo(this.text);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          color: SecondaryColor,
          width: MediaQuery.of(context).size.width,
          height: topSectionHeight,
        ),
        Container(
          height: topSectionHeight,
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.all(16.0),
          child: Center(
                  child: Column(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(left: 30.0),
                        child: Text('My Profile', style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w500, color: Color(0xff205A48), fontFamily: 'Futura'))
                      ),
                      Container(
                        margin: EdgeInsets.all(20.0),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                              color: Color(0xff022711).withOpacity(0.3),
                              spreadRadius: 1,
                              blurRadius: 10,
                              offset: Offset(0, 5), // changes position of shadow
                            ),
                          ],
                        ),
                        child: CircleAvatar(
                          backgroundImage: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQlpABsTZz1ljJxRKEbV9HpYfWBcTzq3e2yww&usqp=CAU'),
                          radius: 35.0,
                        )
                      ),
                      Container(
                        child: Text('Jane Doe', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 12.0),
                        child: Text('@jane.doe', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura'))
                      )
                    ]
                  )
                ),
          decoration: BoxDecoration(
            color: PrimaryColor,
            borderRadius: BorderRadius.only(bottomRight: Radius.circular(70.0))
          ),
        )
      ],
    );
  }
}

class ProfileStats extends StatelessWidget {
  final String text;

  ProfileStats(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: middleSectionHeight,
      padding: EdgeInsets.all(16.0),
      child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.only(top: 2.0),
                              child: Text('Photos', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura')),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.0),
                              child: Text('567', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
                            )
                          ]
                        ),
                        Column(
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.only(top: 2.0),
                              child: Text('Followers', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura')),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.0),
                              child: Text('12,454', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
                            )
                          ]
                        ),
                        Column(
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.only(top: 2.0),
                              child: Text('Follows', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura')),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.0),
                              child: Text('127', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
                            )
                          ]
                        ),
                      ]
                    )
                  ]
                ),
      decoration: BoxDecoration(
        color: SecondaryColor,
        borderRadius: BorderRadius.only(bottomRight: Radius.circular(70.0), topLeft: Radius.circular(70.0)),
      ),
    );
  }
}

class ImageWidget extends StatelessWidget {
  final String url;
  final int index;

  ImageWidget(this.url, this.index);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover, 
          image: NetworkImage(this.url)),
        borderRadius: BorderRadius.all(Radius.circular(40.0)),
      ),
      alignment: Alignment.center,
      width: 200.0,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: PrimaryColor,
      ),
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.grey[800],
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: appWidth,
                    height: appHeight,
                    child: Center(
                      child: MyWidget()
                    ),
                  )
                ]
              )
            ]
          )
        )
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}