How to create square avatar with rounded corners on flutter?

Question

I want to create a widget similar to CircleAvatar, but not rounded. This is CircleAvatar:

And this is the avatar I want to create:

I want to know if there is a default widget to do this, as CircleAvatar for rounded avatars.

Answer 1

You can use the combination of ClipRRect and Container Widget to achieve the same, use the above code given.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
  borderRadius: BorderRadius.circular(15.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: const Color(0xffFF0E58),
    child: const Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
);
  }
}