Circle Profile Image on Sliver Appbar

Question

I'm trying to include a circle profile image button on my sliver app bar but the sliver app bar isn't quite rendering it right. This is what i'm getting, how can I achieve a circle profile image on a sliver app bar?

My Code:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Home'),
              leading: Container(),
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.notifications),
                    onPressed: () {}),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: InkWell(
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          image: DecorationImage(image: AssetImage('assets/images/blank_profile.png'))
                      ),
                    ),
                    onTap: () => Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => ProfilePage())),
                  ),
                ),
              ],

            ),

Using a CircleAvatar :

 @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Home'),
              backgroundColor: Colors.deepOrange,
              leading: Container(),
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.notifications),
                    onPressed: () {}),
                CircleAvatar(
                  backgroundImage: AssetImage('assets/images/blank_profile.png'),
                  minRadius: 28,
                ),
              ],

            ),

Use circle Avatar widget https://docs.flutter.io/flutter/material/CircleAvatar-class.html — anmol.majhail, Mar 22 '19 at 03:21
A circle image you would find on an app bar in any modern day app I'm sure you've encountered apps where the user profile image appears as a circular image on the app bar — theSimm, Mar 22 '19 at 17:19

Yash · Accepted Answer · 2019-03-22T19:13:47.967

6

For that you have to use CircleAvatar for that.

This is the code you can use:

SliverAppBar(
  title: Text('Home'),
  leading: Container(),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.notifications),
      onPressed: () {}),
    CircleAvatar(
      child: ClipOval(
        child: Image.asset('assets/images/blank_profile.png'),
      ),
    ),
  ],
)

edited Mar 22 '19 at 19:13

answered Mar 22 '19 at 05:48

Yash

5,459
3
17
29

1

It is still not rendering it right, i updated my question with the results i'm getting – theSimm Mar 22 '19 at 13:55
Did you exactly tried my code? Because in updated question you added `minRadius: 28` in CircleAvatar which makes it bit bigger then required. And if that's not the problem then what do you mean by not rendering it right? – Yash Mar 22 '19 at 14:37
Yeah your code renders it as a square image so I added the radius – theSimm Mar 22 '19 at 17:17
Try adding a circle avatar to a flutter sliver app bar is coming out as a square for some reason – theSimm Mar 22 '19 at 17:24
Their seem to be issue with CircleAvatar backgroundImage property so i updated the answer with ClipOval as a child and it works perfert now. – Yash Mar 22 '19 at 19:15

Circle Profile Image on Sliver Appbar

1 Answers1