Flutter profile page with cover image and avatar

Question

I want to make profile page with cover image and profile image. I need to place profile photo stacked over cover photo at the bottom. Please refer to the above photo for reference.

Below is the code i have so far

class AccountPageState extends State<AccountPage> {    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 170.0,
        width: double.infinity,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/erev/background.png"),
                fit: BoxFit.cover,
            ),
            boxShadow: [new BoxShadow(color: Colors.black, blurRadius: 8.0)],
            color: Colors.green),
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(
                  top: 60.0, bottom: 18.0, right: 18.0, left: 18.0),
              child: Row(
                children: <Widget>[
                  Container(
                    height: 60.0,
                    width: 60.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: new AssetImage("assets/images/erev/admin.jpeg"),
                           fit: BoxFit.cover
                      )
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Hello Emmanuel, please paste the realted code you have so far to be able to help you and avoid downvotes — Lucas, Jul 15 '18 at 19:42
@EmmanuelFache when you ask a question, keep the other developers and how they search for an issue in mind. Try to make your question title and description more elaborated — Javid Noutash, Jul 16 '18 at 22:10

score 27 · Accepted Answer · answered Jul 16 '18 at 00:00

You need to use Stack widget.

This example code shows what you are looking for.

import 'package:flutter/material.dart';

  void main() => runApp(new MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Stack Demo',
        home: new StackDemo(),
      );
    }
  }

  class StackDemo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Stack Demo'),),
        body: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            // background image and bottom contents
            Column(
              children: <Widget>[
                Container(
                  height: 200.0,
                  color: Colors.orange,
                  child: Center(
                    child: Text('Background image goes here'),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.white,
                    child: Center(
                      child: Text('Content goes here'),
                    ),
                  ),
                )
              ],
            ),
            // Profile image
            Positioned(
              top: 150.0, // (background container size) - (circle height / 2)
              child: Container(
                height: 100.0,
                width: 100.0,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.green
                ),
              ),
            )
          ],
        ),
      );
    }
  }

Flutter profile page with cover image and avatar

1 Answers1

Linked