Search code examples
flutterflutter-layoutflutter-appbar

Why I can't change the height of CircleAvatar or other circular widgets in AppBar in Flutter?

I am trying to put a CircleAvatar inside the AppBar in the actions list, but the CircleAvatar will stick its height to that of the AppBar, making it impossible to resize it and to keep it circular. I already tried wrapping it inside a Container or SizedBox, but it didn't work.

Example:

import 'package:flutter/material.dart';

class HoursScreenEmployee extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white10,
        brightness: Brightness.light,
        elevation: 0,
        centerTitle: false,
        actions: [
          CircleAvatar(
            backgroundImage: NetworkImage("https://picsum.photos/500/300"),
            maxRadius: 15,
            minRadius: 15,
          ),
        ],
        title: Text(
          "La Chance 🍻",
          style: TextStyle(
            fontFamily: "Masiva",
            fontSize: 27,
            fontWeight: FontWeight.w800,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

enter image description here

Solution

  • You can wrap the CircleAvatar in a Row:

    actions: [
          Row(
            children: <Widget>[
              Container(
                height: 60,
                width: 60,
                child: CircleAvatar(
                  backgroundImage:
                      NetworkImage("https://picsum.photos/500/300"),
                  maxRadius: 15,
                  minRadius: 15,
                ),
              ),
            ],
          ),
        ],

    Result:

    res