I have my app set to display a user's profile image using a circle avatar once they sign in. I'm using a stream builder to determine which image is picked out of multiple user documents in fire store (imgUrl) // firebase storage (actual image). When I display the image on the app, it's zoomed in too far. When I stretch the width of the web browser for a bigger window the picture continues to zoom in relative to the size of the window. The image does not zoom in when stretching the window horizontally.

How do I set a fixed size for the Circle Avatar while inside a stream builder? I have tried setting a fixed size for the body and column parents but I have been unsuccessful. Thank you.

body: Center(
    child: Column(
      children: [
        // sized box used for temporary spacing
        const SizedBox(
          height: 20.0,
        ),
// ---------- Display users profile image ---------- //
            StreamBuilder(
              stream: collectionReference
                  .where("uid", isEqualTo: user.uid)
                  .snapshots(),
              builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong.');
                }
                final data = snapshot.requireData;
                return ListView.builder(
                  shrinkWrap: true,
                  itemCount: data.size,
                  itemBuilder: (context, index) {
// ---------- Circle Avatar ---------- //
                        return CircleAvatar(
                          radius: 60,
                          backgroundImage: NetworkImage(data.docs[index]['profileImageUrl']),
                        );
                      },
                    );
                  },
                ),

CodePudding user response：

The background image stretching with the Colmun here so probably wrapping CircleAvatar into Fitted box with fit: BoxFit.contain will solve your problem.